はじめに

firebaseuiを多言語で使うには各言語用にビルドされたものが必要で、<script>タグでCDNから取得する場合は手間ではないんだけど、node環境などimportして使いたければ自前でビルドする必要があって面倒くさい。
https://github.com/firebase/firebaseui-web#developer-setup

パッケージの更新や、日本語以外の対応が必要になった際に動きやすいよう、Dockerでfirebaseuiのビルド環境を作った。

なお、firebaseuiを日本語化する方法を解説した記事で、firebaseui-ja なるnpmパッケージを使っているのをちょくちょく見かけるけど、あれはFirebaseの公式パッケージではない。 2年前の初回登録以降メンテナンスはされていないようで、公式のfirebaseuiとはけっこうバージョンが離れている。
https://www.npmjs.com/package/firebaseui-ja

Dockerfile

FROM node:15-buster-slim

WORKDIR /node
RUN mkdir -p /usr/share/man/man1
RUN apt-get update \
    && apt-get install -y git curl default-jdk
RUN npm install -g n
RUN n 8.17.0
RUN git clone --depth 1 https://github.com/firebase/firebaseui-web.git

ポイント

Docker環境を作る際に引っかかったポイントは次の２点。

最新のnode環境では、node-sass がビルドエラーになる

firebaseui-webが依存しているgulp-sass:4.1.0が、node-sass:4.8.3に依存しており、最新のnode環境ではビルドできない。

node-sass のバージョンを上げるか、nodeのバージョンを下げる必要がある。
今回はnodeのバージョンを下げることで対応した。

node-sass:4.8.3 に対応させるためには、node 8 まで下げなければいけないらしい。
node8系の最終バージョンである8.17.0にダウングレードした。

RUN npm install -g n
RUN n 8.17.0

[参考]
https://qiita.com/ymasaoka/items/ab18c49a9074973ef75a

jdkが必要

firebaseuiのビルド条件は次のように指定されている。

Node.js (>= 6.0.0)
npm (should be included with Node.js)
Java SE Runtime Environment 8

なので、default-jdk をインストールしようとしたのだけど、うまくいかない。
対応策を調べてみると、/usr/share/man/man1 というディレクトリを作成すると問題が回避できるらしいので、この処理をapt-getの前に行う。

RUN mkdir -p /usr/share/man/man1
RUN apt-get update \
    && apt-get install -y git curl default-jdk

[参考]
https://qiita.com/SHinGo-Koba/items/a73e5f345c22c5ebbf96

ビルドする

環境が整えば、あとはマニュアル通りの手順でビルドできる。

npm install
npm run build build-npm-ja

ja の部分を好きな言語コードに変更すれば、各言語版ができる。

distディレクトリの中に、npm__ja.js が作成されているので、これをimportして使う。
typescript用の型定義index.d.tsも作られている。

# ls ./dist/
externs  index.d.ts  npm__ja.js

import firebaseui from './npm__ja'

できあがり！