Project Deployment

Что такое деплой? 🧐

Деплой — процесс развертывания новой версии сайта на сервер (или сервера). Этот процесс может быть довольно сложным и сильно зависит от используемых технологий.

Во время деплоя могут выполняются следующие задачи:

1. Код проекта скачивается на сервер (обычно через клонирование Git)
2. Ставятся все необходимые зависимости (npm install)
3. Выполняется процесс сборки. (npm run build)
4. Замена старых файлов на новые.

Что такое хостинг? 🤔

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

Сервер – это физический компьютер, который работает без перерывов, чтобы ваш сайт был доступен в любое время.

Деплой с использованием GitHub Pages и create react app

Шаг 1

Добавить homepage в package.json

homepage может выглядеть следующим образом:

Для конкретного репозитория:

Copy
"homepage": "https://myusername.github.io/my-app",

для страницы пользователя GitHub:

Copy
"homepage": "https://myusername.github.io",

для страницы личного домена:

Copy
"homepage": "https://mywebsite.com",

Create React APP использует поле домашней страницы для определения корневого URL-адрес.

Шаг 2

Установка пакета gh-pages

Copy
npm install --save gh-pages

Добавим deploy script в package.json

Copy
"scripts": {
+   "predeploy": "npm run build",
+   "deploy": "gh-pages -d build",
    "start": "react-scripts start",
    "build": "react-scripts build",

predeploy script будет запускать запускается автоматически перед запуском deploy.

Скрипты с приставкой pre/post это npm хуки, которые могут запускаться перед началом скрипта или же после его выполнения.

Шаг 3 Deploy

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

Copy
npm run deploy

Шаг 4

Настройка github repository

Убедитесь, что параметр GitHub Pages в настройках вашего проекта GitHub настроен на использование ветки gh-pages:

  Читать болле подробною инструкцию по развертыванию приложения на github pages  

Примечания по маршрутизации на стороне клиента 🚨

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

1. Скопируйте 404.html файл в ваше приложение.
   • Обратите внимание: если вы настраиваете сайт Project Pages и не используете custom domain (т.е. адрес вашего сайта - username.github.io/repo-name), вам необходимо установить segmentCount на «1» в файле «404.html», чтобы сохранить «/repo-name» в пути после перенаправления.
2. Скопируйте redirect script из index.html и добавте в ваш index.html файл - Обратите внимание, что скрипт перенаправления должен быть перед скриптом одностраничного приложения в вашем файле index.html.  

Почитать  📚

• Детальнее про SPA for Github Pages.
• Известные проблемы с деплоем на github pages описаны.

Деплой с Netlify 😎

Netlify это сервис для публикации и размещения статических сайтов, с довольно большими возможностями. Здесь есть:

• dns-хостинг
• настройки редиректов и заголовков для определенных файлов,
• автоматическая минификация js/css файлов

Copy
npm install netlify-cli -g
netlify deploy

Выберать build директорию в качестве пути для развертывания.

Настройка CI:

С этой настройкой Netlify будет создавать и развертывать, когда вы делаете git push или создаете Pull request:

• Начать новый проект netlify
• Выбрать свой репозиторий
• Нажмите "Build your site".

Поддержка маршрутизации на стороне клиента:

Для поддержки pushState обязательно создайте public/_redirects со следующими правилами перезаписи:

Copy
/*  /index.html  200

При сборке проекта Create React App поместит содержимое общей папки в выходные данные сборки.

Почитать 📚

• Deploy Create react app за 30с с Netlify