[2022/2/22更新]無料で！Vue.js + Firebase Hosting + Github Actions でサクッとPWA開発環境を整える

私はiOSアプリ開発がメインのエンジニアなのですが、PWAに少し魅力を感じています。というのも昨今Appleがアプリ内課金に関するレギュレーションを緩和したというアナウンスがありましたが、依然としてAppleが提供するアプリ内課金と同等なユーザー体験を提供するのは難しいからです。そのため、PWA、つまりアプリじゃないけどアプリっぽいものがあればその制約を回避できると考えたからです。。そこで本記事ではそんなアプリエンジニアがサクッと１からPWAの開発環境を整える初期設定を紹介します。技術選定は、Vue.js(Swift UI に近い宣言的なView開発ができる)、PWA(アプリっぽくなる)、Firebase Hosting(サーバー代無料にしたい)、Github Actions(最近できるようになったらしい。GitHubでプルリクを作るとプレビュー用のサイトを一時的に公開できるようにしてくれる！！！嬉しい)となっています。もちろんローカル環境でも動きますが、あわよくばプロダクション環境でもパソコン上でもなく自分のiPhoneなどから確認できるようになるのは重要ですよね。

準備

# npm をインストール
brew install node

# firebase CLI をインストール
npm install -g firebase-tools

# Vue.js をインストール
npm install -g vue-cli

これらインストールができたら、
① Firebase HostingのPreviewと連携するためのGithubにログインしてプライベートリポジトリを作成してください。
② 加えて、FirebaseでHosting用のプロジェクトを作成してください。（CLIからもできますが割愛します。）
その後、以下のコマンドでFirebase CLIからログインしてください。

% firebase login
i  Firebase optionally collects CLI usage and error reporting information to help improve our products. Data is collected in accordance with Google's privacy policy (https://policies.google.com/privacy) and is not used to identify you.
? Allow Firebase to collect CLI usage and error reporting information? No
Visit this URL on this device to log in:
https://accounts.google.com/o/oauth2/auth?client_id=*******
Waiting for authentication...
✔  Success! Logged in as ******@gmail.com

プロジェクト用のディレクトリを作成して、その中にVue.js PWAテンプレートのプロジェクトを作成します。

% cd <Your Project Directory>
<Your Project Directory> % vue init pwa
? Generate project in current directory? Yes
? Project name <Your Project Directory>
? Project short name: fewer than 12 characters to not be truncated on homescreens (default: same as name)
? Project description A Vue.js project
? Author *******
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No
  vue-cli · Generated "<Your Project Directory>".
  To get started:
    npm install
    npm run dev
  Documentation can be found at https://vuejs-templates.github.io/webpack

# 関連モジュールをインストール
<Your Project Directory> % npm install

Firebase Hostingを初期化します。

% firebase init hosting

 ######## #### ########  ######## ########     ###     ######  ########
 ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
 ######    ##  ########  ######   ########  #########  ######  ######
 ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
 ##       #### ##     ## ######## ########  ##     ##  ######  ########

You're about to initialize a Firebase project in this directory:
/<Your Project Directory>

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add,
but for now we'll just set up a default project.
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: <Your Firebase Project Name>
i  Using project <Your Firebase Project Name>

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? Yes
✔  Wrote dist/index.html
i  Didn't detect a .git folder. Assuming /<Your Project Directory> is the project root.
i  Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.
Visit this URL on this device to log in:
https://github.com/login/oauth/authorize?client_id=********
Waiting for authentication...
✔  Success! Logged into GitHub as ********
? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) ********
✔  Created service account github-action-******* with Firebase Hosting admin permissions.
✔  Uploaded service account JSON to GitHub as secret FIREBASE_SERVICE_ACCOUNT_***********.
i  You can manage your secrets at https://github.com/*******/*****/settings/secrets.
? Set up the workflow to run a build script before every deploy? Yes
? What script should be run before every deploy? npm ci && npm run build
✔  Created workflow file /<Your Project Directory>/.github/workflows/firebase-hosting-pull-request.yml
? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? master
✔  Created workflow file /<Your Project Directory>/.github/workflows/firebase-hosting-merge.yml
i  Action required: Visit this URL to revoke authorization for the Firebase CLI GitHub OAuth App:
https://github.com/settings/connections/applications/*********
i  Action required: Push any new workflow file(s) to your repo
i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
✔  Firebase initialization complete!

‼　public directoryが dist であることに注意してください
‼　npm ci && npm run build が指定されていることを確認してください

これで一通り準備は完了です。

テストする、　プレビューする

[2022/2/22 訂正ここから]ローカル実行、localhost:5000でデフォルトは表示されます。ローカル実行をするには2種類あります。一つはpackage.jsonからもう一つはfirebaseのコマンドを使う方法です。以下はfirebaseのコマンドです。

# ビルドしたものを実行するので必ずビルドすること
npm run build

# ローカルで起動
firebase emulators:start

ビルドというと変な感じもするかもしれませんが、Webpackという仕組みで、複数のJavascriptファイルをファイルにまとめてページ読み込み時のファイルダウンロード量を軽量化することをビルド、とここでは呼んでいます。サイト高速化につながるということでPWAではかなり重要な要素になってきます。（まとめられたファイルは先程のdistディレクトリに出力され、上記のコマンドではそのディレクトリを参照してサイトを表示するという仕組みです。）逆にいうと開発時はローカルで実行するのでいちいちビルドをする必要はありませんから、以下のコマンドで十分です。

npm run dev

[2022/22 訂正ここまで]
プルリクエストしてプレビューサイトが生成されているか確認します。下記に例を表示しました。

プルリクエストの画面。プルリクをトリガーにしてGithub Actionが動作しています。

赤枠で括った Show all checks をクリックしてください。プルダウンが開くのでDetailsというリンクが出るのクリックしてください。

プレビューサイトのリンクが生成されています。

左側のDeploy Previewをクリックするとプレビュー用のサイトのリンクが表示されます。

以上です。