やること

firebase + Vue.js の開発を Windows10 + WSL2 + Ubuntu 20.04LTS でやります。Windows での node のバージョン管理に若干不安があるので WSL2 でやってみました。特に不便はないというか、むしろ良い感じがしてます。

注：firebase v8 + vue2 を使っています。

事前準備

WSL2 + Ubuntu のインストール

Windows 10 用 Windows Subsystem for Linux のインストールガイド

スタートメニューから Ubuntu のシェルを起動できるようになればOKです。

Firebase を使えるようにする

Firebase で hello world と表示するページを作る方法

プロジェクトを作成する直前まで進めば問題なし。

Functions を使わなければ、無料プランの Spark で使えます。下記の記事の範囲では、有料プランにする必要はありません。Functions を使う場合は有料プランの Blaze にする必要がありますが、無料枠が設定されています。2021年現在の Blaze の無料枠はかなり大きいので、小規模のアプリなら無料枠内で収まることが多いです。

Firebase 料金プラン

必要なツールを Ubuntu 側にインストール

npm のインストール

WSL2/Ubuntu のシェル上で実行します。

.sh

$ sudo apt update -y
$ sudo apt upgrade -y
$ sudo apt install npm
$ npm -v
6.14.14
$ node -v
10.24.1
$ yarn -v
1.22.11

node はデフォルトで 10 がインストールされるぽい。バージョンを変更したい場合は n とか nvm とかを使います。ここでは n でやってみました。

.sh

$ npm install -g n
$ n stable
$ n ls
node/14.17.4
$ node -v
14.17.4

npm や n で Permission denied と言われたら sudo 付きで実行します。 n は副作用が結構あるので、先にどういう動作をするコマンドなのか、調べておくこと推奨です。

firebase-tools のインストール

.sh

$ npm install firebase-tools -g
$ firebase --version
9.16.0
$ firebase login
logged in as hogehoge@gmail.com

firebase login すると、Windows 側でブラウザが起動して google にログインするか、もしくはログイン中のアカウントのいずれかを選択するように言われます。

そのあと、上のような画面がでて firebase がいろいろ権限を使うよ？と言われるので「許可」を押せばブラウザで下記画面がでて login できます。

上の画面がでたら、Ubuntu 側に戻ると、選択したアカウントでログインしたよ、というメッセージが出ているはずです。これで firebase deploy とかできるようになります。

vue のインストール

.sh

$ npm install vue-cli -g
$ vue -V
2.9.6

Vue で作成したプロジェクトを firebase に deplpy

Vue のプロジェクトを作成する

あとは、基本下記の記事の通りです。yarn を使っているところだけ違います。

VueアプリをFirebaseに爆速デプロイ!

.sh

$ vue init webpack myproject
? Project name myproject
? Project description My First Project
? Author BBLED
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) yarn

最後のところ、WSL2 + Ubuntu では npm install でも動きましたが、mac とか
WSL2 ではない ubuntu ではうまく動かないことがあったので、yarn で統一してやってます。yarn を選んだ場合は、以後のパッケージの追加は yarn add や yarn install で行う必要があります。

Vue プロジェクトのローカルでの動作確認

.sh

$ cd myproject
$ yarn start
... たくさんメッセージがでる
Your application is running here: http://localhost:8080

成功すれば http://localhost:8080 にアクセスすれば、下記画面が表示されるはずです。

ビルド

firebase のプロジェクトの初期化をする前にしておく必要があります。

.sh

$ yarn build

node のバージョンが 14 だと、Warning: Accessing non-existent property というワーニングが大量に表示されるかもしれませんが、実害はないので無視してよさそうです。ワーニングがどうしても嫌なら、node 12 あたりを使うと出なくなるようです。

firebase のプロジェクトを初期化

ubuntu 側に戻って、myproject 内で下記のコマンドを実行します。

.sh

$ firebase init hosting

こんな画面が出るので、カーソルキーを Create a new project に合わせて Enter を押します。すでに作成済みのプロジェクトを使う場合は Use an existing project を選びます。

? Please select an option: Create a new project
i  If you want to create a project in a Google Cloud organization or folder, please use "firebase projects:create" instead, and return to this command when you've created the project.
? Please specify a unique project id (warning: cannot be modified afterward) [6-30 characters]:
 bbled-sample-1
? What would you like to call your project? (defaults to your project ID)
✔ Creating Google Cloud Platform project
✔ Adding Firebase resources to Google Cloud Platform project

プロジェクト名は URL の https://xxxxxx.web.app の xxxxxx の部分に使われます。すでに誰かに使われている ID は使えません。また、一度設定すると変更はできません（削除して作り直すしかない）。ここではプロジェクト名を bbled-sample-1 としています。

project id は何も入れずに enter を押すと、プロジェクト名と同じになります。プロジェクト名が長すぎると、コマンドラインから入力するときに面倒なので、project ID という（自分がコマンドラインとかで打つ時にだけ使える）短い別名を付けることができます（多分）。

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? No
? Set up automatic builds and deploys with GitHub? No
✔  Wrote dist/404.html
? File dist/index.html already exists. Overwrite? No
i  Skipping write of dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

そのあとも、いろいろお聞かれるので入力していきます。

public directory は dist と入れます。このディレクトリは上のほうでやった yarn build で作成されているはずです。

少し注意が必要なのは、public directory は firebase init を実行したディレクトリからの相対パスを書く必要があるようです。何らかの理由（たとえば functions も一緒に使うとか）で、myproject の上のディレクトリで firebase init しているときは、パスを myproject/dist とする必要があります。

dist/index.html は yarn build で作成済みなので、オーバーライドはしないように N とします。そのほかはお好みで。

ローカルでの動作確認

.sh

$ firebase serve --only hosting
✔  hosting: Local server: http://localhost:5000

ブラウザで http://localhost:5000 にアクセスすると、yarn start の時と同じ画面がでるはずです。

なお、ローカルでのデバッグ時には firebase serve だとビルドはしてくれないので、特段の理由がなければ yarn start でやるほうが良さそうです。

デプロイ

.sh

$ firebase deploy --only hosting
=== Deploying to 'bbled-sample-1'...
...
✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/bbled-sample-1/overview
Hosting URL: https://bbled-sample-1.web.app

これで https://bbled-sample-1.web.app にアクセスすれば、ローカルで確認したページと同じものが表示されるはずです。

おまけ

WSL2 で開発する場合、適当にたとえば

.sh

$ ln -s /mnt/c/Users/MyAccount/Documents/github ~/github

とかしておくと、cd ~/github で Windows 側の自分のアカウントの Documents/github 以下に行けるので、そこで作業すれば Windows 側の VSCode とか使って作業もできます。

clone したプロジェクトの初期化

github などにある firebase のレポジトリを clone したときに npm install を使うと、環境によってうまく動かないことが多かったので、yarn add や yarn install を使うほうが良い印象でした。

gcloud コマンドの WSL2 + Ubuntu 20.04LTS へのインストール

下記の通りでさくっといけます。

CloudSDK: Debian と Ubuntu 用のクイックスタート

サーバを起動したまま WSL2 でコマンドを実行したい

Windows Terminal をストアでダウンロードしてくると、タブを複数ひらいて WSL2 のターミナルを複数操作できます。

ls したときに Windows のファイルシステムの色が見づらい

下記を参照のこと。

WSL2 (Ubuntu 20.04LTS) のターミナルで ls したときのディレクトリの表示色を変える

WSL2 のカーソルがたまに消える

消えたら、ウィンドウを最小化して、また元に戻すとカーソルの表示が戻ることがあります。日本語入力をしようとすると消えることがあるぽい？