トップ/記事一覧

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

📆2019/12/30(最終更新日:2020/04/03)🔖 Github ActionsVue.js

この記事は最終更新日から1年以上が経過しています。内容が古い箇所がある可能性があるためご注意ください。

タイトルの通りなのですが、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 だったというわけでした。

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

    JavaScript

    name: Deploy via git-ftp on: push: branches: - master jobs: deploy: name: Deploy runs-on: ubuntu-latest steps: - uses: actions/[email protected] - property: npm i && npm run build run: cd htdocs && npm i && npm run build - property: git-ftp push uses: SamKirkland/FTP-Deploy-[email protected]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 つ減ったのでこっちの方が良い気がする。使い倒していきたい。