FirebaseUIを日本語化する

Nuxt.jsで使っているfirebaseを8→9に上げる際に、合わせてfirebaseuiのバージョンも最新にした。これまでFIrebaseUIの日本語化に firebaseui-ja - npm を使用していたが、3年以上メンテナンスされていなかったので、オフィシャルな方式に変更した。

開発環境

開発環境はM1 Macでdocker化した環境

対応方法

公式を見ると、自前でビルドする方法が載っているのでこちらを参考にした。 https://www.npmjs.com/package/firebaseui-ja

github.com

ざっくり手順を書くと

git clone https://github.com/firebase/firebaseui-web.git
npm install
npm run build build-npm-ja
import firebaseui from 'firebaseui/dist/npm__ja' で利用する

失敗パターン

最初にうまくいかなかった方法のまとめ。

今回ビルドが必要なので、dockerのマルチステージビルドでファイルを生成してから本体にコピーする形にした。

ベースイメージは、node:16.14-alpine

FROM node:16.14-alpine AS builder

WORKDIR /var/builder
RUN apk add \
  git \
  bash \
  openjdk11-jre-headless
RUN git clone https://github.com/firebase/firebaseui-web.git
WORKDIR /var/builder/firebaseui-web
RUN git checkout refs/tags/v6.0.1
RUN npm install -g npm@8.5.5
RUN npm install
RUN npm run build build-npm-ja

FROM node:16.14-alpine
# ...

COPY --from=builder /var/builder/firebaseui-web/dist/npm__ja.js $BASE_PATH/node_modules/firebaseui/dist/npm__ja.js

# ...

試した結果

まず、alpineでgitが入っていないので追加。

apk add git

特定バージョンをインストールするためにcheckout後にタグを指定する。

git checkout refs/tags/v6.0.1

npm install をすると、package.jsonに書かれている

"prepublish": "npm run test && cp -r dist demo/public"

も動くため、npm run testが実行される。

ちなみに、npm run testの定義は

"test": "npm run build && npm run generate-test-files && ./buildtools/run_tests.sh"

このまま、npm run testが実行されるとエラーになる。エラーになってもnpm run buildだけなら動くので最終的に生成したいファイルは作られるが、自動化する場合は途中でエラーになると困る。

エラーの解消を試みる

[Closure Templates Error] Java (JRE) is needed!

Javaが必要なので入れる。

apk add openjdk11-jre-headless

Javaを入れると先に進むが、Sassのdeprecateエラーがたくさん出る。エラーではないのでいったんスルー。今度は

sh: ./buildtools/generate_test_files.sh: not found

というエラーが出る。

ファイルはあるので、最初分からなかったが、generate_test_files.shの中身が、#!/bin/bashなので、bashも追加が必要。

apk add bash

再度、npm run testを実行。

python: command not found
google-chrome: command not found

pythonとgoogle-chromeも必要。。 pythonは入れられるが、google-choromeはarm64のパッケージがないので入れられない。

これ以上がんばってビルドを通してもビルド時間が長くなりすぎそうだったので方向転換。

成功パターン

最終的に実行したいのは

npm run build build-npm-{LANGUAGE_CODE}

なので、

npm install後の、prepublishをスキップすることにした。

一時的なスキップは下記でできる。

npm set-script prepublish ""

最終的な Dockerfile はこちら

FROM node:16.14-alpine AS builder

WORKDIR /var/builder
RUN apk add \
  git \
  openjdk11-jre-headless
RUN git clone https://github.com/firebase/firebaseui-web.git
WORKDIR /var/builder/firebaseui-web
RUN git checkout refs/tags/v6.0.1
RUN npm install -g npm@8.5.5
RUN npm set-script prepublish ""
RUN npm install
RUN npm run build build-npm-ja


FROM node:16.14-alpine
# ...

COPY --from=builder /var/builder/firebaseui-web/dist/npm__ja.js $BASE_PATH/node_modules/firebaseui/dist/npm__ja.js

# ...

テストを通さないはどうかというのはあるが、firebaseui自体では通っているものなので今回はこの形とした。

ほたてメモ

日々学んだことをメモメモ