Рубрики
Uncategorized

Как развернуть свой реагированный проект на NetLify? (шаг за шагом)

Сегодня давайте посмотрим, как развернуть ваше приложение React в NetLify, включая настройку непрерывного D … Теги с WebDev, Rect, DevOps, NetLify.

Сегодня давайте посмотрим, как развернуть ваше приложение React в NetLify, включая настройку непрерывного развертывания.

Непрерывное развертывание (CD) — это процесс выпуска программного обеспечения, который использует автоматическое тестирование для проверки, если изменения в кодовой базе являются правильными и стабильными для немедленного автономного развертывания к производственной среде.

Почему нетни?

NetLify — это платформа All-in-One для беговых веб-проектов. Это означает, что вы можете использовать NetLify для хостинга большинства, если не все ваши веб-проекты. NetLify прост в использовании и настройке, который отлично работает, когда у вас есть базовый сайт, который вы хотите встать и открыть для того, чтобы мир быстро использовать.

Этот пост объяснит шаг за шагом для развертывания нашего проекта React Project для подключения в качестве различных способов, которыми NetLify позволяет нам сделать это.

Прежде всего, нам нужно иметь пример реагирования проекта для развертывания в NetLify. Таким образом, вы можете использовать предыдущий проект или создать новый со следующими командами.

Мы будем использовать пакет Create-raction-app Это позволяет нам начать проект всего за несколько секунд.

npx create-react-app react-project-example

Примечание : React-Project-пример — это имя проекта может быть изменено, как вы предпочитаете.

После запуска команды вы создадите папку с именем React-Project пример или имя, которое вы предпочитаете. Следующим шагом будет убедиться, что приложение успешно работает. Чтобы начать приложение необходимо использовать следующую команду

npm start

После этого вы можете войти http://localhost: 3000/ В вашем браузере и увидим что-то подобное, поздравляю! 🎉 🎊 👏

Примените изменения в проекте

Кроме того, вы можете применить изменение в проект реагирования, чтобы убедиться, что изменения применяются, например,

src/app.js.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
logo

Hello World #1

); } export default App;

С изменениями, страница будет выглядеть как

Вы можете найти код, который мы делаем здесь, в этом репозитории GitHub как-развертывание-реагирование — проект-проект-проект -пример

Прежде всего, вам нужно создать NetLify Учетная запись, которая бесплатная на стартер.

Есть два способа NetLify, чтобы сделать развертывание в случае реагирования проекта

  • Ручное развертывание
  • Автоматическое развертывание

Ручное развертывание

Это самый простой способ развертывания вашего реагирования в NetLify. В основном, состоит из перетаскивания и отбросить сборку, генерируемую с нашим приложением к странице NetLify.

Прежде чем делать это, нам нужно сделать некоторые вещи, нам нужно будет генерировать сборку нашего приложения React Application, нам нужно выполнить следующую команду

npm run build

Как только команда была успешно выполнена, вы увидите построить папка в проекте.

Следующим шагом является открытие папки RACT Project Project в Finder, если вы находитесь в Explorer Mac или файла в случае Windows и перетащите и перетащите папку «Создать» в пустое поле на странице NetLify.

Вот и все. Через несколько секунд приложение должно быть развернуто. Вы увидите и URL, например, что-то вроде https://relaxed-liskov-f39467.netlify.app/ ( Это URL, созданный NetLify), который мы можем поделиться с людьми для доступа к сайту.

Автоматическое развертывание (от Git)

Как уже упоминалось до того, как развертывание вручения NetLify является самым простым способом развертывания, однако, простейший не всегда лучший для программного проекта. В случае, если мы внесите изменение нашего исходного кода, не будут отражены на веб-странице, пока не будет сделано новое ручное развертывание, которое может спровоцировать пульты времени для членов команды и проекта.

* Как мы развертываем наши приложения? *

Когда мы используем автоматическое развертывание, все изменения, внесенные в код, отражены на развернутом сайте, каждый раз, когда мы нажимаем в репозиторий.

Прежде чем делать это, нам нужно добавить проект в репозиторий. Перейдите в систему управления версиями и создайте новый пустой репозиторий для вашего приложения, могут быть публичными или частными, нет проблем с этим.

В случае GitHub следуйте этим руководством Добавление существующего проекта на GitHub с помощью командной строки

После того, как репозиторий находится в системе управления версией в качестве GitHub, GitLab или BitBucket, мы можем начать с настройки автоматического развертывания NetLify. Нажмите в кнопку Новый сайт из Git

Вам нужно будет авторизовать NetLify доступ к вашей системе управления версиями, после чего вы можете найти и выбрать конкретный репозиторий, который хочет развернуть.

Примечание : В этом примере изображение было выбрано GitHub

Следующим шагом будет установить некоторые параметры настроек, связанные с сборкой и ветвями

  • Ветвь для развертывания
  • Создать команду
  • Опубликовать каталог (каталог сборки)
  • Передовой
    • Переменные среды
    • Настройки функций (функции без сервеса)

Все они заполнены автоматически, но в некоторых случаях могут потребоваться изменять, после этого затем нажмите на Развертывание Кнопка, и наше приложение будет развернуто.

Тестирование нашего NetLify автоматическое развертывание

Теперь всякий раз, когда выбираем то, что мы делаем с ветвью, которую мы устанавливаем на шаге настройки, мы нажимаем в систему управления версией, которая будет создавать, что NetLify автоматически создает наше приложение для нас и обновить нашу развернутую версию.

Чтобы проверить это, мы применим быстрое изменение в наше приложение React в src/app.js.

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
logo

Hello World #2 from automatic deployment

); } export default App;

Как только эти изменения сделаны. После совершения и продвижения вашего кода в систему управления версией создаст новое развертывание.

После этого немного времени вы должны увидеть ваши изменения, отраженные в вашем веб-сайте NetLify.

Персонализируйте некоторые конфигурации NetLify

Есть дополнительная конфигурация, которую мы можем подать заявку на наш трубопровод как

  • Отключить автоматическое развертывание
  • Изменить домен веб-сайта

Отключить автоматическое развертывание

В некоторых проектах развертывание должно быть сделано в определенные времена, часовой пояс или с некоторыми различными правилами, чтобы убедиться, что качество сборки с тестированием и другими практиками, которые могут быть применены к вашему проекту.

По сути, нам просто нужно выбрать Развертывает Вкладка и нажмите на Остановить авто публикацию То, что с провоцируем, что наши изменения не будут отражены автоматически, пока мы не решили запустить новое развертывание вручную из веб-сайта NetLify.

У нас есть два варианта, чтобы сделать это. Первый — нажать на последнюю неопубликованную сборку и выберите Опубликовать развертывание кнопка. Второй — это параметр развертывания триггера в экране развертывания и просто повторите предыдущие шаги в другой вариант.

Как только вы нажмете в размещении публикации, изменение будет отражено на сайте.

Изменить домен веб-сайта

Когда вы проверили, домен NetLify по умолчанию генерируется случайным способом, основанным на алгоритме, разработанном NetLify. В случае, если мы хотим изменить этот домен, нам нужно перейти к настройкам домена

Один раз в этом разделе выберите Опции> Редактировать имя сайта И введите новое имя сайта для вашего сайта в NetLify Имя сайта Определяет URL по умолчанию. После этого URL-адрес домена изменится на основе выбранного имени сайта.

Кроме того, вы можете принести пользовательское доменное имя, которое у вас уже есть, или купите новый с NetLify.

NetLify — это потрясающая платформа для запуска наших веб-проектов, поскольку вы видите во время этого поста, мы исследуем некоторые функции, связанные с развертываемыми, поэтому не бойтесь, чтобы передать его на практике, вы ее узнали. Я надеюсь, что это будет полезно для всех.

Я буду писать некоторые другие посты, связанные с NetLify, есть несколько функций, которые мы можем исследовать и интегрировать в наши проекты, а также дайте мне знать, если у вас есть идея об этой теме, о которой я могу говорить на следующих постах.

Дайте мне знать в комментариях рекомендации или что-то еще, что можно добавить, я буду обновлять пост на основе этого спасибо! 👍.

Оригинал: «https://dev.to/brayanarrieta/how-to-deploy-your-react-project-to-netlify-step-by-step-3a06»