🐳

M1 macOS x Docker で Firebase Project の開発環境を構築しよう

2021/05/24に公開

Docker

Firebase

tech

はじめに

2021年4月15日、Apple Silicon に正式対応した Docker for Mac が一般公開され、Apple Silicon な macOS でも Docker による仮想環境の構築や共有をすることが可能になりました。

この記事では Docker for Mac を利用して M1 macOS 上に Docker Container を立て、Firebase Project の開発環境を構築することを目指します。

環境 (2022/07/18 時点)

Macbook Air (M1, 2020)
macOS: Monterey (12.4)
Docker for Mac: 4.10.1 (82475)
Visual Studio Code: 1.69.1
- Remote - Containers: v0.241.3

Docker for Mac の導入

はじめに、Docker for Mac を macOS にインストールします。

ここでは、dmg ファイルからインストールする 方法と Homebrew-cask を利用してインストールする 方法を紹介します。

dmg ファイルからインストールする

こちらから dmg ファイルを直接ダウンロードする
dmg ファイルを開き、ドライバ内の Docker for Mac アプリを /Applications フォルダにコピーする

`Homebrew-cask` を利用してインストールする

Homebrew-cask を利用してインストールするには、

(Homebrew を導入していない場合) Homebrew を導入
Homebrew-cask プラグインを利用して Docker for Mac をインストール

の手順が必要となります。

1. `Homebrew` の導入

こちらを参考に、Homebrew をインストールします。

$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
$ export PATH=/opt/homebrew/bin:$PATH

2. Docker for Mac のインストール

次に、先程インストールした Homebrew のプラグインである Homebrew-cask を利用して Docker for Mac をインストールします。

$ brew install --cask docker

これで Docker for Mac が /Applications にインストールされます。

仮想環境（Container）の設定ファイルを作成

次に、Docker での仮想環境となる Container を構築するための環境を設定します。

`Dockerfile` の作成

まずは、Dockerfile を作成して環境構築の手順を指定します。

.devcontainer/firebase/Dockerfile

# Base image
FROM node:current-buster-slim

# Maintainer
LABEL maintainer="xxx <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

`docker-compose.yml` の作成

次に、docker-compose.yml を作成して Container を build する際に利用するファイルや Volume を指定します。

.devcontainer/docker-compose.yml

version: '3.8'
services:
  <project_name>:
    # (1): 仮想環境をビルドする際に利用する Dockerfile を指定
    build:
      context: .
      dockerfile: flutter/Dockerfile
    # (2): Container へマウントしたいファイルを指定
    volumes:
      - ../${YOUR_PROJECT_DIRECTORY}:/workspace/${YOUR_PROJECT_DIRECTORY}:cached
      # (Optional) VSCode settings
      - ../.vscode:/workspace/.vscode:cached
    command: /bin/sh -c "while sleep 1000; do :; done"
    # (3): 環境変数の定義ファイルを指定
    env_file:
      - firebase/.firebase.env

(1): 仮想環境（Container）をビルドする際に利用する Dockerfile を指定

仮想環境である Container のビルドを行う際に、先ほど作成した .devcontainer/firebase/Dockerfile を参照するように指定します。

(2): Container へマウントしたいファイルを指定

Container へマウントしたいローカルのファイルを指定します。

VSCode で開発を行う場合は、Workspace の設定を Remote Container 内で開いた VSCode にも適用するために、.vscode ファイルを /workspace ディレクトリ配下にマウントします。

(3): 環境変数の定義ファイルを指定

.devcontainer/firebase/.firebase.env に環境変数を定義し、Container で参照できるようにします。

仮想環境（Container）の生成

先ほど作成した Dockerfile と docker-compose.yml をもとに Container をビルドし、その中へ接続します。

ここでは、docker コマンドを使用する 方法と、VSCode の Remote - Containers 拡張を使用する 方法を紹介します。

`docker` コマンドを利用する場合

docker コマンドを利用する場合は、以下のコマンドでビルドと仮想環境への接続を行います。

$ docker compose build
$ docker compose up -d
$ docker exec -it <container_id> /bin/bash

VSCode の `Remote - Containers` を利用する場合

VSCode にて Remote - Containers をインストールする
Remote - Containers の Reopen in Container > From docker-compose.yml をクリック

これにて、Firebase の開発環境を Container として作成することができました。

Firebase CLI を利用して Container 内に Firebase Project の設定ファイル群を作成

Container に接続することができたら、次は Firebase CLI を利用して Firebase Project を作成します。

Firebase へログイン

まず、以下のコマンドを使用して Firebase へログインします。

$ firebase login:ci

コマンドを使用すると URL を開くよう指示されるので、ブラウザで開いて Google アカウントにてログインします。

ログイン成功時に Firebase を CLI で動かすためのトークンが発行されるので、.env ファイルに環境変数（FIREBASE_TOKEN=xxx）として定義します。

これで、Container をビルドして環境を再構築する際に Firebase へ都度ログインしなくても Project に対して操作できるようになります。

Firebase Project の設定ファイル群を生成

次に、Firebase Project の設定ファイル群を生成します。

Firebase Console にて Project が作成されているを確認したら、Container 内で以下のコマンドを使用し、Project と連携した設定ファイル群を生成します。

$ firebase init

コマンドを使用すると、

どのプロジェクトと連携させるか
どの Firebase のサービスを利用するか（後に設定可）
指定したサービスのエミュレータ（Firebase Local Emulator Suite）を利用するか（後に設定可）

を指定することができます。

(Optional) 各サービスの開発環境を整える

以下は、特定のサービスを利用することを選択した際に追加で必要となる設定項目となります。

`Firebase Local Emulator Suite` にて `Firestore` を動かすための設定

firebase init にて、Firestore を利用する かつ Firestore のエミュレータを利用する ことを選択した場合、上記で構築した仮想環境ではエミュレータを立ち上げることができません。

なぜなら、Firestore はエミュレートに Java を使用するのですが、構築した仮想環境内には Java がインストールされていないためです。

なので、Firestore のエミュレータを動かすために、仮想環境内に Java をインストールします。

.devcontainer/firebase/Dockerfile

# Base image
FROM node:current-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

これにより、Container をビルドした際に Java JRE が仮想環境内にインストールされ、

$ firebase emulators:start --only firestore

のコマンドで Firestore のエミュレータを起動させることができます。

`Cloud Functions for Firebase` のコーディング環境を整える

firebase init にて Cloud Functions for Firebase の利用を選択した際に、JavaScript と TypeScript のどちらで開発するか、コードの静的解析を利用するか を指定することができます。

ここでは、TypeScript で開発 かつ 静的解析を利用する を選択した際に、

TypeScript の設定
ESLint の設定
Prettier の導入

を行う場合の設定例を紹介します。

`TypeScript` の設定

まず初めに TypeScript に関する設定を行います。今回は、firebase init 時に自動生成される tsconfig.json の一部を修正します。

今回新たに追加したのは、JavaScript のテストツールである Jest でテストを実行する際に必要な設定です。

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__"]
}

`ESLint` の設定

次に 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` の導入

最後に、TypeScript をサポートしている Formatter である Prettier を導入します。

まず、Container に接続して functions ディレクトリ直下に移動し、以下のコマンドを使用します。

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

次に、ESLint の設定ファイルである .eslintrc.json に Prettier を利用するための設定を追記します。

functions/.eslintrc.json

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

(Optional) VSCode で `Prettier` を使用する

VSCode にて Prettier を使用する場合、VSCode に Prettier - Code formatter 拡張をインストールし、VSCode の設定に Prettier を利用するための設定を追記します。

.vscode/settings.json

{
  ...
+ "editor.codeActionsOnSave": {
+   "source.fixAll.eslint": true
+ },
+ "javascript.format.enable": false,
+ "typescript.format.enable": false,
+ "json.format.enable": false,
+ "eslint.alwaysShowStatus": true,
+ "eslint.format.enable": true,
+ "eslint.debug": true,
+ "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"
+ }
  ...
}

これで、VSCode にて Prettier によるコード整形が利用可能になります。

まとめ

この記事では、Apple Silicon な macOS 上に Docker Container を立て、Firebase Project の開発環境を構築する方法を紹介しました。

皆さんも、Docker Container による開発環境の構築や共有を行い、再利用性の高い開発環境を作りましょう！

本記事の疑問点や感想などありましたら、ぜひコメントとして残していってください！

GitHubで編集を提案

M1 macOS x Docker で Firebase Project の開発環境を構築しよう

はじめに

目次

環境 (2022/07/18 時点)

Docker for Mac の導入

dmg ファイルからインストールする

`Homebrew-cask` を利用してインストールする

1. `Homebrew` の導入

2. Docker for Mac のインストール

仮想環境（Container）の設定ファイルを作成

`Dockerfile` の作成

`docker-compose.yml` の作成

(1): 仮想環境（Container）をビルドする際に利用する Dockerfile を指定

(2): Container へマウントしたいファイルを指定

(3): 環境変数の定義ファイルを指定

仮想環境（Container）の生成

`docker` コマンドを利用する場合

VSCode の `Remote - Containers` を利用する場合

Firebase CLI を利用して Container 内に Firebase Project の設定ファイル群を作成

Firebase へログイン

Firebase Project の設定ファイル群を生成

(Optional) 各サービスの開発環境を整える

`Firebase Local Emulator Suite` にて `Firestore` を動かすための設定

`Cloud Functions for Firebase` のコーディング環境を整える

`TypeScript` の設定

`ESLint` の設定

`Prettier` の導入

(Optional) VSCode で `Prettier` を使用する

まとめ

Discussion

はじめに

目次

環境 (2022/07/18 時点)

Docker for Mac の導入

dmg ファイルからインストールする

Homebrew-cask を利用してインストールする

1. Homebrew の導入

2. Docker for Mac のインストール

仮想環境（Container）の設定ファイルを作成

Dockerfile の作成

docker-compose.yml の作成

(1): 仮想環境（Container）をビルドする際に利用する Dockerfile を指定

(2): Container へマウントしたいファイルを指定

(3): 環境変数の定義ファイルを指定

仮想環境（Container）の生成

docker コマンドを利用する場合

VSCode の Remote - Containers を利用する場合

Firebase CLI を利用して Container 内に Firebase Project の設定ファイル群を作成

Firebase へログイン

Firebase Project の設定ファイル群を生成

(Optional) 各サービスの開発環境を整える

Firebase Local Emulator Suite にて Firestore を動かすための設定

Cloud Functions for Firebase のコーディング環境を整える

TypeScript の設定

ESLint の設定

Prettier の導入

(Optional) VSCode で Prettier を使用する

まとめ

Discussion

`Homebrew-cask` を利用してインストールする

1. `Homebrew` の導入

`Dockerfile` の作成

`docker-compose.yml` の作成

`docker` コマンドを利用する場合

VSCode の `Remote - Containers` を利用する場合

`Firebase Local Emulator Suite` にて `Firestore` を動かすための設定

`Cloud Functions for Firebase` のコーディング環境を整える

`TypeScript` の設定

`ESLint` の設定

`Prettier` の導入

(Optional) VSCode で `Prettier` を使用する