這篇文章以部署vue3項目和nuxt2項目為例結合github-action,docker,nginx等介紹不同的項目自動部署流程
部署vue3項目
步驟：
1、騰訊云開啟鏡像倉庫
2、github配置secrets
3、項目根目錄創(chuàng)建dockerfile文件（在action工作流中創(chuàng)建鏡像）
4、github配置action工作流（yml文件）
上面步驟執(zhí)行結束后就能實現(xiàn)在本地push項目到github倉庫后自動觸發(fā)action執(zhí)行自動部署到服務器
最主要的步驟就是配置action的yml工作流文件，這個文件包含接收到push指令后執(zhí)行的所有自動部署的流程
接下來我以部署vue3項目為例一步一步詳細介紹
1、騰訊云開啟鏡像倉庫
首先登錄騰訊云，搜索容器鏡像服務，然后創(chuàng)建個人版實例（記住用戶名和密碼）
然后點擊命名空間，點擊創(chuàng)建，新建一個命名空間（命名空間名稱隨便取，命名空間就是存放鏡像倉庫的空間）
創(chuàng)建了命名空間后點擊鏡像倉庫，然后點擊新建創(chuàng)建鏡像倉庫，每一個鏡像倉庫可以存放多個鏡像（這里我是把每個項目對應的docker鏡像存放到一個單獨的鏡像倉庫中）
注意創(chuàng)建的鏡像倉庫的地址，后面創(chuàng)建github的secrets會用到
tip:點擊快捷指令可以看到自己倉庫的用戶名
2、github配置secrets
首先打開github對應的項目倉庫，點擊setting->Secrets->Actions
點擊新建secret，對應一個name和value，新建的每個secret在后面的action的yml文件都會用到
列舉一下我使用的幾個secret：
DOCKER_REPOSITORY: 鏡像倉庫地址，也就是上面創(chuàng)建的鏡像倉庫鏡像地址
DOCKER_USERNAME：登錄docker鏡像倉庫的賬號
DOCKER_PASSWORD： 登錄docker鏡像倉庫的密碼
HOST：部署項目的服務器ip
HOST_PORT：服務器ssh端口號(默認是22)
HOST_USERNAME：服務器登錄用戶名（一般為root）
HOST_PASSWORD： 登錄服務器的密碼
3、項目根目錄創(chuàng)建dockerfile文件
項目根目錄創(chuàng)建的dockerfile會在工作流執(zhí)行時根據(jù)這個文件創(chuàng)建docker鏡像
我的項目用到了nginx，所有還需要在項目根目錄創(chuàng)建nginx的conf文件
（1）創(chuàng)建nginx
# ./nginx/blog-vue3.conf
server{
listen 80;
server_name haixtx.cn;
#靜態(tài)資源
location / {
root /usr/share/nginx/html/blog;
index index.html index.htm;
try_files $uri $uri/ /index.html;
}
#反向代理獲取動態(tài)資源（解決跨域）
location /api {
proxy_pass http://haixtx.club/node;
}
# #靜態(tài)資源緩開啟緩存
# location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$
# {
# expires 30d;
# }
# location ~ .*.(js|css)?$
# {
# expires 12h;
# }
}
# ./nginx/gzip.conf
# /etc/nginx/conf.d/gzip.conf
?
gzip on; # 默認off，是否開啟gzip
gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;
?
gzip_static on;
gzip_proxied any;
gzip_vary on;
gzip_comp_level 6;
gzip_buffers 16 8k;
gzip_min_length 1k;
gzip_http_version 1.1;
（2）創(chuàng)建dockerfile
#nginx鏡像
FROM nginx
LABEL name="blog-vue3"
LABEL version="latest"
# 新建nginx靜態(tài)資源目錄
RUN mkdir -p /usr/share/nginx/html/blog
# 將打包后的文件夾放在docker容器中的nginx靜態(tài)資源文件夾目錄下
COPY ./dist/ /usr/share/nginx/html/blog
# 將項目根目錄的nginx配置文件放在docker容器中的nginx子配置文件夾目錄下
COPY ./nginx/blog-vue3.conf /etc/nginx/conf.d/
COPY ./nginx/gzip.conf /etc/nginx/conf.d/
# docker容器對外暴露端口號設置為80
EXPOSE 80
（3）創(chuàng)建.dockerignore忽略文件（生成docker鏡像的時候不會打包的文件夾目錄）
.git
node_modules
package-lock.json
Dockerfile
.dockerignore
4、github配置action工作流（yml文件）
還是在github的項目倉庫中，點擊Actions，選擇nodejs后點擊configure創(chuàng)建工作流
點擊后開始編寫yml文件，這個是整個部署階段最重要的地方
在內容區(qū)域ctrl+a全選然后刪除，粘貼進以下內容：
name: BlogVue3 Docker Image CI/CD
on:
push:
branches: [ master ]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
- name: Setup Node
uses: actions/setup-node@v2
with:
node-version: "16.x"
- name: Install and Build
run: |
npm install
npm run build
- name: Build Image
run: docker build -t ${{ secrets.DOCKER_REPOSITORY }}:latest ./
- name: Login to registry
run: docker login ccr.ccs.tencentyun.com --username=${{ secrets.DOCKER_USERNAME }} --password ${{ secrets.DOCKER_PASSWORD }}
- name: Push Image
run: docker push ${{ secrets.DOCKER_REPOSITORY }}:latest
pull-docker:
needs: [build]
name: Pull Docker
runs-on: ubuntu-latest
steps:
- name: Deploy
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.HOST }}
username: ${{ secrets.HOST_USERNAME }}
password: ${{ secrets.HOST_PASSWORD }}
port: ${{ secrets.HOST_PORT }}
script: |
docker stop $(docker ps --filter ancestor=${{ secrets.DOCKER_REPOSITORY }} -q)
docker rm -f $(docker ps -a --filter ancestor=${{ secrets.DOCKER_REPOSITORY }}:latest -q)
docker rmi -f $(docker images ${{ secrets.DOCKER_REPOSITORY }}:latest -q)
docker login ccr.ccs.tencentyun.com --username=${{ secrets.DOCKER_USERNAME }} --password ${{ secrets.DOCKER_PASSWORD }}
docker pull ${{ secrets.DOCKER_REPOSITORY }}:latest
docker run -d -p 8000:80 ${{ secrets.DOCKER_REPOSITORY }}:latest
整個yml文件需要嚴格遵循yml文件的格式，下面來一遍上面代碼的注釋
name: BlogVue3 Docker Image CI/CD # workflow名稱，可以隨意改
on: # workflow的事件鉤子，告知程序什么時候出發(fā)自動部署
push:
branches: [ master ] # 在master分支有push操作的時候自動部署
jobs:
# 第一個工作-build
build: # 打包并上傳docker鏡像
runs-on: ubuntu-latest # 依賴的環(huán)境,注意：actions提供的linux環(huán)境只有ubuntu
steps:
# 使用actions/checkout@v2獲取項目中的代碼（name是階段名，可以隨便填，每一個name必須對應一個run/uses）
- name: Checkout
uses: actions/checkout@v2
# 下載node版本環(huán)境
- name: Setup Node
uses: actions/setup-node@v2
with:
node-version: "16.x"
# 下載項目依賴并打包（如果上傳了package-lock.json文件到github倉庫，注意依賴包的源地址，我這里本地npm源地址是公司內網(wǎng)，所以lock文件里面有的依賴包地址也是公司內網(wǎng)，這時github執(zhí)行install就會請求失?。?/span>
- name: Install and Build
run: |
npm install
npm run build
# 創(chuàng)建docker鏡像
- name: Build Image
# ${{ secrets.DOCKER_REPOSITORY }}是讀取之前在Secret創(chuàng)建的名為DOCKER_REPOSITORY的值
# 從項目根目錄的dockerfile文件創(chuàng)建docker鏡像
run: docker build -t ${{ secrets.DOCKER_REPOSITORY }}:latest ./
# 登錄剛剛創(chuàng)建的騰訊云docker鏡像倉庫
- name: Login to registry
run: docker login ccr.ccs.tencentyun.com --username=${{ secrets.DOCKER_USERNAME }} --password ${{ secrets.DOCKER_PASSWORD }}
# 將鏡像提交到鏡像倉庫
- name: Push Image
run: docker push ${{ secrets.DOCKER_REPOSITORY }}:latest
# 第二個工作-pull-docker
pull-docker:
needs: [build]
name: Pull Docker
runs-on: ubuntu-latest
steps:
# 登錄騰訊云服務器并將docker鏡像倉庫的鏡像pull下來后啟動新容器
- name: Deploy
# 使用appleboy/ssh-action@master完成ssh登錄服務器
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.HOST }}
username: ${{ secrets.HOST_USERNAME }}
password: ${{ secrets.HOST_PASSWORD }}
port: ${{ secrets.HOST_PORT }}
# 登錄上服務器后執(zhí)行的代碼步驟（停止舊容器->刪除舊容器->刪除舊鏡像->登錄鏡像倉庫->pull新鏡像->利用新鏡像啟動新容器）
script: |
docker stop $(docker ps --filter ancestor=${{ secrets.DOCKER_REPOSITORY }} -q)
docker rm -f $(docker ps -a --filter ancestor=${{ secrets.DOCKER_REPOSITORY }}:latest -q)
docker rmi -f $(docker images ${{ secrets.DOCKER_REPOSITORY }}:latest -q)
docker login ccr.ccs.tencentyun.com --username=${{ secrets.DOCKER_USERNAME }} --password ${{ secrets.DOCKER_PASSWORD }}
docker pull ${{ secrets.DOCKER_REPOSITORY }}:latest
docker run -d -p 8000:80 ${{ secrets.DOCKER_REPOSITORY }}:latest
總結：
上述配置完成后，本地push代碼到倉庫，倉庫就會觸發(fā)配置的actions工作流執(zhí)行yml中提取配置好的步驟：
第一步先在github中將項目下載依賴后打包，然后根據(jù)打包內容及dockerfile創(chuàng)建鏡像并上傳到鏡像倉庫
第二步登錄服務器后刪除舊鏡像舊容器，登錄鏡像倉庫拷貝新鏡像，再通過新鏡像啟動新容器
至此就完成了項目的自動部署
部署nuxt2項目
部署nuxt2項目主體流程和上面部署vue3一樣，但是也存在一些不同的地方，主要就是docker容器的創(chuàng)建及啟動
部署vue3項目的docker容器只存在nginx鏡像，但是部署nuxt2項目的docker容器要存在node和nginx，所以nuxt2項目的docker鏡像是基于node鏡像創(chuàng)建，但是在創(chuàng)建過程中需要安裝nginx
node環(huán)境是因為nuxt會啟動后端服務來監(jiān)聽請求并整合請求對應資源返回html給瀏覽器，需要npm命令，nginx是因為在docker中啟動nuxt項目后會啟動后端服務，后端服務在127.0.0.1本地ip下，需要nginx代理轉發(fā)請求到啟動的127.0.0.1服務下
注： 部署nuxt項目和部署vue項目不同，vue項目只需build打包后把dist靜態(tài)資源文件放在服務器中通過nginx代理就行，而nuxt不僅要build打包，還需要啟動后端服務來監(jiān)聽瀏覽器的請求并從打包的文件中整合資源為html并返回給瀏覽器，所以部署nuxt項目既需要build打包項目，又需要執(zhí)行start命令啟動nuxt項目（啟動后端服務）
直接放nuxt2項目的dockerfile
# node服務器
FROM node:16.14.2
LABEL name="blog-nuxt2"
LABEL version="latest"
RUN mkdir -p /usr/src
COPY . /usr/src
# 安裝nginx(docker創(chuàng)建的默認都是debian系統(tǒng)的容器，安裝命令為apt而不是yum)
RUN apt-get update
# 加上-y遇到確認會繼續(xù)執(zhí)行
RUN apt-get install nginx -y
COPY ./nginx/blog-nuxt2.conf /etc/nginx/conf.d/
COPY ./nginx/gzip.conf /etc/nginx/conf.d/
WORKDIR /usr/src
RUN npm install
RUN npm run build
EXPOSE 82
# 執(zhí)行腳本命令
CMD sh ./nginx.sh
上面的dockerfile需要用到的其他文件及注意點：
1、dockerfile需要用到nginx對啟動的nuxt項目進行端口的反向代理，nuxt2項目啟動后也是類似于node啟動的后端項目，但是需要注意：
node啟動的項目(node app.js)在服務器可以直接通過服務器ip+端口訪問,但是nuxt啟動的項目(npm start)不能直接訪問，需要nginx代理一下才能訪問
# ./nginx/blog-nuxt2.conf
server{
# 監(jiān)聽docker容器內部的82端口
listen 82;
server_name haixtx.cn;
# 將82端口反向代理到啟動的nuxt端口4000
location / {
proxy_pass http://127.0.0.1:4000;
}
}
2、首先簡要說明一下RUN和CMD的區(qū)別
相同點，都是執(zhí)行命令，不同點在于，RUN 是在打包鏡像的時候執(zhí)行，CMD是在運行容器的執(zhí)行
dockerfile的CMD可以執(zhí)行多次，但是只會以最后一次為準，也就是說只能存在一個CMD，但是nuxt的docker需要在容器被創(chuàng)建時執(zhí)行npm start啟動nuxt項目，還需要重載docker容器內部的nginx（因為更新了nginx的配置項）,所以需要CMD執(zhí)行兩個命令，我在這里使用的方法就是在項目根目錄新建一個sh腳本，再CMD命令通過sh執(zhí)行這個腳本達到執(zhí)行多條命令的目的
# nginx.sh
nginx -c /etc/nginx/nginx.conf
nginx -s reload
npm start
CMD執(zhí)行這個腳本就會在創(chuàng)建docker容器時在容器內部重載nginx并啟動nuxt2項目
3、注意點：在install安裝命令后加上-y會在安裝過程中遇到是否繼續(xù)執(zhí)行（y/n）時選擇繼續(xù)執(zhí)行比如上面安裝nginx:apt-get install nginx -y
補充：放幾個我經常用但是又經常忘的linux-centos系統(tǒng)命令
1、netstat -ntulp | grep 80 查看端口占用情況
2、安裝curl查看網(wǎng)址返回內容yum -y install curl
curl http://localhost:3000/文章來源：http://www.zghlxwxcb.cn/news/detail-858689.html
3、docker exec -it 容器名 /bin/bash 進入docker容器文章來源地址http://www.zghlxwxcb.cn/news/detail-858689.html
到了這里，關于github-action+docker實現(xiàn)項目可持續(xù)自動化部署的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！
