自动化部署练习 github actions
[1.下载练习用的代码](https://gitee.com/lagoufed/fed-e-questions/raw/master/part3/realworld-nuxtjs.zip
2.验证项目代码正常可用



3.生成本地仓库
确认有「.gitignore」文件, 并且 push 时会忽略「node_modules」和「.nuxt」目录

初始化仓库,修改当前分支名称,并生成一个commit提交

git init
git add . && git commit -m "init"
git branch -M main
4.创建 github 仓库, 关联本地库




# 关联远程代码库
git remote add origin https://github.com/你账号/realworld-nuxtjs.git
# 查看关联情况
git remote -v
# 把当前代码先推一波. 证明没问题
git push origin main

5.配置 github actions 信息















6.编辑 workflows 脚本
打开项目根目录 .github / workflows / main.yml 文件

(以下是 main.yml参考内容)
name: Publish And Deploy Demo
on:
push:
tags:
- 'v*'
jobs:
build-and-deploy:
runs-on: ubuntu-latest
steps:
# 下载源码
- name: Checkout
uses: actions/checkout@master
# 打包构建
- name: Build
uses: actions/setup-node@master
- run: npm install
- run: npm run build
- run: tar -zcvf release.tgz .nuxt static nuxt.config.js package.json package-lock.json pm2.config.json
# 发布 Release
- 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
- 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 }}
username: ${{ secrets.USERNAME }}
password: ${{ secrets.PASSWORD }}
port: ${{ secrets.PORT }}
script: |
cd /usr/local/xlf-realworld-nuxtjs
wget https://github.com/xionglaifu/xlf-realworld-nuxtjs/releases/latest/download/release.tgz -O release.tgz
tar zxvf release.tgz
npm install --production
pm2 reload pm2.config.json
『一定要修改 倒数第4行 仓库地址』
编辑 PM2 配置文件
pm2.config.json (练习中已包含该文件)
{
"apps": [
{
"name": "RealWorld",
"script": "npm",
"args": "start"
}
]
}
注意:
- 不要少写 s
- 少数命令可以不写 run, 多数命令都是 npm run xxxx
7.完成测试


git add .
git commit -m "发布部署-测试"
git tag v0.1.0
git tag
git push origin v0.1.0



( 打完收工 )
网友评论