nuxt.js製アプリをgithub actionsでビルドしてFTP Deploy Actionで自分のサーバーにデプロイする

nuxt.jsアプリをgithubにpushしたときに、github actionsでビルドし、FTPでデプロイするところまでのmain.ymlを作成しました

手続きとしては以下の通りです

# .gitignoreの編集
distフォルダごとプッシュしたいのでdistフォルダを封じている部分をコメントアウトします

```
# Nuxt generate
# dist
```

# nuxt.config.jsの修正
デフォルトの設定では_nuxtディレクトリ内にハッシュ付きのファイルが増えていくため、差分が分かるように以下コードを追加します

```js:nuxt.config.js
build: {
    filenames: {
      app: () => '[name].js',
      chunk: () => '[name].js',
      css: () => '[name].js',
      img: () => '[path][name].[ext]',
      font: () => '[path][name].[ext]',
      video: () => '[path][name].[ext]'
    }
  }
```
参考：[nuxt 2 で静的ファイルの生成時にファイル名を固定したい。](https://qiita.com/amishiro/items/c17818b46e50e409a1eb)

# secretの登録

FTPDeployActionに必要な環境変数を4つsecretに登録します

        secrets.FTP_HOST          :    FTPのhost
        secrets.FTP_USERNAME      :    FTPのユーザー名
        secrets.FTP_PASSWORD      :    FTPのパスワード
        secrets.FTP_REMOTE_ROOT   :    FTPのデプロイ先のディレクトリ(Document Rootからの相対パス)


# main.ymlの作成
main.ymlを.github/workflows/配下に作成します

```yml:main.yml
name: buildAndDeploy

on:
  push:
    branches:
      - master

jobs:
  build-deploy:
    runs-on: ubuntu-18.04
    steps:
    - uses: actions/checkout@v2

    - name: setup node
      uses: actions/setup-node@v1
      with:
        node-version: '10.x'

    - name: Cache dependencies
      uses: actions/cache@v1
      with:
        path: ~/.npm
        key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
        restore-keys: |
          ${{ runner.os }}-node-

    - name: install
      run: npm ci

    - name: test
      run: npm test

    - name: generate
      run: npm run generate

    - name: commit
      run: |
        git config --local user.name "github action"
        git add .
        git commit -m "generate pages by github action"
        
    - name: Push changes
      uses: ad-m/github-push-action@master
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}

    - name: Deploy via FTP
      uses: SamKirkland/FTP-Deploy-Action@3.0.0
      with:
        ftp-server: ${{ secrets.FTP_HOST }}
        ftp-username: ${{ secrets.FTP_USERNAME }}
        ftp-password: ${{ secrets.FTP_PASSWORD }}
        git-ftp-args: --remote-root ${{ secrets.FTP_REMOTE_ROOT }}
        local-dir: dist/
```
## main.yml内の解説
デプロイまでの流れとしては以下の通りです

 1. pushを検知
 2. nodeのインストール
 3. nuxt generate
 4. 生成された/distをgithubにpush
 5. FTP Deploy AccessでdistフォルダをFTP

### nodeのインストール

```yml
    - name: setup node
      uses: actions/setup-node@v1
      with:
        node-version: '10.x'
```
### nuxt generate

```yml
    - name: generate
      run: npm run generate
```

### commit

```yml
    - name: commit
      run: |
        git config --local user.name "github action"
        git add .
        git commit -m "generate pages by github action"
```

### push

```yml
    - name: Push changes
      uses: ad-m/github-push-action@master
      with:
        github_token: ${{ secrets.GITHUB_TOKEN }}
```


### Deploy

```yml
    - name: Deploy via FTP
      uses: SamKirkland/FTP-Deploy-Action@3.0.0
      with:
        ftp-server: ${{ secrets.FTP_HOST }}
        ftp-username: ${{ secrets.FTP_USERNAME }}
        ftp-password: ${{ secrets.FTP_PASSWORD }}
        git-ftp-args: --remote-root ${{ secrets.FTP_REMOTE_ROOT }}
        local-dir: dist/
```


## 問題点
・FTP Deploy Actionが、pushされたディレクトリからのデプロイを前提していたので、github actionsの仮想マシンでビルド後githubにpushするようにしています。なので毎回手元でのpushは、git pullをしていない限り、リモートブランチとのマージを行う形になります。問題なくCIは動くので、今はこれで運用していますが、トラブった時にめんどくさいかもしれません。もしかしたらFTP Deploy Actitonではなくgithub actionsのVMからftpコマンドを叩いたほうがいいかもしれません。

・generateされるファイルがハッシュ値を含まないようにしているので、ある程度は上書きされますが、/_nuxt/static/内などいくつかのファイルは都度生成されて、たまっていってしまいます。FTP Deploy Actionでは作成か上書きのみしかできないので、デプロイするたびに不要なファイルがたまっていきます。