源於要做一個Nuxt的項目，所以標題以Nuxt為主，其實不然，我們同時也可將 Html 包含內的任意框架，全部可通過該方式進行實現自動化部署，
注：但前提是，請勿將公司內部產品項目，放入Github中使用，Github 建議只上傳Demo，GItLab 可用於公司內部使用, CI 實現自動化部署。
一、准備工作
1. Nuxt Demo
2. Github 上傳
3. 阿里雲服務器購買
4. 阿里雲服務器配置
5. Github Actions配置
二、使用 Nuxt 新建 Demo
1. 查看官網
2. 根據 Install 安裝
3. 啟動后，我們可以看到以下, 就說明，我們已經啟動成功
二、Github 上傳項目
1. 新建 Github 項目
2. 將本地項目代碼，托管到 Github 上
3. 代碼上傳成功
三、阿里雲服務器購買
注：如果小伙伴只是為了體驗阿里雲服務器的話，阿里雲服務器這邊首次用戶可免費體驗幾個月，不過我建議首次使用的小伙伴，可以選擇購買1年的服務器，才90多塊錢，一周的話，需要30塊錢，這樣算下來，一年還是比較划算的，域名的話，幾塊錢就可以買到一個1年的，有意向的小伙伴可以到官網購買
四、阿里雲服務器配置
1. 點擊管理控制台
2. 查看實例，及公網IP
3. 購買成功后，會收到一條短信，提示我們雲服務器已經開通，如果想修改密碼的話，可以按照以下步驟進行修改
4. 打開本地終端，通過ssh連接服務器
ssh root@47.242.239.***
5. 當看到登錄成功后，就說明已經進入服務器
6. 安裝 node 環境
$ curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
或
$ wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash
之后需要激活nvm:
$ source ~/.nvm/nvm.sh
激活完成后，安裝穩定 node 版本
$ nvm i lts/*
測試 node 環境是否安裝成功
$ node -V $ npm -V
6. 安裝 pm2，目的是通過pm2啟動我們的項目，使項目一直保持在啟動狀態，與需要了解的小伙伴可以了解一下
$ npm install pm2 -g
7. 執行以下代碼, 用於存放代碼包
cd / mkdir home cd home mkdir realworld_nuxt
五、Github Actions 配置
1. 點擊 Actions 按鈕，我們可以看到，我們可以自己去配置自動化所需要的步
2. 在項目的根目錄下，新建 /.github/workflows/***.yml, 此處 yml 的文件名可以隨意取名，項目上傳后，會自動讀取 workflows 文件夾內部 yml 文件
3. Edit new file 是 需要實現自動化部署，寫的步驟，Github 默認的自動化部署步驟，是直接上傳到了 Github Actions ，會生成一個網站查看，因我們是實現阿里雲自動化部署，所以，將下面代碼替換為以下代碼
# 自動化部署名稱
name: Publish And Deploy Demo
# 觸發部署的條件: 當 master 分支, 有 push 的操作, 即可觸發。
on:
push:
branches: # 此處不僅限於監聽分支, 還可監聽 tag
- master
paths-ignore: # 下列文件的變更不觸發部署，可以自行添加
- README.md
- LICENSE
jobs:
build-and-deploy:
runs-on: ubuntu-latest # 使用ubuntu系統鏡像運行自動化腳本
steps: # 進入自動化步驟
# 第一步，下載代碼倉庫
- name: Checkout
uses: actions/checkout@master
# 打包構建
- name: Build
uses: actions/setup-node@master
- run: npm install
- run: npm run build
# 將這些 .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json 文件打包在 release.tgz 中
# 此處是為了在方便，在服務器中直接解壓，獲得所有文件，無需單獨傳
# pm2 幫助我們在 Node服務器，啟動項目的一個工具，具體可查看官網 https://github.com/Unitech/pm2
- run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json
# 發布版本 Release
# 與 Github 建立連接( 此處用於將 release.tgz 上傳到 github 上 )
- name: Create Release
id: create_release
uses: actions/create-release@master
env:
GITHUB_TOKEN: ${{ secrets.TOKEN }}
with:
tag_name: ${{ github.ref }}
release_name: Release ${{ github.ref }}
draft: false
prerelease: false
# 上傳構建結果到 Release
# 將 release.tgz 上傳到 github 上
- name: Upload Release Asset
id: upload-release-asset
uses: actions/upload-release-asset@master
env:
GITHUB_TOKEN: ${{ secrets.TOKEN }}
with:
upload_url: ${{ steps.create_release.outputs.upload_url }}
asset_path: ./release.tgz
asset_name: release.tgz
asset_content_type: application/x-tgz
# 部署到服務器
- name: Deploy
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.HOST }} # 公網 IP 或 域名
username: ${{ secrets.USERNAME }} # 登錄名
password: ${{ secrets.PASSWORD }} # 密碼
port: ${{ secrets.PORT }} # 端口
# 類似在服務端的終端-執行以下操作
# 1. 找到需要存放文件的地方
# 2. 從 Github 上將 release.tgz 復制一份放入文件內
# 3. 解壓 release.tgz 文件
# 4. 安裝插件
# 5. 重啟 pm2, 並執行 pm2.config.json 內操作，
# 6. pm2.config.json 是 啟動 項目，( npm start )
script: |
cd /home/realworld_nuxt
wget https://github.com/TheWomanLiketheWind/nuxtRealworld/releases/latest/download/release.tgz -O release.tgz
tar zxvf release.tgz
npm install --production
pm2 reload pm2.config.json
4. Start commit 提交
5. 在 main.yml 文件中，我們可以看到，有些變量需要添加，( TOKEN，HOST, USERNAME, PASSWORD, PORT )
首先新建 TOKEN
5. 將代碼稍微修改一下，git push, 為了觸發 master分支，以觸發自動化部署文件
6. 點開 github Actions, 就可以看到代碼正在自動執行
上傳后，啟動項目，
