Рубрики
Uncategorized

Разверните приложение React в Digitalocean, используя действия GitHub и Docker

В Pindo мы недавно мы автоматизировали все наши процессы развертывания, создав постоянный конвейер для доставки … Помечено с докером, DevOps, React, Github.

На Пиндо Недавно мы недавно автоматизировали все наши процессы развертывания, настроив постоянные трубопроводы доставки для наших репозиторий. Эта настройка помогла нам уменьшить количество ошибок, которые в противном случае произошли из-за повторяющихся шагов непрерывной доставки (CD). В этом руководстве вы узнаете, как настроить непрерывную доставку App App, используя такие инструменты, как Докер и Действия GitHub Отказ Мы будем использовать капельку Ubuntu (18.04 LTS) на Digitalocean Чтобы разместить наше приложение.

Предварительные условия

Вот предпосылки, необходимые для этого учебника.

Создайте свое приложение

Используйте официально поддерживаемые create-react-app.dev создать одностраничное приложение RACT. Он предлагает современную настройку сборки без конфигурации.

  • Установите Create-React-App
npm install -g create-react-app
  • Быстрый старт
npx create-react-app my-app && cd my-app
npm start

Докурировать свое приложение.

Добавьте DockerFile в корню проекта:

FROM node:13.1-alpine

WORKDIR /usr/src/app
COPY package*.json ./
RUN yarn cache clean && yarn --update-checksums
COPY . ./
EXPOSE 3000
CMD ["yarn", "start"]

кэш пряжи чистый Запуск этой команды очистит глобальный кеш. пряжа --update-checksums Блокировка LockFile, если между ними есть несоответствие и контрольная сумма их пакета.

Давайте построить и пометить наше изображение докера

docker build -t my-app:dev .

Запустите контейнер один раз сборка сделана

docker run -it -p 3000:3000 my-app:dev 

Бум 💥! Наше приложение работает на http://localhost: 3000

Давайте создадим еще один докерфиль-подвод к корню проекта. Вы будете использовать этот файл в производстве.

Dockerfile-Prod:

FROM node:13.1-alpine as build

WORKDIR /usr/src/app
COPY package*.json ./
RUN yarn cache clean && yarn --update-checksums
COPY . ./
RUN yarn && yarn build

# Stage - Production
FROM nginx:1.17-alpine
COPY --from=build /usr/src/app/build /usr/share/nginx/html
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

В этом Dockerfile-Prod Мы создаем производственную сборку для нашего приложения, а затем скопируйте файл сборки в каталог NGINX HTML.

Далее давайте построим и запустим наш производственный образ.

docker build -f Dockerfile-prod -t my-app:prod .
docker run -itd -p 80:80 --rm my-app:prod

Наше приложение сейчас работает на порту 80. В следующем сегменте мы опубликуем изображение на пакеты GitHub.

Опубликуйте свое изображение на пакеты GitHub.

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

развертывать

Давайте создадим наше первое действие развертывания в нашем проекте.

mkdir .github && cd .github && mkdir workflows && cd workflows && touch deploy.yml

Команда выше создает папку рабочего процесса и Deploy.yml файл. Вы можете заменить пряжа с NPM в коде ниже.

name: build

on:
  push:
    branches: 
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js 13.10
      uses: actions/setup-node@v1
      with:
        node-version: '13.10'
    - name: Install yarn and run unittest
      run: |
        yarn
        yarn test
      env:
        CI: true
    - name: Publish to Github Packages Registry
      uses: elgohr/Publish-Docker-Github-Action@master
      with:
        name: my_github_username/my_repository_name/my_image_name
        registry: docker.pkg.github.com
        username: ${{ secrets.GITHUB_USERNAME }}
        password: ${{ secrets.GITHUB_TOKEN }}
        dockerfile: Dockerfile-prod
        tags: latest

Обратите внимание, что действия GitHub автоматически предоставляют вам секреты Github_Token.

Репозиторий

Добавить секреты репозитория

Что такое Секреты ? Они зашифрованы переменные среды, которые вы создаете в репозитории для использования с действиями GitHub.

Далее давайте добавим наше Github_username на секреты.

Помните, что Github предоставляет вам Github_token по умолчанию.

Подтолкнуть к мастеру

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

git add -A
git commit -m "Initial commit"
git push origin master

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

Вы можете найти свой опубликованный образ докера в вашем хранилище на вкладке «Пакет».

Мы успешно опубликовали наше изображение приложения Docker на реестре пакета GitHub. Мы собираемся заказать Docker Daperlet на Diumpanyocean и настроить поток для развертывания и нашего изображения приложения на Digitalocean.

Развертывать.

Для развертывания мы собираемся создать Docker Dainlet на наливании. Пожалуйста, не забудьте зарегистрироваться с моим Реферальная ссылка и получить 100 долларов в кредит более 60 дней.

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

После настройки и сброса пароля капельки Давайте теперь добавим свои секреты капельок в свой репозиторий.

  • ХОЗЯИН: Капля IP_address
  • Пароль: пароль капли
  • Порт: Капли SSH Port (22)
  • Имя пользователя: Капли имена пользователя

Обновите файл deploy.yml.

Вы преуспели на создании секретов капельки в ваш хранилище. Теперь вы добавите еще один код код, чтобы развернуть пакет и запустить его в нашей капле, используя SSH-Action. . Это действия GitHub для выполнения удаленных команд SSH.

name: build

on:
  push:
    branches: 
      - master

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v1
    - name: Use Node.js 13.10
      uses: actions/setup-node@v1
      with:
        node-version: '13.10'
    - name: Install yarn and run unittest
      run: |
        yarn
        yarn test
      env:
        CI: true
    - name: Publish to Github Packages Registry
      uses: elgohr/Publish-Docker-Github-Action@master
      with:
        name: my_github_username/my_repository_name/my_image_name
        registry: docker.pkg.github.com
        username: ${{ secrets.GITHUB_USERNAME }}
        password: ${{ secrets.GITHUB_TOKEN }}
        dockerfile: Dockerfile-prod
        tags: latest
    - name: Deploy package to digitalocean
      uses: appleboy/ssh-action@master
      env:
          GITHUB_USERNAME: ${{ secrets.GITHUB_USERNAME }}
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      with:
        host: ${{ secrets.HOST }}
        username: ${{ secrets.USERNAME }}
        password: ${{ secrets.PASSWORD }}
        port: ${{ secrets.PORT }}
        envs: GITHUB_USERNAME, GITHUB_TOKEN
        script: |
          docker stop $(docker ps -a -q)
          docker login docker.pkg.github.com -u $GITHUB_USERNAME -p $GITHUB_TOKEN
          docker pull docker.pkg.github.com/my_github_username/my_repository_name/my_image_name:latest
          docker run -dit -p 80:80 docker.pkg.github.com/my_github_username/my_repository_name/my_image_name:latest

Ранее мы опубликовали изображение приложения в реестр пакета GitHub, зарегистрировавшись с учетными данными GitHub (github_username и github_token). Чтобы вытащить изображение из реестра, мы должны войти в систему, чтобы архивировать так.

Давайте совершим и подталкиваем наши изменения в Master.

git add -A
git commit -m "deploy to digitalocean"
git push origin master

Мы используем SSH-действия для удаленного доступа к нашей капельфу из нашего хранилища.

  • Docker Stop $ (Docker PS -a -q) останавливает все предыдущие беговые контейнеры.
  • Docker Run -Dit -p 80:80 my_github_username/my_repository_name/my_image_name: tag Потяните последнее изображение и запустите его на порту 80.

Как вы можете видеть ниже рабочий процесс проходит.

Поздравляем 🎉! Теперь вы можете получить доступ к вашему реактивному приложению на вашей капле IP_Address или Domain_name.

Мой работает на http://167.172.51.225/

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

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

Оригинал: «https://dev.to/kenessajr/deploy-a-react-app-to-digitalocean-using-github-actions-and-docker-4pln»