github actions將vuepress項目部署到阿里雲ECS，實現一鍵集成和部署

  最近學習了一下經過如何 github actions 一鍵集成和部署。剛開始的時候實現了將本身的單個項目一鍵集成部署到本身的阿里雲 ECS 服務器。以爲挺好玩的。後來想到本身一直在寫博客，爲何不將本身的博客也經過 github actions 集成並部署到本身的服務器呢?而後下面是本身在部署過程遇到的一些坑和解決方案的總結。

一、在本地生成ssh祕鑰

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

二、設置私鑰

登陸本身的 github 並新建一個項目，也能夠打開已有項目。而後進入項目，並點擊 settings選項，而後點擊Secret，最後點擊New secret。將你剛剛生成的 id_rsa文件裏面額內容拷貝到secret的value中。到此你在github的私鑰就部署好了。

三、設置公鑰

• 登陸服務器 ssh root@47.107.142.234。
• cd .ssh進入到放置公鑰的文件夾。
• vi authorized_keys打開 authorized_keys文件。將你在本地生成的 id_rsa.pub裏面的公鑰的內容複製到該文件中。

四、生成yml文件

進入項目，點擊 Actions選項，而後 點擊set up a workflow yourself ,而後會生成一個.github/workflows/main.yml文件。而後按照要求開始編輯main.yml文件（該文件是能夠自定義名稱的）。

五、配置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後才部署成功。

六、配置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;
    }
}
複製代碼