Vue CLIとFirebaseでサイトを作った（その2）

さて、前回ではどういう構成でサイトを作成するかまとめた訳だけど、早速必要なツール類をインストールしていく。もしかしたらこのシリーズ記事の中では一番長い話になるかも。
尚、ここではNode.jsなど基幹となるツールのインストールから書いているけど、すでに導入済の方は読み飛ばしてもいいでしょう。その際は、各ツールのバージョンなどに注意すればいいと思う。
また、記事内では仮想PC（HyperV）の画面で紹介している部分もあるのでご了承ください。
例によってそれぞれの技術は深く掘り下げないのでよろしく。
基本的にはWindows環境での例だけど、Macでも大きな違いは無いと思います。

Node.js、yarn、Vue CLI、Firebase CLIのインストール

なにはともあれNode.js。
Node.jsやyarnのインストールにはChocolateyというWindows向けのパッケージマネージャも利用できる。
個人的にはこれは単にインストーラを集めただけとしか思ってない（恩恵を受けたことがない…）ので、ここでは個別にインストーラを用意して準備していく。

Node.jsのインストール

記事執筆時、Node.jsのLTSが12に上がった。この時、Firebase functionsのNodeのバージョンはまだ8…。 12でも問題ないのかもしれないけど、ここではデプロイが成功しているバージョン10のNode.jsを使っていくよ。
古いバージョンはここからダウンロードできる。

インストーラ、Node-v10.17.0-x64.msiをダウンロード。モジュールの場所やパスを自分でコントロールしたい方はZIP版でもいいかも。全てデフォルトでインストールした。

yarnのインストール

yarnはnpmと互換のパッケージマネージャ。モジュールのダウンロードが速い。
…というより、複雑なnpm scriptの実行も速い気がするんだけど気のせいですかね。
ともあれ、プロジェクト毎のモジュールを管理するには都合のよいお気に入りのパッケージマネージャ。

Stable版をダウンロードしインストール。

Vue CLIのインストール

Vue CLIはVueプロジェクトについて色々便利な機能を網羅するコマンドラインツール。難しい事を考えなくてもCSSプリプロセッサ、Babel、WebPackによるウェブ向けビルド環境が手に入る。
コマンドプロンプトでnpm install -g @vue/cliと入力し実行。

Firebase CLIのインストール

Firebaseはコマンドラインツールによって管理される。これもnpmでインストールする。
なんかもうnpmってウェブ界隈（それ以外でも）ではなくてはならない存在なんすね…。個人的にはもうちょっとスマートなパッケージリポジトリ（？）が出てきてほしいと思う今日この頃…
コマンドプロンプトでnpm install -g firebase-toolsと入力し実行。

さて、問題なければ以下のような感じでツール類が揃う。

う～ん。どうでもいいけどバージョン確認のオプションって統一してほしいな。それぞれ美意識が違うんだろうからしょうがないのかもしれないが。

プロジェクト作成

さて、デプロイする環境は最低限揃ったので、プロジェクトを作っていこう。

Firebaseプロジェクトの作成

ウェブサイトのバックエンドとなるFirebaseプロジェクトを作ろう。
Googleのアカウントさえあれば無料のSparkプランでプロジェクトをいくらでも使える。 Sparkプランは、アプリで本当に商売をするときに必要なもの以外はほぼ揃っているし、従量部分の制限も緩い。
Googleアカウントにログインした状態でFirebaseにアクセスすればコンソールへの入り口があると思う。

コンソールに入ったら、プロジェクト作成ボタンがあるのでそこから作成していく。
作成といってもここでやることはプロジェクトに名前を付けるぐらい。ここでは「eqliquid-example」とした。

名前をつけた後はGoogle Analyticsと接続するかと聞かれるので、Analyticsのアカウントを持っていればつないでもいいと思う（後からでも接続できます）。
以上でウェブコンソールでやることはとりあえず終了。簡単！

プロジェクトディレクトリの作成

続いてローカル側にプロジェクトのディレクトリを用意する。
Vue CLIには対話式にプロジェクトを作っていくオプションが用意されている。
コマンドプロンプトにてプロジェクトディレクトリを作成したい場所でコマンドを実行。
ここではプロジェクトディレクトリ名を「example」とし、vue create exampleとした。以下のように対話が開始されただろうか？

基本的にYes/No選択か項目選択、複数項目の選択で進んでいく。項目選択は上下キーで。複数の選択はスペースキーで行う（*印が付く）。 Linuxのインストール画面を思い出します。
選択は全部デフォルトでもいいんだけど、好みによって構成を変えていく。
その際は最初の質問でManually select featuresを選ぶ。
ここでは

JavaScriptの開発はTypeScriptを使用
Babelによるポリフィル
CSSプリプロセッサはnode-scssを使用

が主な選択。JavaScript開発ではTypeScriptではないほうがハマりが少ないが、元FLASHerなので…。型付したいんです。
Babelは入れたほうがいい。筆者の環境では最新のFireFoxでもWarningが大量にでた。っていうかもしかしてES6界隈では常識ですか？
ともあれ、最終的に以下のような感じ。

行頭に「?」が付いた行の緑文字が選択した項目。
Vue CLIのバージョンによっては質問項目が違うかもしれない（というかVerによって結構変わる）。その際はケースバイケースで。
JSXは使う予定はないけど流れでYesにしてしまった。
「Where do you prefer placing config…」のところでは各モジュールの設定をpackage.jsonにするかコンフィグファイルとして書き出すかを選択する。
ここは個人の好みが大きいと思う。個人的にはpackage.jsonで完結するのが好みだが、それも限界がありそう…なのでここでは各コンフィグファイルへの出力を選んだ。
最後の質問はこのプロジェクト設定を保存するかどうか。仕事で毎回同じプロジェクトを大量に扱うなら保存してもいいかも。

さて、準備ができたのでプロジェクトディレクトリに入ろう。
cd example

Firebaseへデプロイするための準備

Firebaseにログイン

今使っているPCで初めてFirebaseを利用するならまずログインする必要がある。
これは実に簡単で、コマンドプロンプトでfirebase loginするだけ。
すると既定のブラウザが開き、OAuth認証画面が表示される。

Firebaseプロジェクトを作った時と同じGoogleアカウントで許可すると、今使ってるPCのFirebase CLIと紐づけされるわけですね。
すでに紐づいている場合は「Already logged in as アカウント」と表示される。
…この認証ってどこで管理されてるのか筆者はわかってません。たぶんGoogle Cloud Platform内じゃないかと思ってるんだけど…詳しい人おしえてくださいー。

FireBaseの初期設定

Vue CLIの時と同じように対話型のインターフェイスが用意されている。
コマンドプロンプトにてプロジェクトディレクトリでfirebase initと入力、実行。下記のような画面が表示される。
ちょっとわかりづらい部分もあるので、Vue createの時より細かく解説します。

「?Which Firebase CLI features do you want to set up for this folder?」ではFirebaseの機能のうちどれを使うかを選ぶ。
今回はフォームを設置する予定なので「Functions」と、静的なウェブサイトを提供する為に「Hosting」を選択する。
「? Please select an option:」ではすでに存在するFirebaseプロジェクトを指定するかどうか。さっきコンソールでプロジェクトを作ったので、Use an existing projectとし、続いての質問でeqliquid-exampleを選んでいる。

Functionsの設定で、言語にTypeScriptを選びTSLintを使わない設定としている。ここはお好みで。TypeScriptに不慣れならJavaScriptでもいいでしょう。
「? Do you want to install dependencies with npm now?」では開発に必要なものをインストールするかどうか。
ようするにnpm installなんですが、いずれは必要なのでYesにしときましょう。
これでプロジェクトディレクトリ/functions/node_modulesに必要なものが揃います。

Hostingの設定では、ビルドされたファイル群がどこにあるかを指定する。Vue CLIではデフォルトで「dist」ディレクトリにファイル群が集まるので、distを指定している。
「? Configure as a single-page app」ではYesを選択。index.html以外がリクエストされたときリライトしてくれます。多分。

以上でFirebaseへデプロイする環境が整った。

Functions
Firebaseの機能選択でFunctionsを追加するとプロジェクトディレクトリにfunctionsが追加されているのがわかると思う。
この中にもpackage.jsonがあり、Firebaseにデプロイする際はFunctionsが個別にビルドされてしかるべきところにデプロイされる。
つまり、FirebaseのnodeサーバーはここでビルドされたJavaScriptが実行されるということ。よくできてるなあ。

Firebaseにデプロイ

先ほどのfirebase initでdistディレクトリに仮のindex.htmlができているはず。ひとまずこれをdeploy（アップロードみたいなもの）してみよう。
…とその前にfunctions/src/index.tsに少し手を加えておこう。

./functions/src/index.ts

// import * as functions from 'firebase-functions';

// // Start writing Firebase Functions
// // https://firebase.google.com/docs/functions/typescript
//
// export const helloWorld = functions.https.onRequest((request, response) => {
//  response.send("Hello from Firebase!");
// });

1行目を単にコメントアウトしただけ。
というのも、TypeScriptのコンパイラは未使用のモジュールがあるとエラーで停止してしまう。ここはいずれ復活させることになる。

さてデプロイしよう。
デプロイはコマンドプロンプトでfirebase deployだ。
問題なくアップロードされれば以下のように「Deploy Complete!」と表示される。

Hosting URL: https://eqliquid-example.firebaseapp.com と表示されているのでアクセスしてみよう。
あなたの予想に反して以下の画面が表示されただろうか？

長くなってしまったが、これでVueでの開発とFirebaseへのデプロイ環境がそろった。
Vueでコンテンツ作ったらyarn buildしてfirebase deployするだけ。

つづく

以下、注意点

Functionsのデプロイが遅いんだけど…

Firebaseのnodeサーバーで実行されるスクリプト以外の静的なファイルのみアップロードするにはfirebase deploy --only hostingとします。逆にFunctionsのスクリプトだけアップロードするならfirebase deploy --only functionsです。

error functions@: The engine “node” is incompatible with this module. Expected version “8”. Got “10.16.3”

Firebaseのnodeサーバーのバージョンは8系みたいです（執筆時）
functions/package.jsonをいじりましょう

  "engines": {
    "node": "10"
  },

デフォでは「8」になってるかもしれません。今回はバージョン10系node.jsを使用しているので10にしてやります。

? Your connection to the default yarn registry seems to be slow. Use https://registry.npm.taobao.org for faster installation? (Y/n)

モジュールがダウンロードされる際、上記の質問があるかもしれません。速いレジストリを選んでよいかって事なので単にYesでOK。

Windowsのセキュリティアラートが表示される

node.jsが外部にアクセスする際に表示されます。適宜許可にしましょう。

Vue、TypeScriptのビルドが遅い

本記事では開発までおこなってませんので多分関係ないですが、Windows10のリアルタイム監視ではファイルの改ざんもチェックされます。
Windows10の設定画面「ウィルスと脅威の防止」画面で「設定」を開き「除外」「除外の追加」でプロジェクトディレクトリを追加しときましょう。

firebase deployが成功しない

筆者の環境ではHyperVからのdeployができませんでした。たぶん内部の仮想スイッチでNATがうまいこといってないんだと思う。
どうしてもデプロイできないならネットワーク環境も疑った方がよさそう。