准备工作
- 拥有一个自己的服务器,我在 UCloud 买了一个低配服务器自己玩,有兴趣看看 https://www.ucloud.cn/site/active/lagou.html
- 在GitHub上新建一个仓库,例如:myrepo
- 安装 git
- 在本地新建一个文件夹,作为VSCode代码的工作文件夹。例如:mycode
- 生成秘钥。在 cmd 终端输入命令:
- ssh-keygen -t rsa -C "111111@163.com"
- ~/.ssh //查看是否有公钥私钥 (命令执行完毕会生成一个名为 id_rsa.pub 的文件。利用文本编辑器打开该文件,全文复制)
- 打开GitHub 上的 myrepo 仓库,进入 setting,设置deploy keys,将 id_rsa.pub 中的内容粘贴进去即可。默认会生成该key对应的title(自己定义)为TOKEN
- 绑定本地文件夹和GitHub仓库:git remote add mycode git@github.com:myname/myrepo.git
- 设置完成后可以做一下连接测试
- ssh -T git@github.com
配置过程
- 在本地项目创建文件夹 .github\workflows\main.yml (用 github 的 action 实现自动化部署配置文件)
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 /ubuntu/realworld-nuxtjs
wget https://github.com/daisy-yangyang/realworld-nuxtjs/releases/latest/download/release.tgz -O release.tgz
tar zxvf release.tgz
npm install --production
pm2 reload pm2.config.json
- 在 github 仓库项目设置 HOST、PORT、 USERNAME 、PASSWORD ,这些是 main,yml 需要用到的
- 我的配置如下:
- HOST:服务器端口号
- PORT:22
- USERNAME:ubuntu
- PASSWORD:服务器密码
- 我的配置如下:
命令操作
在 vscode 提交本地项目(首次提交)
(1)git init
(2)git add .
(3)git status
(4)git commit -m 'first-commit'
(5)git remote add origin git@github.com:daisy-yangyang/realworld-nuxtjs.git
(6)git push -u origin master
修改本地代码后再次提交
(1)git add .
(2)git commit -m '111'
(3)git push
(4)git tag
(5)git tag v0.1.2
(6)git push origin v0.1.1
最后,可以在 github action 看到部署发布的过程