前言
Github Actions是什么？是 GitHub 提供的一種持續(xù)集成/持續(xù)部署（CI/CD）工作流程自動(dòng)化服務(wù),助力項(xiàng)目的自動(dòng)化構(gòu)建、測(cè)試和部署。
依托于平臺(tái)，本文將分享使用 GitHub Actions 完成對(duì)一個(gè).Net Core+Vue 的前后端分離項(xiàng)目 zhontai 的構(gòu)建，并使用 docker 部署到云服務(wù)器(阿里云)
使用說明
經(jīng)過一番嘗試學(xué)習(xí)，個(gè)人感受是其功能齊全,文檔完善，使用 GitHub 托管倉庫完成自己的 CI/CD，不再需要自己搞構(gòu)建服務(wù)了。
關(guān)于使用費(fèi)用問題：每個(gè)用戶/組織都有免費(fèi)的使用額度：2000 分鐘/月, 不同的項(xiàng)目歸類到不同的組織，完全足夠使用了。
本文環(huán)境
- GitHub 項(xiàng)目
- .Net Core 項(xiàng)目：https://github.com/yimogit/Admin.Core fork 自 zhontai/Admin.Core
- Vue 項(xiàng)目：https://github.com/yimogit/admin.ui.plus fork 自 zhontai/admin.ui.plus
- 安裝了 docker 的 Linux 服務(wù)器
后端 asp.net core7.0 項(xiàng)目的部署
執(zhí)行步驟及重點(diǎn)
- 倉庫地址：https://github.com/yimogit/Admin.Core
- 部署文件：
.github\workflows\test-deploy.yml - 目錄結(jié)構(gòu)
├─.github │ └─workflows │ └─test-deploy.yml ├─docker │ ├─Dockerfile │ - publish_output publish生成的文件會(huì)復(fù)制到此，rsync上傳到linux服務(wù)器 ├─src │ ├─hosts ├─...
-
新建 github actions 配置文件:
.github\workflows\test-deploy.yml- 倉庫的 .github/workflows 目錄中定義將會(huì)被 github actions 識(shí)別
- 測(cè)試可以用，生產(chǎn)則可以用
on: workflow_dispatch指定手動(dòng)構(gòu)建
-
拉取分支
- actions 庫：
actions/checkout@v3
- actions 庫：
-
安裝 Dotnet7
- actions 庫：
actions/setup-dotnet@v3
- actions 庫：
-
執(zhí)行打包生成 publish_output 目錄
dotnet publish ./src/hosts/ZhonTai.Host -c Release -o ./publish_output --self-contained true --runtime linux-x64 --framework net7.0
-
使用 ssh 部署到服務(wù)器
- actions 庫：
easingthemes/ssh-deploy@v4.1.8 - 將 publish_output 復(fù)制到 docker 目錄，在將 docker 目錄，將其上傳到服務(wù)器后執(zhí)行腳本
- ssh 連接后需要?jiǎng)?chuàng)建掛載目錄，一個(gè)數(shù)據(jù)庫的目錄，一個(gè)上傳目錄
- 默認(rèn) ZhonTai.Host 的端口是 8000
- 創(chuàng)建掛載目錄：
mkdir /root/zhontai/volumns/upload -p - docker 運(yùn)行:
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 使用需要配置的環(huán)境變量
-
${{ secrets.SSH_PRIVATE_KEY }}：服務(wù)器的 ssh 密鑰:~/.ssh/id_rsa 內(nèi)容 -
${{ secrets.REMOTE_HOST }}：服務(wù)器 IP: xxx.xxx.xxx.xxx -
${{ secrets.REMOTE_USER }}：用戶名 root -
${{ secrets.REMOTE_TARGET }}：遠(yuǎn)程目錄 /root/zhontai/api
-
-
配置需要的環(huán)境變量
- 配置路徑：項(xiàng)目->Settings->Security->Secrets and variables->Actions->New repository secret
- ssh 的生成參考ssh-deploy 配置部分
-
ssh-keygen -m PEM -t rsa -b 4096生成 ssh，然后復(fù)制公鑰到 authorized_keys - 設(shè)置完最好是重啟下
-
構(gòu)建完成
- 記得開啟云服務(wù)器的防火墻端口：9902，即可在瀏覽器中訪問到前臺(tái)頁面
.github/workflows/test-deploy.yml
# test-deploy.yml
name: 后端測(cè)試環(huán)境直接部署
# 手動(dòng)構(gòu)建
#on: workflow_dispatch
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
steps:
# 拉取倉庫文件
- name: 拉取master分支代碼
uses: actions/checkout@v3
with:
# 默認(rèn)當(dāng)前分支
ref: 'master'
# action命令，安裝Dotnet7
- name: 安裝 Dotnet7
uses: actions/setup-dotnet@v3
with:
dotnet-version: 7.0.400
# 執(zhí)行打包命令
- run: dotnet --version && dotnet publish ./src/hosts/ZhonTai.Host -c Release -o ./publish_output --self-contained true --runtime linux-x64 --framework net7.0
# 將dist復(fù)制到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,所以只需要運(yùn)行時(shí)鏡像部署即可
- 指定工作目錄為 /app
- 指定監(jiān)聽?wèi)?yīng)用端口，Admin.Core 默認(rèn)端口為 8000,啟動(dòng)庫為 ZhonTai.Host
# 使用 ASP.NET Core 運(yùn)行時(shí)鏡像作為最終鏡像
FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS runtime
WORKDIR /app
# 復(fù)制構(gòu)建好的應(yīng)用程序文件
COPY ./publish_output /app
# 設(shè)置運(yùn)行時(shí)環(huán)境變量
ENV ASPNETCORE_URLS=http://+:8000
# 指定容器啟動(dòng)時(shí)要執(zhí)行的命令
ENTRYPOINT ["dotnet", "ZhonTai.Host.dll"]
前臺(tái) vue 項(xiàng)目的部署
整個(gè)過程類似鏡像構(gòu)建一樣，一步步設(shè)置自己需要的環(huán)境，然后執(zhí)行命令或者設(shè)置對(duì)應(yīng)的操作，可以在使用前過一遍中文文檔有個(gè)大概的了解，本文就跳過基礎(chǔ)介紹直接說實(shí)現(xiàn)方式及重點(diǎn)
執(zhí)行的步驟及重點(diǎn)
- 倉庫地址：https://github.com/yimogit/admin.ui.plus
- 部署文件：
.github\workflows\test-deploy.yml - 目錄結(jié)構(gòu)
├─.github │ └─workflows │ └─test-deploy.yml ├─docker │ ├─Dockerfile │ └─nginx.conf │ - dist build生成的dist會(huì)復(fù)制到此，rsync上傳到linux服務(wù)器 ├─public ├─src ├─...
-
新建 github actions 配置文件:
.github\workflows\test-deploy.yml- 倉庫的 .github/workflows 目錄中定義將會(huì)被 github actions 識(shí)別
- 測(cè)試可以用，生產(chǎn)則可以用
on: workflow_dispatch指定手動(dòng)構(gòu)建
-
拉取分支
- actions 庫：
actions/checkout@v3
- actions 庫：
-
安裝 node v18.17.1
- actions 庫：
actions/setup-node@v3
- actions 庫：
-
執(zhí)行打包生成 dist 目錄
npm install && npm run build- 默認(rèn)打包使用的 production 環(huán)境的配置，如需打包其他環(huán)境則可以使用
npm run build --mode testing指定環(huán)境 testing，并使用 .env.testing 環(huán)境變量文件 - 使用
echo -e "\nVITE_API_URL=${{ secrets.API_HOST }}" >> .env.production將配置中的 API_HOST 寫入環(huán)境變量中
-
使用 ssh 部署到服務(wù)器
- actions 庫：
easingthemes/ssh-deploy@v4.1.8 - 將 dist 復(fù)制到 docker 目錄，在將 docker 目錄，將其上傳到服務(wù)器后執(zhí)行腳本
- actions 庫：
-
ssh 使用需要配置的環(huán)境變量
-
${{ secrets.SSH_PRIVATE_KEY }}：服務(wù)器的 ssh 密鑰 -
${{ secrets.REMOTE_HOST }}：服務(wù)器 IP -
${{ secrets.REMOTE_USER }}：用戶名 -
${{ secrets.REMOTE_TARGET }}：遠(yuǎn)程目錄 -
${{ secrets.API_HOST }}: 接口地址，配置后寫入VITE_API_URL=xxx.com
-
-
配置需要的環(huán)境變量
- 配置路徑：項(xiàng)目->Settings->Security->Secrets and variables->Actions->New repository secret
- ssh 的生成參考ssh-deploy 配置部分
-
ssh-keygen -m PEM -t rsa -b 4096生成 ssh，然后復(fù)制公鑰到 authorized_keys
-
構(gòu)建完成
- 記得開啟云服務(wù)器的防火墻端口：9901，即可在瀏覽器中訪問到前臺(tái)頁面
.github/workflows/test-deploy.yml
- 完整的部署配置
# test-deploy.yml
name: 前端直接部署
# 手動(dòng)構(gòu)建
# on: workflow_dispatch
# 自動(dòng)構(gòu)建
on:
push:
branches:
- master
jobs:
build:
runs-on: ubuntu-latest
steps:
# 拉取倉庫文件
- name: 拉取master分支代碼
uses: actions/checkout@v3
with:
# 默認(rèn)當(dāng)前分支
ref: 'master'
# action命令，安裝Node v18.17.1
- name: 安裝 node
uses: actions/setup-node@v3
with:
node-version: 18.17.1
cache: 'npm'
# 執(zhí)行打包命令
- run: |
if [ -n "${{ secrets.API_HOST }}" ]; then
# 使用設(shè)置中的接口地址
echo -e "\nVITE_API_URL=${{ secrets.API_HOST }}" >> .env.production
fi
- run: node -v && npm -v && npm install && npm run build
# 將dist復(fù)制到docker目錄中
- run: cp ./dist ./docker -rf
# 使用 ssh 將dist文件拷貝到 linux
- name: 使用ssh部署到服務(wù)器
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 配置
- 對(duì)應(yīng)使用腳本：
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 節(jié)點(diǎn)了
- 并且會(huì)覆蓋默認(rèn)的 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;
}
}
一些碎碎念
- 本文的做法適用于測(cè)試，如果要構(gòu)建生產(chǎn)，還需要更加嚴(yán)謹(jǐn)，比如需要手動(dòng)執(zhí)行，而不是自動(dòng)構(gòu)建，以及可以將打包和部署分開，生成構(gòu)建物體，快速回滾部署
- 本文為了演示遠(yuǎn)程 docker，所以每次都是構(gòu)建了 docker，其實(shí)也可以直接上傳到服務(wù)器目錄，不需要重啟 docker
- 文章大部分都是用命令完成，方便遷移到其他構(gòu)建工具，后續(xù)也可以直接在Github使用。
不完全踩坑記錄
- ssh部署：看了好久才看明白，一開始生成了沒有復(fù)制到authorized_keys，然后生成了密鑰沒重啟就是連接不上
- docker nginx：nginx.conf掛載的地址不對(duì)，之前的舊版本是在/etc/nginx/nginx.conf,新的在/etc/nginx/conf.d/default.conf
- nginx.conf的格式新版去掉了http節(jié)點(diǎn)，直接配置server節(jié)點(diǎn)就行，配置文件沒對(duì)，導(dǎo)致誤以為是我history模式nginx寫法不對(duì)
- 覆蓋.env.production中接口地址的配置，想要換行加一句，試了好多次才行：
echo -e "\nVITE_API_URL=xxx" >> .env.production - api項(xiàng)目掛載的位置搞錯(cuò)了幾次：數(shù)據(jù)庫和文件上傳的地址分別是：/app/admindb.db,/app/wwwroot/upload
- api項(xiàng)目掛載文件需要先行創(chuàng)建目錄，啟動(dòng)后將會(huì)生成數(shù)據(jù)庫
- api項(xiàng)目的端口默認(rèn)8000
時(shí)間過得太快了，周末兩天第一次沉下心研究了一天Github Actions,各種嘗試踩坑，第二天將過程整理分享出來，寫完這句，發(fā)現(xiàn)眨眼間就周一了。
似乎學(xué)習(xí)，能讓我在迷茫中找到些許方向吧。
By 易墨 轉(zhuǎn)載請(qǐng)注明出處文章來源：http://www.zghlxwxcb.cn/news/detail-676080.html
相關(guān)資料
項(xiàng)目說明
如果對(duì)部署的項(xiàng)目感興趣可以參考前兩篇文章文章來源地址http://www.zghlxwxcb.cn/news/detail-676080.html
- zhontai Admin.Core: 01.前后端分離中臺(tái)框架后端 Admin.Core 學(xué)習(xí)-介紹與配置說明
- zhontai admin.ui.plus：02.前后端分離中臺(tái)框架前端 admin.ui.plus 學(xué)習(xí)-介紹與簡(jiǎn)單使用
- zhontai 代碼生成：03.前后端分離中臺(tái)框架 zhontai 項(xiàng)目代碼生成器的使用
Github Actions 相關(guān)地址
- GitHub Actions 中文文檔
- GitHub Actions 計(jì)費(fèi)
- GitHub Actions 個(gè)人使用情況
本文使用到的 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.8ssh 連接服務(wù)器 v4.1.8 文檔 - 其他
-
actions/upload-artifact@v3上傳文件 v3.1.2 文檔 -
actions/download-artifact@v3下載文件 v3.0.2 文檔
-
到了這里，關(guān)于04.使用 github actions+docker 自動(dòng)部署前后端分離項(xiàng)目 zhontai (.net core+vue)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
