vuecli项目自动部署服务器

1 创建一个项目并提交

2 配置公钥和私钥

3 github配置

4 创建actions

5 一些错误

vuecli项目通过github插件自动部署到服务器，每次push代码后可自动打包放置服务器上。个人博客文章地址

1 创建一个项目并提交

项目以vuecli和node作为例子。

1. 在本地创建一个vuecli项目
2. 创建一个github仓库
3. 提交项目到仓库中

2 配置公钥和私钥

window下建议使用git bash，这样命令相同。

1. cd ~ - 到根路径下
2. ssh-keygen -t rsa -C auto -f auto-deploy - 创建公钥私钥
3. ls -la - 查看所有文件，此时应该可以找到auto-deploy 和 auto-deploy.pub两个文件,同时会看到一个.ssh的文件夹
4. cd .ssh - 进入.ssh文件夹
5. cp ~/auto-deploy . - 拷贝私钥到.ssh文件夹中
6. cd ~ - 回到根路径下
7. scp auto-deploy.pub root@47.**.67.60:. - 拷贝公钥到服务器，地址填写自己的服务器地址，注意后面有:.
8. ssh root@49.**.67.60 - 连接无服务器，会提示输入密码，是一个密文，输入完回车就好
9. ls - 查看公钥是否已经拷贝到服务器。
10. cat auto-deploy.pub >> ~/.ssh/authorized_key - 拷贝公钥到服务器.ssh中

3 github配置

进入刚刚创建的github仓库。进入下面路径：

github
settings
secrets
add a new secret
设置名字这里以(FUWUQI)为例
粘贴私钥
确定添加

私钥内容可以在本地的auto-deploy文件中看到。注意将begin跟end也要复制！全部复制！

vim auto-deploy

4 创建actions

点击set up创建node的工作流，大概会看到下面一串代码。圈起来的地方是添加的，只需要修改node版本，服务器地址，打包路径。注意对齐，没对齐会标红。填写完后点击绿绿的start commit - commit new file即创建完成。

- name: Deploy 
  uses: easingthemes/ssh-deploy@v2.0.7  
  env:   
     SSH_PRIVATE_KEY: ${{ secrets.FUWUQI }}       
     ARGS: "-rltgoDzvO --delete"
     SOURCE: "dist/"  
     REMOTE_HOST: ""  
     REMOTE_USER: "root"   
     TARGET: ""

刷新界面会看到插件在运行，第一次打包会比较久，之后每次push都会自动的打包并部署到服务器上。

5 一些错误

可以在actions里看到工作流，点击工作流可以查看打包的过程。
目前我只在run npm ci处出错，因为package-lock文件没有最新，可以在本地项目更新依赖包再重新提交即可。发现cnpm是没用的，不清楚原因。。重新提交前要git pull下更新本地才可push

npm install

插件提示成功后可在服务器查看到打包后的文件。大功告成！！