Help us understand the problem. What is going on with this article?

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

utautattaro
世界中の端末で自分の書いたコードを走らせることが夢です
https://utautattaro.com
playcanvas
"PlayCanvasは、ブラウザ向けに作られたWebGL/HTML5ゲームエンジンです。PlayCanvas運営事務局は日本国内でのPlayCanvasの普及を目的に活動しています"
https://playcanvas.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away