自动化部署VUE项目
自己简单写了个vue项目，本来想把它部署到服务器上，发现可以直接自动化部署到Github Page上，在github.io直接访问，每次有更新都会自动化部署。除了Github Page，也可以自己买个腾讯云服务器，同样是利用Github Action自动化部署到服务器上，太方便了。
部署流程
初始化项目
npm init vue@latest
这一指令会安装并执行create-vue，它是Vue官方的项目脚手架工具。
创建好项目后，推送到github。
配置github actions
在项目目录增加.github/workflows文件夹，创建main.yml文件。
文件代码如下
name: Build and Deploy
on: # 监听 main 分支上的 push 事件
push:
branches:
- main
jobs:
build-and-deploy:
runs-on: ubuntu-latest # 构建环境使用 ubuntu
steps:
- name: Checkout # 获取源码
uses: actions/checkout@v3
with:
persist-credentials: false
- name: Install pnpm # 安装pnpm
uses: pnpm/action-setup@v2
with:
version: 6.0.2
- name: Install and Build # 下载依赖 打包项目
run: |
pnpm install
pnpm run build
- name: Deploy # 将打包内容发布到 github page
uses: JamesIves/github-pages-deploy-action@v4 # 使用别人写好的 actions
with: # 自定义环境变量
BRANCH: gh-pages # github page指定分支
FOLDER: dist # build后生成的目录
clean: true
以下三个步骤只针对github page部署，如果是腾讯云部署，直接跳到腾讯云部署的地方。
新建gh-pages分支
项目初始化后，默认只有main分支，需要新建gh-pages分支，可以在本地建，也可以在远程仓库建，注意代码同步问题。分支建好后，可以在settings里面的pages看到。
设置公共路径
由于项目打包后，不设置公共路径的话，会以绝对路径/作为根目录，这里需要以github仓库名作为根目录。在vue.config.js设置相对路径./作为公共路径。
module.exports = defineConfig({
publicPath: "./",
})
设置项目权限
以上都设置好后，自动化部署时碰到下面这个错误
需要设置workflow的权限为读写，在项目的Settings->Actions->General页面下，找到workflow permissions。
效果
配置完成后，每次push到github就会自动部署了。
点进pages build and deployment可以看到对应的github page链接。
部署到腾讯云服务器
初始化服务器
腾讯云目前提供轻量应用型服务器，可以直接购买安装好node.js的服务器。
使用下面命令创建一个node express项目
mkdir node-server // 创建 node-server 文件夹
cd node-server // 进入 node-server 文件夹
npm init -y // 初始化项目
npm i express
touch server.js // 创建 server.js 文件
vim server.js // 编辑 server.js 文件
将下面代码粘贴进server.js文件。也可以在本地执行以上步骤，然后把创建好的文件夹拉到服务器上。
const express = require('express')
const app = express()
const port = 8080 // 填入自己的腾讯云开放端口
app.use(express.static('dist'))
app.listen(port, '0.0.0.0', () => {
console.log(`listening`)
})
在命令行中执行node server.js开始监听，暂时还没有dist目录，访问会看到一个空页面。如果想将任务放在后台执行，避免链接断开就访问不了的问题，可以使用forever，nohub的替换。
npm install forever -g # 全局安装forever
forever start server.js # 后台运行server.js
需要关闭的话forever stop server.js
配置服务器
需要设置端口，开放公网访问。
创建ssh密钥
创建好后，点击绑定实例
然后打开github项目，点击setting->secrets
设置secrets完成
将项目main.yml文件里面的Deploy替换成下面一部分内容，这里会使用ssh登录到腾讯云，把打包的文件上传到指定文件夹中。
- name: Deploy to Tencent Cloud
uses: easingthemes/ssh-deploy@v2.1.5
env:
SSH_PRIVATE_KEY: ${{ secrets.SERVER_SSH_KEY }}
ARGS: '-rltgoDzvO --delete'
SOURCE: dist # 这是要复制到静态服务器的文件夹名称
REMOTE_HOST: '43.159.8.31' # 你的腾讯云公网地址
REMOTE_USER: root # 腾讯云登录后默认为 root 用户
TARGET: /home/lighthouse/node-server # 打包后的 dist 文件夹将放在/home/lighthouse/node-server
效果
需要注意，如果使用腾讯云部署的话，就不用设置vue.config.js里的publicPath了，也不用设置gh-pages分支和项目权限了。