GitHub Actions で Vue.js のビルドをして FTP サーバー経由で自動デプロイ

タイトルの通りなのですが、Vue.js プロジェクトの検証環境がほしいというお願いをされ、GitHub Actions を使ってビルドとデプロイを自動化してみました。

今までにも CircleCI + Firebase Hosting や Netlify (こちらはサービス内で完結) などでさまざまなビルドデプロイの自動化をやってきたのですが、ここに basic 認証をかけたいという要件が加わり、

などと様々な壁にぶち当たりました。

そこで今回は、GitHub Actions で Vue.js のプロジェクトをビルド、その成果物をすでに借りている XSERVER に git-ftp を使ってファイルを転送し、そこを検証環境として使うという手段を取ることにしました。

整理すると、

の 3 つの要件を満たす手段を考えた結論が GitHub Actions + git-ftp だったというわけでした。

背景が長くなってしまいましたが、以下がサンプルコードになります。

JavaScript
name: Deploy via git-ftp
on: push:
  branches:
    - master
jobs:
  deploy:
    name: Deploy
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@master
      - property:  npm i && npm run build
        run: cd htdocs && npm i && npm run build
      - property:  git-ftp push
        uses: SamKirkland/FTP-Deploy-Action@2.0.0
        env:
          FTP_SERVER: [ServerName]
          FTP_USERNAME: ${{ secrets.FTP_USER }}
          FTP_PASSWORD: ${{ secrets.FTP_PWD }}
          LOCAL_DIR: dist
          REMOTE_DIR: [DirPath]

設定の手間は CircleCI と同じくらいで、使うサービス数が 1 つ減ったのでこっちの方が良い気がする。使い倒していきたい。