乐趣区

关于后端:04使用-github-actionsdocker-自动部署前后端分离项目-zhontai-net-corevue

jiezi

前言

Github Actions 是什么？是 GitHub 提供的一种继续集成 / 继续部署（CI/CD）工作流程自动化服务, 助力我的项目的自动化构建、测试和部署。
依靠于平台，本文将分享应用 GitHub Actions 实现对一个.Net Core+Vue 的前后端拆散我的项目 zhontai 的构建，并应用 docker 部署到云服务器 (阿里云)

应用阐明

通过一番尝试学习，集体感触是其功能齐全, 文档欠缺，应用 GitHub 托管仓库实现本人的 CI/CD，不再须要本人搞构建服务了。
对于应用费用问题：每个用户 / 组织都有收费的应用额度：2000 分钟 / 月, 不同的我的项目归类到不同的组织，齐全足够应用了。

本文环境

  • GitHub 我的项目

    • .Net Core 我的项目：https://github.com/yimogit/Admin.Core fork 自 zhontai/Admin.Core
    • Vue 我的项目：https://github.com/yimogit/admin.ui.plus fork 自 zhontai/admin.ui.plus
  • 装置了 docker 的 Linux 服务器

后端 asp.net core7.0 我的项目的部署

执行步骤及重点

  • 仓库地址：https://github.com/yimogit/Admin.Core
  • 部署文件：.github\workflows\test-deploy.yml

  • 目录构造 

    ├─.github
│  └─workflows
│    └─test-deploy.yml
├─docker
│    ├─Dockerfile
│    - publish_output publish 生成的文件会复制到此，rsync 上传到 linux 服务器
├─src
│    ├─hosts
├─...

  1. 新建 github actions 配置文件: .github\workflows\test-deploy.yml

    • 仓库的 .github/workflows 目录中定义将会被 github actions 辨认
    • 测试能够用，生产则能够用 on: workflow_dispatch 指定手动构建

  2. 拉取分支

    • actions 库：actions/checkout@v3

  3. 装置 Dotnet7

    • actions 库：actions/setup-dotnet@v3

  4. 执行打包生成 publish_output 目录

    • dotnet publish ./src/hosts/ZhonTai.Host -c Release -o ./publish_output --self-contained true --runtime linux-x64 --framework net7.0

  5. 应用 ssh 部署到服务器

    • actions 库：easingthemes/ssh-deploy@v4.1.8
    • 将 publish_output 复制到 docker 目录，在将 docker 目录，将其上传到服务器后执行脚本
    • ssh 连贯后须要创立挂载目录，一个数据库的目录，一个上传目录
    • 默认 ZhonTai.Host 的端口是 8000
    • 创立挂载目录：mkdir /root/zhontai/volumns/upload -p
    • docker 运行:docker run --name my-zhontai-apihost -d -p 9902:8000 -e -v /root/zhontai/volumns/admindb.db:/app/admindb.db -v /root/zhontai/volumns/upload:/app/wwwroot/upload zhontai/apihost:latest

  6. ssh 应用须要配置的环境变量

    • ${{secrets.SSH_PRIVATE_KEY}}：服务器的 ssh 密钥:~/.ssh/id_rsa 内容
    • ${{secrets.REMOTE_HOST}}：服务器 IP: xxx.xxx.xxx.xxx
    • ${{secrets.REMOTE_USER}}：用户名 root
    • ${{secrets.REMOTE_TARGET}}：近程目录 /root/zhontai/api

  7. 配置须要的环境变量

    • 配置门路：我的项目 ->Settings->Security->Secrets and variables->Actions->New repository secret
    • ssh 的生成参考 ssh-deploy 配置局部
    • ssh-keygen -m PEM -t rsa -b 4096 生成 ssh，而后复制公钥到 authorized_keys
    • 设置完最好是重启下

  8. 构建实现

    • 记得开启云服务器的防火墙端口：9902，即可在浏览器中拜访到前台页面

.github/workflows/test-deploy.yml

# test-deploy.yml
name: 后端测试环境间接部署
# 手动构建
#on: workflow_dispatch
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # 拉取仓库文件
      - name: 拉取 master 分支代码
        uses: actions/checkout@v3
        with:
          # 默认以后分支
          ref: 'master'
      # action 命令，装置 Dotnet7
      - name: 装置 Dotnet7
        uses: actions/setup-dotnet@v3
        with:
          dotnet-version: 7.0.400
      # 执行打包命令
      - run: dotnet --version && dotnet publish ./src/hosts/ZhonTai.Host -c Release -o ./publish_output --self-contained true --runtime linux-x64 --framework net7.0
      # 将 dist 复制到 docker 目录中
      - run: cp ./publish_output ./docker -rf
      # 应用 ssh 将 api-dist 文件拷贝到 linux
      - name: 应用 ssh 部署
        uses: easingthemes/ssh-deploy@v4.1.8
        with:
          SSH_PRIVATE_KEY: ${{secrets.SSH_PRIVATE_KEY}}
          ARGS: '-rlgoDzvc -i --delete'
          SOURCE: 'docker'
          REMOTE_HOST: ${{secrets.REMOTE_HOST}}
          REMOTE_USER: ${{secrets.REMOTE_USER}}
          TARGET: ${{secrets.REMOTE_TARGET}}
          EXCLUDE: '/node_modules/'
          SCRIPT_BEFORE: |
            mkdir ${{secrets.REMOTE_TARGET}} -p
          SCRIPT_AFTER: |
            cd ${{secrets.REMOTE_TARGET}}
            cd docker
            docker build --rm -f ./Dockerfile -t zhontai/apihost:latest .
            # 查看容器是否存在
            if docker container ls -a | grep -q "my-zhontai-apihost"; then
                echo "容器已存在"
                # 进行并移除容器
                docker stop my-zhontai-apihost
                docker rm my-zhontai-apihost
            fi
            # 容器挂载的门路
            mkdir /root/zhontai/volumns/upload -p
            docker run --name my-zhontai-apihost -d -p 9902:8000  -e ASPNETCORE_ENVIRONMENT=Testing  -v /root/zhontai/volumns/admindb.db:/app/admindb.db -v /root/zhontai/volumns/upload:/app/wwwroot/upload zhontai/apihost:latest

docker/Dockerfile

  • 打包在 GitHub Actions 实现，生成了 publish_output, 所以只须要运行时镜像部署即可
  • 指定工作目录为 /app
  • 指定监听利用端口，Admin.Core 默认端口为 8000, 启动库为 ZhonTai.Host
# 应用 ASP.NET Core 运行时镜像作为最终镜像
FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS runtime

WORKDIR /app

# 复制构建好的应用程序文件
COPY ./publish_output /app

# 设置运行时环境变量
ENV ASPNETCORE_URLS=http://+:8000

# 指定容器启动时要执行的命令
ENTRYPOINT ["dotnet", "ZhonTai.Host.dll"]

前台 vue 我的项目的部署

整个过程相似镜像构建一样，一步步设置本人须要的环境，而后执行命令或者设置对应的操作，能够在应用前过一遍中文文档有个大略的理解，本文就跳过根底介绍间接说实现形式及重点

执行的步骤及重点

  • 仓库地址：https://github.com/yimogit/admin.ui.plus
  • 部署文件：.github\workflows\test-deploy.yml

  • 目录构造 

    ├─.github
│  └─workflows
│    └─test-deploy.yml
├─docker
│    ├─Dockerfile
│    └─nginx.conf
│    - dist build 生成的 dist 会复制到此，rsync 上传到 linux 服务器
├─public
├─src
├─...

  1. 新建 github actions 配置文件: .github\workflows\test-deploy.yml

    • 仓库的 .github/workflows 目录中定义将会被 github actions 辨认
    • 测试能够用，生产则能够用 on: workflow_dispatch 指定手动构建

  2. 拉取分支

    • actions 库：actions/checkout@v3

  3. 装置 node v18.17.1

    • actions 库：actions/setup-node@v3

  4. 执行打包生成 dist 目录

    • npm install && npm run build
    • 默认打包应用的 production 环境的配置，如需打包其余环境则能够应用 npm run build --mode testing 指定环境 testing，并应用 .env.testing 环境变量文件
    • 应用 echo -e "\nVITE_API_URL=${{secrets.API_HOST}}" >> .env.production 将配置中的 API_HOST 写入环境变量中

  5. 应用 ssh 部署到服务器

    • actions 库：easingthemes/ssh-deploy@v4.1.8
    • 将 dist 复制到 docker 目录，在将 docker 目录，将其上传到服务器后执行脚本

  6. ssh 应用须要配置的环境变量

    • ${{secrets.SSH_PRIVATE_KEY}}：服务器的 ssh 密钥
    • ${{secrets.REMOTE_HOST}}：服务器 IP
    • ${{secrets.REMOTE_USER}}：用户名
    • ${{secrets.REMOTE_TARGET}}：近程目录
    • ${{secrets.API_HOST}}: 接口地址，配置后写入 VITE_API_URL=xxx.com

  7. 配置须要的环境变量

    • 配置门路：我的项目 ->Settings->Security->Secrets and variables->Actions->New repository secret
    • ssh 的生成参考 ssh-deploy 配置局部
    • ssh-keygen -m PEM -t rsa -b 4096 生成 ssh，而后复制公钥到 authorized_keys

  8. 构建实现

    • 记得开启云服务器的防火墙端口：9901，即可在浏览器中拜访到前台页面

.github/workflows/test-deploy.yml

  • 残缺的部署配置 
# test-deploy.yml
name: 前端间接部署
# 手动构建
# on: workflow_dispatch
# 主动构建
on:
  push:
    branches:
      - master
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # 拉取仓库文件
      - name: 拉取 master 分支代码
        uses: actions/checkout@v3
        with:
          # 默认以后分支
          ref: 'master'
      # action 命令，装置 Node v18.17.1
      - name: 装置 node
        uses: actions/setup-node@v3
        with:
          node-version: 18.17.1
          cache: 'npm'
      # 执行打包命令
      - run: |
          if [-n "${{ secrets.API_HOST}}" ]; then
            # 应用设置中的接口地址
            echo -e "\nVITE_API_URL=${{secrets.API_HOST}}" >> .env.production
          fi
      - run: node -v && npm -v && npm install && npm run build
      # 将 dist 复制到 docker 目录中
      - run: cp ./dist ./docker -rf
      # 应用 ssh 将 dist 文件拷贝到 linux
      - name: 应用 ssh 部署到服务器
        uses: easingthemes/ssh-deploy@v4.1.8
        with:
          SSH_PRIVATE_KEY: ${{secrets.SSH_PRIVATE_KEY}}
          ARGS: '-rlgoDzvc -i --delete'
          SOURCE: 'docker'
          REMOTE_HOST: ${{secrets.REMOTE_HOST}}
          REMOTE_USER: ${{secrets.REMOTE_USER}}
          TARGET: ${{secrets.REMOTE_TARGET}}
          EXCLUDE: '/node_modules/'
          SCRIPT_BEFORE: |
            mkdir ${{secrets.REMOTE_TARGET}} -p
          SCRIPT_AFTER: |
            cd ${{secrets.REMOTE_TARGET}}
            cd docker
            docker build --rm -f ./Dockerfile -t zhontai/adminui:latest .
            # 查看容器是否存在
            if docker container ls -a | grep -q "my-zhontai-adminui"; then
                echo "容器已存在, 进行并移除容器"
                docker stop my-zhontai-adminui
                docker rm my-zhontai-adminui
            fi
            docker run --name my-zhontai-adminui -d -p 9901:80 zhontai/adminui:latest

docker/Dockerfile

  • 应用 nginx 1.18 镜像，增加前端页面及 nginx 配置
  • 对应应用脚本：docker build --rm -f ./Dockerfile -t zhontai/adminui:latest .
FROM nginx:1.18
EXPOSE 80
COPY ./dist /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/default.conf

docker/nginx.conf

  • nginx v1.18 的配置, 外层没有 http 节点了
  • 并且会笼罩默认的 default.conf 才行 
server {
    listen       80;
    server_name  localhost;
    charset utf-8;
    location / {
        root   /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {root   html;}
}

一些碎碎念

  1. 本文的做法实用于测试，如果要构建生产，还须要更加谨严，比方须要手动执行，而不是主动构建，以及能够将打包和部署离开，生成构建物体，疾速回滚部署
  2. 本文为了演示近程 docker，所以每次都是构建了 docker，其实也能够间接上传到服务器目录，不须要重启 docker
  3. 文章大部分都是用命令实现，不便迁徙到其余构建工具，后续也能够间接在 Github 应用。

不齐全踩坑记录

  • ssh 部署：看了良久才看明确，一开始生成了没有复制到 authorized_keys，而后生成了密钥没重启就是连贯不上
  • docker nginx：nginx.conf 挂载的地址不对，之前的旧版本是在 /etc/nginx/nginx.conf, 新的在 /etc/nginx/conf.d/default.conf
  • nginx.conf 的格局新版去掉了 http 节点，间接配置 server 节点就行，配置文件没对，导致误以为是我 history 模式 nginx 写法不对
  • 笼罩.env.production 中接口地址的配置，想要换行加一句，试了好屡次才行：echo -e "\nVITE_API_URL=xxx" >> .env.production
  • api 我的项目挂载的地位搞错了几次：数据库和文件上传的地址别离是：/app/admindb.db,/app/wwwroot/upload
  • api 我的项目挂载文件须要后行创立目录，启动后将会生成数据库
  • api 我的项目的端口默认 8000

工夫过得太快了，周末两天第一次沉下心钻研了一天 Github Actions, 各种尝试踩坑，第二天将过程整顿分享进去，写完这句，发现眨眼间就周一了。
仿佛学习，能让我在迷茫中找到些许方向吧。

By 易墨 转载请注明出处

相干材料

我的项目阐明

如果对部署的我的项目感兴趣能够参考前两篇文章

  • zhontai Admin.Core: 01. 前后端拆散中台框架后端 Admin.Core 学习 - 介绍与配置阐明
  • zhontai admin.ui.plus：02. 前后端拆散中台框架前端 admin.ui.plus 学习 - 介绍与简略应用
  • zhontai 代码生成：03. 前后端拆散中台框架 zhontai 我的项目代码生成器的应用

Github Actions 相干地址

  • GitHub Actions 中文文档
  • GitHub Actions 计费
  • GitHub Actions 集体应用状况

本文应用到的 action 库

  • actions/checkout@v3 拉取仓库代码:v3.6.0 文档
  • actions/setup-node@v3 装置 node v3.8.1 文档
  • actions/setup-dotnet@v3 装置 dotnet v3.2.0 文档
  • easingthemes/ssh-deploy@v4.1.8 ssh 连贯服务器 v4.1.8 文档

  • 其余

    • actions/upload-artifact@v3 上传文件 v3.1.2 文档
    • actions/download-artifact@v3 下载文件 v3.0.2 文档
退出移动版