Узнайте, как легко развернуть приложение React с помощью Netlify
Я был поражен тем, насколько простым может быть развертывание приложения с помощью Netlify, когда я впервые столкнулся с этим инструментом. Честно говоря, это один из самых крутых инструментов, которые я использую как разработчик программного обеспечения. Он берет что-то невероятно утомительное и сложное и превращает это в самую простую часть вашего рабочего процесса разработки. Я покажу вам, насколько это просто, показав, как развернуть на нем приложение React.
Предпосылки
- Должны быть установлены Node и NPM (диспетчер пакетов Node).
- Учетная запись на Github (Очень просто создать ее, если у вас ее нет)
- Базовый опыт командной строки
Давайте начнем
Первое, что нам нужно сделать, это открыть терминал/командную строку (в зависимости от вашей ОС). После того, как вы это сделаете, вы захотите пойти дальше и перейти в каталог, в котором вы хотите, чтобы ваш проект жил, и запустить эту команду.
npx create-react-app my-first-app
Пока это устанавливается, мы можем перейти к следующему шагу, который будет создавать репо в Github. Существует несколько способов сделать это, поэтому, если вы уже знакомы с тем, что делать, вы можете пойти дальше и сделать это. В противном случае вы можете следовать ниже.
Сначала мы собираемся перейти на сайт Github. Надеюсь, у вас уже есть учетная запись и вы вошли в систему. В противном случае вы можете сделать это сейчас.
После того, как вы вошли в Github, нажмите «Создать», чтобы создать новый репозиторий. Вы можете дать ему любое имя, какое захотите. Вы можете сделать его общедоступным или частным. Тогда не ставьте галочки. Теперь продолжайте и создайте репозиторий. Вас должен приветствовать экран, который выглядит примерно так.
Нас будут интересовать команды для существующего репозитория. Продолжайте и держите эти команды под рукой, потому что мы собираемся использовать их дальше.
Теперь вернемся к нашему терминалу/командной строке. Если все установлено, теперь мы сможем запустить эту команду, чтобы перейти к нашему проекту.
cd my-first-app
Как только мы здесь, мы можем копировать и вставлять различные команды git в командную строку. Он может попросить вас войти в систему после того, как вы выполните последнюю команду. Это нормально и может произойти, если на вашем компьютере не настроена учетная запись по умолчанию.
Теперь, чтобы подтвердить, что все, что мы сделали, работает, мы собираемся продолжить и обновить страницу браузера с нашим репозиторием Github, и теперь мы должны увидеть, что наш код из только что созданного проекта находится там.
И вот момент, которого мы все ждали…
Время развернуть наш код в Интернете
Итак, первый шаг — создать учетную запись на Netlify. Я считаю, что проще всего просто войти с помощью Github, но вы также можете использовать свою электронную почту, если хотите. После создания учетной записи вас встретит краткое руководство. Вы можете прочитать это или закрыть.
После того, как вы создали учетную запись, следующим шагом будет предоставление Netlify разрешения на доступ к вашим репозиториям на Github. Это действительно очень просто. Первый шаг — нажать кнопку «Новый сайт из Git». Это приведет вас к странице, которая выглядит примерно так.
Мы собираемся нажать на Github. Это откроет новое окно, которое может попросить вас предоставить Netlify доступ к вашим репозиториям Github. Убедитесь, что вы решили предоставить ему доступ ко всем репозиториям. После того, как вы это сделаете, вы сможете вернуться на веб-страницу Netlify и найти там свой репозиторий. Идите вперед и нажмите на нее, и вас встретит экран, который выглядит так.
Здесь для нас будут работать параметры по умолчанию, поэтому вы можете нажать кнопку «Развернуть сайт».
Ваша команда сборки может отличаться от моей. У меня написано yarn build, но у вас может быть написано npm run build
После того, как вы нажали развертывание, происходит волшебство Netlify! Вы увидите экран, который выглядит следующим образом.
Когда это будет сделано, если вы посмотрите на производственные развертывания, вы увидите, что там написано «опубликовано». И в верхней части экрана будет ссылка с вашим первым приложением React! Теперь это живой сайт, которым можно поделиться с кем угодно по всему миру.
Заворачивать
Netlify — это удивительный инструмент, который дает гораздо больше, чем я показал вам сегодня. Он позволяет легко выполнять развертывание в собственном домене, автоматически шифровать ваши сайты с помощью ssl-сертификатов, а также автоматически развертывать код на вашем сайте при отправке нового кода в ваш репозиторий. Не стесняйтесь экспериментировать и получайте удовольствие от этого. Netlify чрезвычайно прост в освоении, но невероятно обширен в том, что вы можете с ним делать.
Теперь, когда вы видите, как легко приложение React можно развернуть в Интернете, надеюсь, теперь вы можете выйти туда и поделиться своими потрясающими приложениями со всем миром!
