github actions将vuepress项目部署到阿里云ECS，实现一键集成和部署

最近学习了一下通过如何 github actions 一键集成和部署。刚开始的时候实现了将自己的单个项目一键集成部署到自己的阿里云 ECS 服务器。觉得挺好玩的。后来想到自己一直在写博客，为什么不将自己的博客也通过 github actions 集成并部署到自己的服务器呢?然后下面是自己在部署过程遇到的一些坑和解决方案的总结。

1、在本地生成ssh秘钥

打开 git bash输入 ssh-keygen -t rsa -C "your_email@youremail.com"生成公钥和私钥。 id_rsa是私钥,id_rsa.pub是公钥。

2、设置私钥

登录自己的 github 并新建一个项目，也可以打开已有项目。然后进入项目，并点击 settings选项，然后点击Secret，最后点击New secret。将你刚刚生成的 id_rsa文件里面额内容拷贝到secret的value中。到此你在github的私钥就部署好了。

3、设置公钥

登录服务器 ssh root@47.107.142.234。
cd .ssh进入到放置公钥的文件夹。
vi authorized_keys打开 authorized_keys文件。将你在本地生成的 id_rsa.pub里面的公钥的内容复制到该文件中。

4、生成yml文件

进入项目，点击 Actions选项，然后点击set up a workflow yourself ,然后会生成一个.github/workflows/main.yml文件。然后按照要求开始编辑main.yml文件（该文件是可以自定义名称的）。

5、配置yml文件。

下面是我的一个项目的配置文件。

name: Build app and deploy to aliyun
on:
  #监听push操作
  push:
    branches:
      # master分支，你也可以改成其他分支
      - master
jobs:
  build:
    # runs-on 指定job任务运行所需要的虚拟机环境(必填字段)
    runs-on: ubuntu-latest
    steps:
      # 获取源码
      - name: Checkout
        # 使用action库  actions/checkout获取源码
        uses: actions/checkout@master
      # 安装Node13
      - name: use Node.js 13.2.0
        # 使用action库  actions/setup-node安装node
        uses: actions/setup-node@v1
        with:
          node-version: 13.2.0
      # 安装依赖
      - name: npm install
        run: npm install
      # 打包
      - name: npm build
        run: npm run build:prod
      # 部署到阿里云
      - name: Deploy to Aliyun
        uses: easingthemes/ssh-deploy@v2.1.1
        env:
          # 私钥
          SSH_PRIVATE_KEY: ${{ secrets.PRIVATE_KEY }}
          # scp参数
          ARGS: "-avzr --delete"
          # 源目录，编译后生成的文件目录
          SOURCE: "./dist"
          # 服务器ip：换成你的服务器IP
          REMOTE_HOST: "47.106.141.235"
          # 用户
          REMOTE_USER: "root"
          # 目标地址 你在服务器上部署代码的地方
          TARGET: "/root/web/vue-drag-demo"
复制代码

当你的部署文件写好之后。当你在master分支上，push代码时，会自动自行yml文件，将将代码自动部署到你的服务器上。这样你就马上可以看到你修改之后的界面了。这是我部署好的项目的效果。这是我的项目的github的地址vue-drag-project。大家如果兴趣可以fork我的项目(该项目是一个积拖拽和条件渲染功能于一身的项目)，自己去尝试一下。

在部署该项目时遇到的问题

在部署时的源目录 SOURCE 一开始为 dist,一直报错，后来改成./dist后才部署成功。

6、配置nginx

在配置nginx时遇到如下问题：默认的nginx.conf文件会帮你将.*\.(js|css)?$文件和 .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$这些文件进行缓存的。因为我vuepress配置时的base为/blog/，所以当时我重写路由时rewrite，一直没生效，鼓捣了几个小时，最后解决，所以在此记录一下。

上面的server配置的是自己的一个开源项目vue-drag-project。下面的部署的是我的博客项目。如果有兴趣的话可以去看一下，觉得好的话可以去我的github关注或者star支持一下。

http{
  # 开启gzip压缩
  gzip on;
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  gzip_http_version 1.0;
  gzip_comp_level 2;
  gzip_types text/plain application/x-javascript text/css application/xml;
  gzip_vary on;
 #下面是server虚拟主机的配置
 server
 {
    listen 8002;#监听端口
    server_name 47.107.141.236;#服务器ip也可以是域名
    index index.html index.htm index.php;
    root /root/web/vue-drag-demo/dist;#站点目录
    access_log off;
 }
 server
 {
      listen 8004;#监听端口
      server_name 47.107.141.236;#服务器ip也可以是域名
      index index.html index.htm index.php;
      root  /root/web/blog/dist;

      location ~ /(blog)/ {
           rewrite ^/blog/(.*)  /$1 permanent;
      }
     
      #location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|ico)$
      #{
       #expires 30d;
    # access_log off;
      #}
      #location ~ .*\.(js|css)?$
      #{
       # expires 15d;
     # access_log off;
      #}
      access_log off;
    }
}
复制代码