共计 7628 个字符,预计需要花费 20 分钟才能阅读完成。
前言
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 ├─...
-
新建 github actions 配置文件:
.github\workflows\test-deploy.yml
- 仓库的 .github/workflows 目录中定义将会被 github actions 辨认
- 测试能够用,生产则能够用
on: workflow_dispatch
指定手动构建
-
拉取分支
- actions 库:
actions/checkout@v3
- actions 库:
-
装置 Dotnet7
- actions 库:
actions/setup-dotnet@v3
- actions 库:
-
执行打包生成 publish_output 目录
dotnet publish ./src/hosts/ZhonTai.Host -c Release -o ./publish_output --self-contained true --runtime linux-x64 --framework net7.0
-
应用 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
- actions 库:
-
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
-
配置须要的环境变量
- 配置门路:我的项目 ->Settings->Security->Secrets and variables->Actions->New repository secret
- ssh 的生成参考 ssh-deploy 配置局部
ssh-keygen -m PEM -t rsa -b 4096
生成 ssh,而后复制公钥到 authorized_keys- 设置完最好是重启下
-
构建实现
- 记得开启云服务器的防火墙端口: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 ├─...
-
新建 github actions 配置文件:
.github\workflows\test-deploy.yml
- 仓库的 .github/workflows 目录中定义将会被 github actions 辨认
- 测试能够用,生产则能够用
on: workflow_dispatch
指定手动构建
-
拉取分支
- actions 库:
actions/checkout@v3
- actions 库:
-
装置 node v18.17.1
- actions 库:
actions/setup-node@v3
- actions 库:
-
执行打包生成 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 写入环境变量中
-
应用 ssh 部署到服务器
- actions 库:
easingthemes/ssh-deploy@v4.1.8
- 将 dist 复制到 docker 目录,在将 docker 目录,将其上传到服务器后执行脚本
- actions 库:
-
ssh 应用须要配置的环境变量
${{secrets.SSH_PRIVATE_KEY}}
:服务器的 ssh 密钥${{secrets.REMOTE_HOST}}
:服务器 IP${{secrets.REMOTE_USER}}
:用户名${{secrets.REMOTE_TARGET}}
:近程目录${{secrets.API_HOST}}
: 接口地址,配置后写入VITE_API_URL=xxx.com
-
配置须要的环境变量
- 配置门路:我的项目 ->Settings->Security->Secrets and variables->Actions->New repository secret
- ssh 的生成参考 ssh-deploy 配置局部
ssh-keygen -m PEM -t rsa -b 4096
生成 ssh,而后复制公钥到 authorized_keys
-
构建实现
- 记得开启云服务器的防火墙端口: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;}
}
一些碎碎念
- 本文的做法实用于测试,如果要构建生产,还须要更加谨严,比方须要手动执行,而不是主动构建,以及能够将打包和部署离开,生成构建物体,疾速回滚部署
- 本文为了演示近程 docker,所以每次都是构建了 docker,其实也能够间接上传到服务器目录,不须要重启 docker
- 文章大部分都是用命令实现,不便迁徙到其余构建工具,后续也能够间接在 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 文档