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ディレクトリ内にハッシュ付きのファイルが増えていくため、差分が分かるように以下コードを追加します

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 で静的ファイルの生成時にファイル名を固定したい。

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/配下に作成します

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のインストール

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

nuxt generate

    - name: generate
      run: npm run generate

commit

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

push

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

Deploy

    - 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では作成か上書きのみしかできないので、デプロイするたびに不要なファイルがたまっていきます。