Как развернуть веб-сайт React на AWS S3 с помощью действий GitHub

Непрерывная интеграция и развертывание (CI / CD)

Недавно мне понадобилось развернуть и разместить веб-сайт на React. Я полагался на AWS. В этой статье я объясню, как развернуть и разместить веб-сайт React на AWS S3 с помощью GitHub Actions для непрерывной интеграции и развертывания (CI / CD) вашего приложения.

Какие технологии и компоненты мы будем использовать?

Для этого урока нам потребуются следующие технологии:

• Реагировать на развертывание
• Репозиторий GitHub для размещения исходного кода
• Действия GitHub для CI / CD
• AWS S3 для статического веб-хостинга

Предпосылки

• Аккаунт GitHub
• Аккаунт AWS
• Приложение React

Отправьте исходный код на GitHub

Чтобы включить CI, вам необходимо разместить код в репозитории GitHub.

Чтобы создать его, в GitHub после входа в систему нажмите кнопку «+» и выберите «Новый репозиторий».

После этого вы должны увидеть следующую страницу:

На этом вы можете выбрать разные параметры для своего репозитория GitHub:

• Название репозитория: укажите в нем название вашего проекта / подпроекта.
• Описание: может быть полезно, если вы создаете общедоступный репозиторий, чтобы кратко объяснить, что в нем содержится.
• Доступность - общедоступная или частная: позволяет сделать репозиторий доступным для всех или заблокированным для всех, кроме случаев, когда вы предоставляете им доступ (имейте в виду, что у вас может быть только три участника в частном репозитории, если у вас есть бесплатный аккаунт GitHub)
• Инициализируйте этот репозиторий с помощью README: я рекомендую вам не устанавливать этот флажок. Команда create-response-app обычно инициализирует репозиторий файлом README.
• Добавить .gitignore. Как и раньше, я рекомендую выбрать «Нет», поскольку его инициализирует команда create-react-app.

Теперь вы можете создать свой репозиторий.

Свяжите свое приложение с этим репозиторием

Теперь нам нужно разместить исходный код приложения в репозитории GitHub. Введите эти команды в терминал, на котором вы создали свое приложение (измените параметры, выделенные жирным шрифтом, на информацию о вашем репозитории):

git init
git add .
git commit -m "first commit on Github"
git remote add origin [email protected]:Thrandread/oagencia.git
git push -u origin master

Теперь вы должны увидеть свой код, размещенный в GitHub:

Мы завершили первый шаг, разместив код приложения на GitHub. Теперь я объясню, как создать и настроить корзину AWS S3 для этого приложения React.

AWS S3 Bucket Creation

Корзина S3 будет использоваться для размещения статической части (/build) вашего приложения в Интернете. Чтобы создать его, сначала войдите в консоль AWS и перейдите к сервису S3:

Как видите, у меня уже создано несколько сегментов AWS S3 (я закрасил их серым прямоугольником).

Теперь, когда вы находитесь в консоли S3, нажмите Create bucket. Вам будет предложено ввести название вашей корзины. Он должен быть уникальным во всем мире, поэтому я рекомендую вам ввести имя домена, в котором будет размещено ваше приложение - в моем случае это будет oagencia.com, но замените его своим собственным.

Снимите флажок с параметра «Блокировать весь общий доступ». Поскольку этот сегмент будет использоваться для размещения созданного приложения, нам потребуется, чтобы у всех был общий доступ к приложению.

Теперь вы можете нажать «Создать корзину».

Теперь выберите ведро, щелкнув его имя.

Выберите вкладку «Свойства», а затем выберите «Статический хостинг веб-сайтов».

В этом окне выберите вариант «Использовать этот сегмент для размещения веб-сайта». Заполните как «Индексный документ», так и «Документ с ошибкой» index.html, а затем сохраните.

Примечание. Также важно, чтобы документ об ошибке указывал на index.html, иначе React Router вашего приложения не будет работать!

Если вы попытаетесь получить доступ к конечной точке, предоставленной AWS, вы должны получить ошибку 403, в которой говорится, что доступ запрещен. Чтобы исправить это, перейдите в Разрешения, а затем Политика сегмента. Внизу страницы нажмите Генератор политики.

Вы будете перенаправлены на страницу, на которой будет создана политика.

Сначала выберите «Политика сегмента S3» в качестве типа политики. Затем мы должны определить оператор, как на следующем снимке экрана:

• Эффект: Разрешить
  Разрешить трафик.
• Директор: *
  Это позволит всем получить к нему доступ.
• Сервис AWS: Amazon S3
• Действия: GetObject
  Мы хотим, чтобы публика могла получать только содержание веб-сайта, но не могла его редактировать.
• Название ресурса Amazon (ARN): arn:aws:s3:::oagencia.com/*
  Замените oagencia.com названием своей корзины. Не забудьте добавить /* после него, чтобы каждый мог получить доступ ко всему содержимому вашего созданного приложения.

Теперь вы можете нажать «Добавить заявление» и «Создать политику». Откроется всплывающее окно с вашей политикой. Скопируйте его содержимое, вставьте его в «редактор политик сегмента» своего сегмента S3 и сохраните. У вас должно получиться что-то похожее на следующий снимок экрана:

Теперь, если вы снова попытаетесь получить доступ к конечной точке, предоставленной AWS, у вас должна появиться ошибка 404 Not Found. Это потому, что ваше ведро в данный момент все еще пусто. Чтобы исправить это, мы должны разместить созданное приложение с CI из GitHub Workflow.

Создайте свой рабочий процесс GitHub

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

Сначала перейдите в ранее созданный репозиторий GitHub на вкладке Actions.

Нажмите «Самостоятельно настроить рабочий процесс». В вашем репозитории будет создан файл, который вы будете использовать для настройки рабочего процесса. Сначала нажмите «Начать фиксацию» и «Зафиксировать новый файл», чтобы этот файл был сохранен в вашем репозитории.

Этот файл состоит из трех разных частей:

• name: название вашего рабочего процесса. Я лично назвал свой рабочий процесс Production Build Front.
• on: перечислите действия, запускающие рабочий процесс. Сохраните его в том виде, в котором он был предварительно настроен: push-уведомления и запрос на вытягивание в главной ветви будут запускать выполнение рабочего процесса.
• jobs: здесь мы поместим различные команды, которые должны выполняться при запуске рабочего процесса;

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

Рабочий процесс должен будет выполнить следующие действия:

• Используйте версию Node, в которой разработано ваше приложение
• Оформить заказ на содержимое репозитория GitHub
• Установите зависимости пакета вашего проекта
• Постройте оптимизированную производственную сборку
• Разверните эту сборку в недавно созданной корзине S3

1. Используйте версию Node, в которой разработано ваше приложение.

После строки runs-on: ubuntu-latest мы определим в strategy версию узла, которую использует приложение:

strategy:      
  matrix:        
     node-version: [11.x]

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

Теперь нам нужно указать рабочий процесс, чтобы использовать эту версию на этапах:

steps:      
  # Use the node version specified in the strategy    
  - name: Use Node.js ${{ matrix.node-version }}      
    uses: actions/setup-node@v1      
    with:        
      node-version: ${{ matrix.node-version }}

Это делает шаг с именем Use Node.js 11.x (в моем случае) будет использовать версию узла, которую вы указали в своей стратегии.

На данный момент ваш файл рабочего процесса должен выглядеть так:

2. Проверьте содержимое репозитория GitHub.

Этот рабочий процесс должен получить содержимое вашего репозитория перед его построением. Для этого мы создадим второй шаг вроде этого:

# Checks-out your repository under $GITHUB_WORKSPACE, so your job can access it
- name: Git checkout
  uses: actions/checkout@v2

3. Установите пакетные зависимости вашего проекта.

У нас есть указанная версия Node. Мы получаем код проекта перед его сборкой. Нам нужно установить все пакеты в зависимостях, выполнив команду yarn install.

# Install packages
- name: Install packages
  run: |
    yarn install

Если ваше приложение React не находится в корневой папке вашего репозитория GitHub, вы можете перемещаться, настроив этот шаг следующим образом: (вам нужно будет добавить ту же команду для следующего шага).

# Install packages
- name: Install packages
  run: |
   cd react-application-folder/
   yarn install

4. Постройте оптимизированную производственную сборку.

Перед переносом приложения на AWS S3 мы должны создать его оптимизированную сборку, выполнив yarn build.

# Build an optimized production build
- name: Production build      
  run: |        
    unset CI
    yarn build

С моей стороны, у React были проблемы со средой CI. Все предупреждения, возникающие во время сборки, останавливали его. Вот почему я добавил неустановленную команду CI (https://github.com/facebook/create-react-app/issues/2453).

5. Разверните эту сборку в недавно созданной корзине S3.

И последнее, но не менее важное: мы должны скопировать содержимое созданной сборки в корзину S3.

Для этого воспользуемся пакетом S3 Sync action, созданным Джейком Джарвисом. Вы можете найти его документацию здесь.

Код последнего шага будет:

    # Deploy to the S3 server
    - name: Deploy to S3
      uses: jakejarvis/s3-sync-action@master
      with:
        args: --acl public-read --delete
      env:
        AWS_S3_BUCKET: ${{ secrets.AWS_PRODUCTION_BUCKET_NAME }}
        AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
        AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
        AWS_REGION: ${{ secrets.AWS_REGION }}
        SOURCE_DIR: "build"

Сначала мы проверяем, доступен ли S3 для общего чтения, удаляем его предыдущее содержимое и вставляем недавно созданное приложение.

В env мы указываем несколько параметров:

• AWS_S3_BUCKET: название вашей корзины
• AWS_ACCESS_KEY_ID и AWS_SECRET_ACCESS_KEY: ключ доступа к AWS вашей учетной записи, который позволяет вам писать в корзине. Я объясню сразу, как их получить.
• AWS_REGION: регион, в котором вы создали сегмент.
• SOURCE_DIR: расположение созданного приложения. Если ваше приложение React не находится в корневой папке вашего репозитория GitHub:

SOURCE_DIR: "react-application-folder/build"

Щелкните Start commit и Commit changes, чтобы сохранить изменения в этом файле.

Теперь вы видите, что мы используем секреты GitHub для всех этих параметров. Это зашифрованные переменные среды. Это важно сделать, чтобы скрыть свои учетные данные и каждую деталь корзины для людей, имеющих доступ к вашему репозиторию (что важно, если ваш репозиторий GitHub является общедоступным).

Чтобы определить эти секреты, перейдите к Settings, а затем к Secrets:

Создайте эти четыре секрета:

• AWS_PRODUCTION_BUCKET_NAME : название вашей корзины, в моем случае oagencia.com
• AWS_REGION: Регион, в котором создается ваша корзина - список можно найти здесь

Чтобы получить ключи доступа, перейдите в консоль AWS, щелкните свою учетную запись, а затем щелкните «Мои учетные данные для безопасности».

Откройте раздел «Ключи доступа (идентификатор ключа доступа и секретный ключ доступа)», а затем нажмите «Создать новый ключ доступа».

Должно открыться подобное всплывающее окно. Скопируйте предоставленный идентификатор ключа доступа и введите его в AWS_ACCESS_KEY_ID секрет GitHub. Сделайте то же самое с секретным ключом доступа для AWS_SECRET_ACCESS_KEY секрета GitHub.

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

Теперь все настроено для рабочего процесса развертывания созданного приложения в корзине AWS S3.

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

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

Теперь, если вы вернетесь к своему AWS S3 Bucket, вы увидите, что файлы были обновлены до него:

И, если вы наконец попытаетесь подключиться к своей конечной точке S3, вы сможете получить доступ к своему веб-сайту:

Заключение

Поздравляю! Теперь вы знаете, как разместить свой веб-сайт React в корзине AWS S3 с помощью рабочего процесса GitHub.

В следующей статье я объясню, как настроить DNS с Route 53, чтобы связать сегмент S3 с вашим доменным именем.