Zenn
Closed5

Docker で Firebase CLI 環境を作ってみる

Docker
Firebase
ピン留めされたアイテム
nagakutanagakuta

なんで？

このスクラップ で Docker にある程度慣れた。
Firebase での開発環境を構築するときに、なるべく PC を汚さないように。

環境

  • Macbook Air (M1, 2020)
  • Docker for Mac: 3.3.1
nagakutanagakuta

Container を作る

まずはコレから。

.devcontainer/firebase/Dockerfile
# Base image
FROM node:12.22.1-buster-slim

# Maintainer
LABEL maintainer="nagakuta <xxx@example.com>"

# Workdir
WORKDIR /workspace

# Install Firebase CLI
RUN npm config set registry http://registry.npmjs.org && \
    npm install --production -g firebase-tools --verbose
.devcontainer/docker-compose.yml
version: '3.8'
services:
  <project_name>:
    build:
      context: .
      dockerfile: firebase/Dockerfile
    volumes:
      # Firebase files
      - ../functions:/workspace/functions:cached
      - ../public:/workspace/public:cached
      - ../.firebaserc:/workspace/.firebaserc:cached
      - ../firebase.json:/workspace/firebase.json:cached
      - ../firestore.indexes.json:/workspace/firestore.indexes.json:cached
      - ../firestore.rules:/workspace/firestore.rules:cached
      - ../remoteconfig.template.json:/workspace/remoteconfig.template.json:cached
      - ../storage.rules:/workspace/storage.rules:cached
      - ../credentials:/workspace/credentials:cached
      # VSCode settings
      - ../.vscode:/workspace/.vscode:cached
    command: /bin/sh -c "while sleep 1000; do :; done"
    env_file:
      - firebase/.firebase.env

環境変数は .devcontainer/firebase/.firebase.env に載せる形式にした。

nagakutanagakuta

Firebase CLI を使う

とりあえず Container は作れたっぽいので、中に入って Firebase CLI を動かせるようにする。
公式のリファレンス を読みつつ Firebase にログインしたり Project を初期化したり。

$ firebase login:ci
$ firebase init
nagakutanagakuta

Cloud Functions for Firebase 周りをいい感じにする

Cloud Functions for Firebase は TypeScript で実装したい。
なので、TypeScript の設定をガリガリと書いていく。

まずは TypeScript の設定。

functions/tsconfig.json
{
  "compilerOptions": {
    "module": "commonjs",
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "outDir": "lib",
    "sourceMap": true,
    "strict": true,
    "target": "es2017",
+   "esModuleInterop": true,
  },
  "compileOnSave": true,
- "include": ["src"]
+ "include": ["src", "__tests__"]
}

__tests__ にて Jest の describe がうまく認識されない問題があったが、include に __tests__ を含めることで解決できた（参考）。

functions/tsconfig.dev.json
{
-  "include": [
-    "eslintrc.js"
-  ],
}

次に ESLint の設定、と言ってもこちらも firebase init で生成される .eslintrc.js を JSON で書き直したくらい。

functions/.eslintrc.json
{
  "env": {
    "es6": true,
    "node": true,
    "jest/globals": true
  },
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "google"
  ],
  "parser": "@typescript-eslint/parser",
  "parserOptions": {
    "project": ["tsconfig.json", "tsconfig.dev.json"],
    "sourceType": "module"
  },
  "ignorePatterns": [
    "/lib/**/*" // Ignore built files.
  ],
  "plugins": ["@typescript-eslint", "import", "jest"],
  "rules": {
    "import/no-unresolved": "off"
  }
}

そして Prettier 。まずはインスコ。

$ npm install --save-dev prettier eslint-config-prettier

そして設定。こちらは ESLint の設定に少し修正を加えた。

functions/.eslintrc.json
{
  ...
  "extends": [
    "eslint:recommended",
    "plugin:import/errors",
    "plugin:import/warnings",
    "plugin:import/typescript",
    "google",
+   "prettier",
+   "prettier/@typescript-eslint"
  ],
  ...
}

そして、最後に VSCode での Prettier 拡張のための設定。

.vscode/settings.json
{
  "terminal.integrated.shell.linux": null,
  "files.exclude": {
    "**/.vscode/": true,
    "**/node_modules/": true
  },
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "editor.wordWrap": "bounded",
  "editor.rulers": [80],
  "editor.wordWrapColumn": 80,
  "javascript.format.enable": false,
  "typescript.format.enable": false,
  "json.format.enable": false,
  "json.schemaDownload.enable": true,
  "eslint.alwaysShowStatus": true,
  "eslint.format.enable": true,
  "eslint.debug": true,
  "prettier.singleQuote": true,
  "prettier.printWidth": 80,
  "prettier.prettierPath": "/workspace/functions/node_modules/prettier",
  "[typescript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[json]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  }
}

prettier.prettierPath をきちんと指定しないと Pretter での lint が効かない罠があった。

nagakutanagakuta

Firebase Local Emulator Suite を動かすために

Firebase にてローカル環境での動作確認を行うために必要な Firebase Local Emulator Suite を利用しようとしたら、Firestore の emulator にて「Firestore Emulator has exited because java is not installed」と言われてしまった。

ここ と ここ 、ここを参考にしながら OpenJDK をContainer 内にインスコする。

.devcontainer/firebase/Dockerfile
# Base image
FROM node:12.22.1-buster-slim

# Maintainer
LABEL maintainer="nagakuta <xxx@example.com>"

# Workdir
WORKDIR /workspace

+# Install Java JRE
+RUN mkdir -p /usr/share/man/man1 && \
+    apt-get update && \
+    apt-get install -y default-jre --no-install-recommends && \
+    apt-get clean -y && \
+    apt-get autoremove -y && \
+    rm -rf /var/lib/apt/lists/*

# Install Firebase CLI
RUN npm config set registry http://registry.npmjs.org && \
    npm install --production -g firebase-tools --verbose
このスクラップは2021/05/03にクローズされました