解决的问题：妈妈再也不担心我deploy时候手滑了
1. 避免手动执行重复的前端发布流程，节约开发时间和耐心
2. 减少了使用Jenkins类似的工具来做这种简单的发布流程，减少了第三方系统（Jenkins）的维护成本
前置条件
1. 客户机上装好了nodejs和git、npm等必要的前端开发工具
2. 一台具有公网IP的服务器配置好了ssh和nginx
操作步骤
1. 使用vue-cli来创建你的vue项目（前提： 安装好nodejs和npm）
1.1 安装vue-cli工具
npm install -g @vue/cli
1.2 使用vue-cli创建一个名为"hello-world"的VUE项目
vue create hello-world
1.3 根据你的需求选择vue-cli的配置，具体配置参照vuejs官网 cli.vuejs.org/zh/guide/cr…
2. 使用github来管理你的代码版本
2.1 在github中创建一个同名的空的项目
例如： https://github.com/zhuanjiaozm/hello-world
2.2 把你的项目发布到github
git remote add origin https://github.com/zhuanjiaozm/hello-world.git
git branch -M main
git push -u origin main
2.3 回到github的官网确认你的代码已经正确提交
例如： https://github.com/zhuanjiaozm/hello-world
3. 配置github actions 来帮你自动上传你的代码到你的服务器 （前提： 配置好ssh信息）
3.1 set up a workflow on your github
依次点击：项目主页 => Actions => Node.js => Set up this workflow
3.2 配置这个actions的node.js.yml文件并smart commit
# This workflow will do a clean install of node dependencies, cache/restore them, build the source code and run tests across different versions of node
# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
name: Node.js CI
# on 表示触发actions的条件
on:
push:
branches: [ main ] #main分支在push的时候会触发
pull_request:
branches: [ main ] #main分支在PR的时候会触发
jobs:
build:
runs-on: ubuntu-latest #nodejs执行的操作系统
strategy:
matrix:
node-version: [14.x] #选择你需要的nodejs版本
# See supported Node.js release schedule at https://nodejs.org/en/about/releases/
steps:
- uses: actions/checkout@v2 #拉取你的最新代码
- name: 使用 Node.js ${{ matrix.node-version }}开始搞事情
uses: actions/setup-node@v2
with:
node-version: ${{ matrix.node-version }}
cache: 'npm'
- run: npm install
- run: npm run build
- name: 自动同步文件夹到我的服务器
# You may pin to the exact commit or the version.
# uses: wangyucode/sftp-upload-action@24f8bb83383dc39bed201ee5da01475e6c38c568
uses: wangyucode/sftp-upload-action@v1.1
with:
host: ${{ secrets.SERVER_IP }} #你的nginx服务器公网ip
port: ${{ secrets.SERVER_PORT }} #你的nginx服务器ssh端口
username: ${{ secrets.USERNAME }} #你的nginx服务器用户名
password: ${{ secrets.PASSWORD }} #你的nginx服务器密码
localDir: "dist" #你vue项目build好的文件的路径,每次服务器上会自动删除对应的文件夹后重新覆盖
remoteDir: ${{ secrets.SERVER_DESTINATION }} #你要把你build好的文件夹放到nginx服务器上的什么位置
3.3 配置node.js.yml中使用到的参数,依次加入上述yml文件中用到的5个变量：SERVER_IP、SERVER_PORT、PASSWORD、USERNAME、SERVER_DESTINATION
依次点击：项目主页 => Settings => Secrets => New repository secrets
3.3.1 为了安全性和便捷性，yml文件中的部分信息可以以变量的形式在secrets中配置。
3.3.2 同账户下的不同repository之间的secrets不互通。
3.3.3 yml中可以使用${{secters.变量名}}来读取secrets中配置的变量。
3.3.4 secrets中配置的值只能删除和更新，无法查看之前提交的值。
3.3.5 yml中也是可以直接写入具体的值的，需要使用双引号包裹起来， 例如host: "192.168.1.1"。
3.3.4 。这个插件wangyucode/sftp-upload-action@v1.1中使用sftp协议上传文件夹到服务器的
5. 配置好你的nginx服务器
5.1 确保你的服务器上成功开启了sshd服务，并且你GitHub secrets中配置的用户可以正常使用sftp服务。
可以使用以下代码测试： `ssh -p <SERVER_PORT> <USERNAME>@<SERVER_IP>`
5.2 安装并启动你服务器上的nginx，注意为了避免vue路由和nginx路由冲突，需要在nginx中配置vue项目的try_files。
server {
listen 80;
server_name fengziqiao.xyz; # 网站域名
ssl_certificate "/root/cert/cert.crt";
ssl_certificate_key "/root/cert/private.key";
ssl_session_cache shared:SSL:1m;
ssl_session_timeout 10m;
ssl_ciphers PROFILE=SYSTEM;
ssl_prefer_server_ciphers on;
# Load configuration files for the default server block.
include /etc/nginx/default.d/*.conf;
# 配置代理访问后端服务器
location /api { #需要代理的相对路径
proxy_pass http://1.1.1.1:122; #后端服务的ip和端口
rewrite ^.+api/?(.*)$ /$1 break;
}
location ^~ / {
root /usr/share/nginx/html; #指定网站更目录，也是你GitHub的secrets中配置SERVER_DESTINATION的值
index index.html ; #默认的入口文件
try_files $uri $uri/ /index.html; #为了避免vue路由下刷新时候的404错误
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
5. 验证是否可以成功自动部署
6.1 修改你的vue项目代码，并提交github中（yml更新也会触发Actions，因为也commit并push了）。
6.2 打开你的github中该项目，点击Actions查看,一般提交完代码一两分钟后内会开始自动执行Actions中的yml脚本。
6.3 点击commit的信息继续点击进去可以查看yml执行时候的实时log。
6.3 如果Acions中的这个位置显示绿色表示执行无错误，不出意外你的nginx服务器上的 SERVER_DESTINATION0文件夹已经有了你的最新代码了，nginx不用重启即可在浏览器中刷新你的网站查看最新的代码效果了 。
