Logo

菜单

发布于 2026-01-05 2 阅读
0

使用 GitHub Actions 和 Docker 将 React 应用部署到 DigitalOcean

使用 GitHub Actions 和 Docker 将 React 应用部署到 DigitalOcean

在Pindo，我们最近通过为代码仓库搭建持续交付流水线，实现了所有部署流程的自动化。这种架构帮助我们减少了因持续交付 (CD) 重复步骤而导致的错误。在本教程中，您将学习如何使用Docker和GitHub Actions
等工具设置 React 应用的持续交付。我们将使用DigitalOcean上的 Ubuntu (18.04 LTS) 服务器来托管我们的应用。

先决条件

以下是本教程所需的先决条件。

  • GitHub帐户
  • DigitalOcean 上的Docker Droplet（Ubuntu 18.04 LTS）。使用我的推荐链接注册，即可获得 100 美元信用额度，有效期超过 60 天。

创建您的应用

使用官方支持的create-react-app.dev创建单页 React 应用。它提供了一种无需任何配置的现代化构建方式。

  • 安装 create-react-app
npm install -g create-react-app
Enter fullscreen mode Exit fullscreen mode
  • 快速入门
npx create-react-app my-app && cd my-app
npm start
Enter fullscreen mode Exit fullscreen mode

将您的应用程序容器化。

在项目根目录添加 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"]
Enter fullscreen mode Exit fullscreen mode

yarn cache clean运行此命令将清除全局缓存。
yarn --update-checksums如果缓存文件与其软件包的校验和不匹配，则锁定锁定文件。

让我们构建并标记我们的 Docker 镜像。

docker build -t my-app:dev .
Enter fullscreen mode Exit fullscreen mode

构建完成后运行容器

docker run -it -p 3000:3000 my-app:dev
Enter fullscreen mode Exit fullscreen mode

砰！我们的应用正在http://localhost:3000上运行。

让我们在项目根目录下创建另一个 Dockerfile-prod 文件。您将在生产环境中使用此文件。

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;"]
Enter fullscreen mode Exit fullscreen mode

在这个Dockerfile-prod中，我们为我们的应用程序创建一个生产版本，然后将构建文件复制到 Nginx HTML 目录。

接下来，我们来构建并运行生产镜像。

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

我们的应用程序现在运行在 80 端口上。在下一部分中，我们将把镜像发布到 Github Packages。

将您的镜像发布到Github Packages。

GitHub Packages允许您在公司内部或全球范围内发布和使用软件包。为此，我们将创建一个 GitHub Action，将我们的软件包发布到 GitHub Packages 注册表。在将生产镜像部署到注册表之前，我们需要确保代码已准备好用于生产环境。

deploy.yml

让我们在项目中创建第一个部署操作。

mkdir .github && cd .github && mkdir workflows && cd workflows && touch deploy.yml
Enter fullscreen mode Exit fullscreen mode

上述命令会创建一个工作流文件夹和一个deploy.yml文件。您可以在下面的代码中将其替换yarn为相应内容。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
Enter fullscreen mode Exit fullscreen mode

请注意，Github Actions 会自动为您提供 GITHUB_TOKEN 密钥。

存储库

添加存储库密钥

什么是Secrets？它们是您在代码仓库中创建的加密环境变量，用于 GitHub Actions。

接下来，让我们把我们的GITHUB_USERNAME秘密也加入进来。

请记住，GitHubGITHUB_TOKEN默认会为您提供此功能。

另类秘密

努力掌握

让我们回顾一下。我们已经完成了密钥设置，创建了远程仓库，并将远程源设置为本地仓库。现在，我们可以将更改推送到远程仓库了。

git add -A
git commit -m "Initial commit"
git push origin master
Enter fullscreen mode Exit fullscreen mode

点击“操作”按钮，您将看到部署工作流程的开始。请耐心等待，您的镜像将被发布到 GitHub Packages Registry 上。

替代操作

您可以在仓库的软件包选项卡中找到已发布的 Docker 镜像。

Alt pack-det

我们已成功将 Docker 应用镜像发布到 GitHub 软件包注册表。接下来，我们将从 DigitalOcean 订购一个 Docker Droplet，并设置部署流程，将我们的应用镜像部署到 DigitalOcean 上。

部署。

部署方面，我们将在 DigitalOcean 上创建一个Docker Droplet。请不要忘记使用我的推荐链接注册，即可获得 100 美元信用额度，有效期超过 60 天。

备用 docker-droplet

在这个例子中，我们使用用户名和密码访问我们的服务器，请选择一次性密码而不是 SSH 密钥。

Alt one-tp

配置并重置服务器密码后，现在让我们将服务器密钥添加到存储库中。

  • 主机：Droplet IP 地址
  • 密码：Droplet 密码
  • 端口：Droplet SSH 端口（22）
  • 用户名：Droplet 用户名

更新 deploy.yml 文件。

您已成功将 droplet 密钥配置到您的代码仓库。现在，您需要添加另一个代码块，使用ssh-action部署您的软件包并在您的 droplet 中运行它。ssh-action 是 GitHub Actions 的一部分，用于执行远程 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
Enter fullscreen mode Exit fullscreen mode

我们之前已使用 GitHub 凭据（GITHUB_USERNAME 和 GITHUB_TOKEN）登录，将应用程序镜像发布到 GitHub 软件包注册表。要从注册表中拉取镜像，我们必须登录归档。

让我们提交更改并将其推送到主分支。

git add -A
git commit -m "deploy to digitalocean"
git push origin master
Enter fullscreen mode Exit fullscreen mode

我们使用 ssh-action 从我们的存储库远程访问我们的 droplet。

  • docker stop $(docker ps -a -q)停止所有先前正在运行的容器。
  • docker run -dit -p 80:80 my_github_username/my_repository_name/my_image_name:tag拉取最新镜像并在 80 端口上运行。

如您所见，工作流程正在通过。

替代工作流程

恭喜🎉！您现在可以通过您的 droplet IP_ADDRESS 或 DOMAIN_NAME 访问您的 react-app。

我的服务器运行在http://167.172.51.225/

你可以在react-with-actions代码库中找到代码。另外，请记住，直接推送到 master 分支是一个不好的做法。我为了本教程才这么做的。你应该创建一个分支并提交一个 pull request。你可以参考这里了解一些 Git 最佳实践。

如有任何疑问，请随时通过推特账号kenessajr联系我。如果您有其他反馈意见，请在下方留言。

文章来源：https://dev.to/kenessajr/deploy-a-react-app-to-digitalocean-using-github-actions-and-docker-4pln
内向者如何充分利用聚会指南
CI/CD 流水线全面介绍