当前位置 博文首页 > 毛小星的博客:github自动部署nuxt项目
最近在学习 nuxt 框架,花了几天做了一个 realWorld 博客 demo,正好遇到了一些部署的问题,在这里做一个简单的教程。
在部署前我们需要准备一些东西:
# 将 npm 的镜像源设置为淘宝镜像,否则安装极慢,甚至会失败
npm config set registry https://registry.npm.taobao.org
# 全局安装 pm2
npm install pm2 -g
# 建立全局软连接
ln -s /usr/local/src/nodejs/bin/pm2 /usr/local/bin/
# 验证是否安装成功
pm2 -v
如果能出现版本号,就证明安装成功了
在 nuxt.config.js 中增加 server 字段
server: {
host: '0.0.0.0', // 监听所有的网卡服务器,保证生产服务器能够被访问
port: 3000 // 项目端口
},
在项目的根目录下增加 pm2.config.json,用作配置 pm2 运行的脚本文件
{
"apps": [
{
"name": "RealWorld", // 项目名称
"script": "npm", // 项目运行脚本
"args": "start" // 脚本运行命令
}
]
}
在项目的根目录下增加 .github 文件夹,在 .github 下面创建 workflows 文件夹,在 workflows 文件夹下面创建 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 替换成你的服务器项目文件夹的绝对路径
wget 替换成你的github项目地址 -O release.tgz
tar zxvf release.tgz
npm install --production
pm2 reload pm2.config.json
配置完项目中的 main.yml 文件之后,我们还需要在 github 上做一些配置。我们能看到上面有很多 secrets 关键字,接下来我们就需要在 github 上配置 secrets。
首先我们需要点击我们的头像,然后点进 settings
然后点击 Developer settings
点击 Personal access tokens
点击 Generate new token,生成一个 token ,取什么名字都行,生成 token 之后,一定要将 token 保存起来,因为这个 token 只有在第一次的时候显示
上面我们配置完 token 之后,进入 github 项目的仓储,然后点击 setting 下的 Secrets
然后配置下面几个字段
如果你做完上面的配置之后,然后提交你的代码,将你的代码打一个 tag
git add .
git commit -m "提交信息"
git tag v0.0.1
git push origin v0.0.1
之后就 github actions 就自动部署了,如果像下面这样,就证明部署成功了
然后就可以访问地址验证一下了
附上我的 github 源码地址,记得给我 star 哦
https://github.com/maoxiaoxing/realworld