BETA

ただただDocker Desktop for WindowsからFirebase Hostingにデプロイしたかっただけなんだよなぁ

投稿日:2020-04-02
最終更新:2020-04-08

なにこれ

FirebaseのデプロイをDockerでやろうとしたら面倒だったので忘れてもいいように書き残す。

やりたかったこと

流行りに乗っかってビルドからリリースをDockerでスマートに処してみたかった。

できたこと

  • Dockerfile不要で公式のnodeイメージとpackage.jsonで完結するようになった
  • firebase login対応と2回目以降の認証をスキップできるようになった
  • CI/CDでも多分大丈夫

つまずいたとこ

Firebaseにコンポーネントをデプロイする方法として、nodeにグローバルインストールしたfirebase-toolsのCLIを叩く方法が公式のドキュメントで説明されています。

素直にやれば拍子抜けするくらい簡単ですが、複数環境でいちいちnpm install -g firebase-toolsしたり、CI/CDに突っ込もうとするとなかなか面倒だった。

面倒なこと一覧

  • npx使えばインストール不要でFirebase CLII叩けるかと思いきやインストールされてないとコケる。わざわざDockerfile書いてImage管理したくない
  • 初回の認証で認証後にブラウザにリダイレクトされる。ポートのマッピングが必要
  • Desktop Docker for Windowsでの-vオプションのパスの書式が不明。エスケープは地獄みある
  • 認証済みの設定がどこに保存されるのかが不明

手順

なんやかんやでできた

コンテナの起動

既存のプロジェクトフォルダに移動して、コマンドプロンプトかPowerShellから色々オプションつけてDockerコンテナを起動する。-vでカレントフォルダをマウントするので、Shared Drivesは設定しておく。

docker run -it  -p 9005:9005 -v "$(pwd):/root/.config/configstore" -v "$(pwd):/workspace" -w /workspace node:12 bash  

オプションの説明

-p 9005:9005

npx firebase loginした時にリダイレクトされるのでポートマッピングする。ログイン済なら不要

-v "$(pwd):/root/.config/configstore"

認証情報とかプロジェクト情報等が$HOME/.config/configstore/firebase-tools.jsonに格納されるので、カレントフォルダをDockerコンテナにマウントする。ローカルフォルダは任意の場所でok。

-v "$(pwd):/workspace"

カレントフォルダをDockerコンテナの/workspaceにボリュームマウントする。マウント先は任意。

-w /workspace

Dockerコンテナでの作業ディレクトリを指定。↑のマウント先に合わせる。

-vの"$(pwd):CONTAINER_PATH"について

実はDocker Desktop for Windowsはpwdの出力結果を自動で変換してくれるらしい。便利。

node:12

お好きなイメージで。

コンテナ内での操作

bashのプロンプトになるので続けてコマンド叩く。

firebase-toolsをローカルインストールする

npm install --save firebase-tools  

ドキュメントの-gの代わりに--saveを指定してpackage.jsonに依存関係書き込む。

firebaseにログインする

npx firebase login  

認証用のURLが表示されるのでブラウザで開いてログインするGoogleアカウントを紐付ける。認証が成功すると勝手にlocalhost:9005にリダイレクトされて、/root/.config/configstore/に設定ファイルが作成される。

プロジェクト確認

npx firebase use project YOUR_PROJECT  
npx firebase projects:list  

use projectで任意のプロジェクトを有効化して、projects:listでプロジェクトの一覧とカレントプロジェクトが表示されれば準備ok。

デプロイする

npx firebase deploy # --only hostingとかのoptionつけた方が多分良い  

通常のCLIと同様にデプロイされます。

デプロイ後のローカルフォルダのファイルの扱い

package.json

もし初めてnpm install firebase-tools --saveした場合は、package.jsonのdependenciesに依存関係が追加されます。変更をコミットしておくと、npm installでまとめて依存関係を解消できるようになるので便利です。

firebase-tools.json

npx firebase loginをするとfirebase-tools.jsonが新たに生成されます。/root/.config/configstore/にマウントする事で次回からログインを省略できます。このファイルはCI/CDに組み込む場合にも多分利用できます。

おまけ

ローカル開発からデプロイまで

docker run -it  -p 9005:9005 -p 3000:3000 -v "$(pwd):/root/.config/configstore" -v "$(pwd):/workspace" -w /workspace node:12 bash  

-p 3000:3000もマッピングしておけば、webpack-dev-serverで開発して、ビルド → デプロイの流れも簡単。

そのままデプロイ

docker run -it -v "$(pwd):/root/.config/configstore" -v "$(pwd):/workspace" -w /workspace node:12 npm run deploy  

package.jsonscriptsにデプロイ処理を定義しておけば、ワンラインでデプロイできるので便利。

まとめ

npxが便利だった。知らなくて人生損してた。
少し見直したけどコマンドプロンプトは捨てたい

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

okd.shのTechのフリしたポエム

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう