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

📆December 30, 2019🔖 Github ActionsVue.js

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

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

  • Firebase Hosting + Cloud Function だとリクエスト数の限界がある
  • Netlify だと割とお高めな課金が必要
  • などと様々な壁にぶち当たりました。

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

    整理すると、

  • basic 認証がかけた検証環境がほしい
  • 自動でビルド&デプロイしたい
  • できれば課金なしで
  • の 3 つの要件を満たす手段を考えた結論が GitHub Actions + git-ftp だったというわけでした。

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

    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 つ減ったのでこっちの方が良い気がする。使い倒していきたい。