На Пиндо Недавно мы недавно автоматизировали все наши процессы развертывания, настроив постоянные трубопроводы доставки для наших репозиторий. Эта настройка помогла нам уменьшить количество ошибок, которые в противном случае произошли из-за повторяющихся шагов непрерывной доставки (CD). В этом руководстве вы узнаете, как настроить непрерывную доставку App App, используя такие инструменты, как Докер и Действия GitHub Отказ Мы будем использовать капельку Ubuntu (18.04 LTS) на Digitalocean Чтобы разместить наше приложение.
Предварительные условия
Вот предпосылки, необходимые для этого учебника.
- Аккаунт GitHub Гадость
- А Docker Dainlet (Ubuntu 18.04 LTS) на Digitalocean. Зарегистрируйтесь с моим Реферальная ссылка и получить 100 долларов в кредит более 60 дней.
Создайте свое приложение
Используйте официально поддерживаемые 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»