Firebase extensionsがemulatorを使ってlocalで動かせるようになったので試してみた

こんにちは。[virapture株式会社](https://virapture.com)でCEOしながら[ラグナロク株式会社](https://ragna-rock.com)でもCKOとして働いている[もぐめっと](https://mogmet.com)です。

![mogmet.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/3247acbb-ad2e-fe83-4a96-b1edf44ee78f.jpeg)
このあいだ初めてマーダーミステリーというのをやってみました。めちゃくちゃ難しかったです。金田一とかコナンとかすごいんだなぁと改めて思いました。

ところで、先日Firebase Extensionsがemulatorでも使えるようになったので早速試してみました。

https://twitter.com/Firebase/status/1532165126316601346?s=20&t=AW0Cey2Nrk3b4aiIMvGSGQ

## 使い方

使い方は簡単です。
使いたいextensionごとにinstallコマンドを実行して設定した後にemulatorを起動するだけです。

https://firebase.google.com/docs/emulator-suite/use_extensions

では、さっそくfirestore-send-emailをコマンド実行して入れてみます。
```sh
$ firebase ext:install --local firebase/firestore-send-email
```

今回はextensionをemulatorで試すのがゴールのため詳しい説明は省きますが、適当にfirestore-send-emailを設定してインストールします。

```sh
⚠  extensions: As of firebase-tools@11.0.0, the `--local` flag is no longer required, as it is the default behavior.
i  extensions: information about 'firebase/firestore-send-email@0.1.17':
Name: Trigger Email
Publisher: firebase
Description: Composes and sends an email based on the contents of a document written to a specified Cloud Firestore collection.
License: Apache-2.0
Source code: https://github.com/firebase/extensions/tree/master/firestore-send-email

? Do you wish to continue? Yes
i  extensions: answer the questions below to configure your extension:

Cloud Functions location: Where do you want to deploy the functions created for this extension? You usually want a location close to your database. For help selecting a location, refer to the location selection guide.
? Which option do you want enabled for this parameter? Select an option with the arrow keys, and use Enter to confirm your choice. You may only select one option. Tokyo (asia-northeast1)

SMTP connection URI: A URI representing an SMTP server this extension can use to deliver email. Note that port 25 is blocked by Google Cloud Platform, so we recommend using port 587 for SMTP connections. If you're using the SMTPS protocol, we recommend using port 465. In order to keep passwords secure, it is recommended to omit the password from the connection string while using the SMTP Password field for entering secrets and passwords. Passwords and secrets should now be included in SMTP password field.
Secure format:
 smtps://username@gmail.com@smtp.gmail.com:465 (username only)
 smtps://smtp.gmail.com:465 (No username and password)
Backwards Compatible (less secure):
 smtps://username@gmail.com:password@smtp.gmail.com:465. (username and password)
? Enter a value for SMTP connection URI: smtps://username@gmail.com@smtp.gmail.com:465

SMTP password (Optional): User password for the SMTP server
? Where would you like to store your secrets? If you don't want to set this optional secret, leave both options unselected to skip it Local file (Used by emulator only)
i  extensions: Configure a local secret value for Extensions Emulator
? This secret will be stored in ./extensions/firestore-send-email.secret.local.
Enter value for "SMTP password" to be used by Extensions Emulator: ******

Email documents collection: What is the path to the collection that contains the documents used to build and send the emails?
? Enter a value for Email documents collection: mail

Default FROM address: The email address to use as the sender's address (if it's not specified in the added email document).  You can optionally include a name with the email address (Friendly Firebaser <foobar@example.com>).
? Enter a value for Default FROM address:
⚠  Param DEFAULT_FROM is required, but no value was provided.
? Enter a value for Default FROM address: mogmet
⚠  Must be a valid email address or valid name plus email address
? Enter a value for Default FROM address: BOT User <bot@mogmet.com>

Default REPLY-TO address (Optional): The email address to use as the reply-to address (if it's not specified in the added email document).
? Enter a value for Default REPLY-TO address:

Users collection (Optional): A collection of documents keyed by user UID. If the toUids, ccUids, and/or bccUids recipient options are used in the added email document, this extension delivers email to the email field based on lookups in this collection.
? Enter a value for Users collection:

Templates collection (Optional): A collection of email templates keyed by name. This extension can render an email using a Handlebar template, if the template is specified in the added email document.
? Enter a value for Templates collection:

✔  Wrote extensions to firebase.json...
✔  Wrote extensions/firestore-send-email.env
✔  Wrote extensions/firestore-send-email.secret.local
i  extensions: The behavior of ext:install, ext:update, ext:configure, and ext:uninstall has changed in firebase-tools@11.0.0. Instead of deploying extensions directly, changes to extension instances will be written to firebase.json and ./extensions/*.env. Then firebase deploy (--only extensions) will deploy the changes to your Firebase project. See https://firebase.google.com/docs/extensions/manifest for more details.
```

無事設定できるとfirebase.jsonに項目が追加されるのがわかります。

```firebase.json
+  "extensions": {
+    "firestore-send-email": "firebase/firestore-send-email@0.1.17"
   }
```

ではさっそくエミュレータを起動してみましょう。

```
$ firebase emulators:start
```

するとextensionをDLしはじめて無事起動しました。
```shell
i  emulators: Starting emulators: auth, functions, firestore, database, hosting, storage, extensions
i  extensions: Starting download for firebase/firestore-send-email@0.1.17 source code...
i  extensions: cache directory for firebase/firestore-send-email@0.1.17 already exists...
i  extensions: downloading https://storage.googleapis.com/firebase-mod-sources-prod/9ec24ebc82e7f47df0a038d5f7db91394652d0cff3f0f882e9e197b18ff25877...
Progress: ====================================================================================================================================================================================================================================================================================================================> (100% of 1MB)
i  extensions: Downloaded to /Users/mogmet/.cache/firebase/extensions/firebase/firestore-send-email@0.1.17...
⚠  functions: The following emulators are not running, calls to these services from the Functions emulator will affect production: pubsub
✔  functions: Using node@16 from host.
⚠  Your requested "node" version "14" doesn't match your global version "16". Using node@16 from host.
i  firestore: Firestore Emulator logging to firestore-debug.log
i  database: Database Emulator logging to database-debug.log


...

✔  functions[asia-northeast1-ext-firestore-send-email-processQueue]: firestore function initialized.

┌─────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! It is now safe to connect your app. │
│ i  View Emulator UI at http://localhost:4000                │
└─────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬──────────────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI              │
├────────────────┼────────────────┼──────────────────────────────────┤
│ Authentication │ 0.0.0.0:9099   │ http://localhost:4000/auth       │
├────────────────┼────────────────┼──────────────────────────────────┤
│ Functions      │ 0.0.0.0:5001   │ http://localhost:4000/functions  │
├────────────────┼────────────────┼──────────────────────────────────┤
│ Firestore      │ 0.0.0.0:8080   │ http://localhost:4000/firestore  │
├────────────────┼────────────────┼──────────────────────────────────┤
│ Database       │ localhost:9000 │ http://localhost:4000/database   │
├────────────────┼────────────────┼──────────────────────────────────┤
│ Hosting        │ 0.0.0.0:5000   │ n/a                              │
├────────────────┼────────────────┼──────────────────────────────────┤
│ Storage        │ 0.0.0.0:9199   │ http://localhost:4000/storage    │
├────────────────┼────────────────┼──────────────────────────────────┤
│ Extensions     │ 0.0.0.0:5001   │ http://localhost:4000/extensions │
└────────────────┴────────────────┴──────────────────────────────────┘
  Emulator Hub running at localhost:4400
  Other reserved ports: 4500
┌─────────────────────────┬──────────────────────────────────────┬───────────────────────────────────────────────────────┐
│ Extension Instance Name │ Extension Ref                        │ View in Emulator UI                                   │
├─────────────────────────┼──────────────────────────────────────┼───────────────────────────────────────────────────────┤
│ firestore-send-email    │ firebase/firestore-send-email@0.1.17 │ http://localhost:4000/extensions/firestore-send-email │
└─────────────────────────┴──────────────────────────────────────┴───────────────────────────────────────────────────────┘
Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.
```

http://localhost:4000 をみてみると無事起動してるのがわかります。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/0076a818-bf0e-dbe4-b937-56ac0bef3f01.png)

extension一覧とか見れるみたいですね。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/ab99e7fa-0b9a-2a52-09b3-7dbf66b3bebb.png)

詳細を見るとFirebaseコンソールでもよくみる画面にたどり着きました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/4c5837ae-d725-8559-5352-59a5bec2fc33.png)

自分が先程設定した設定もみることができます。

![スクリーンショット 2022-06-05 20.29.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/42234/9a821c47-d4a9-13d6-e375-7aea7012283a.png)

他にも試してみたい方は下記の拡張機能一覧のリンクのパスをそのままコマンドで差し替えればローカルで試せると思います！

https://firebase.google.com/products/extensions

## まとめ

コマンド一つでfirebaseの拡張機能をemulatorで動かすことができるようになりました。

今まで拡張機能はfirebase上でないと展開しづらかったですがこれによってローカルでのテストがより実行しやすくなりました。
軽く試したりすることや開発もきっと爆速化できるようになると思います！


最後に、[ワンナイト人狼オンライン](https://online.1nite-jinro.com/link/blog)というゲームを作ってます！よかったら遊んでね！

https://online.1nite-jinro.com/link/blog

他にも[Camecon](https://camecon.me/)や[Offcha](https://offcha.com/)、問い合わせ対応が簡単にできる[CSmart](https://csmart.jp/lp)といったサービスも作ってるのでよかったら使ってね！

https://camecon.me/

https://offcha.com/

https://csmart.jp/lp

また、チームビルディングや技術顧問、Firebaseの設計やアドバイスといったお話も受け付けてますので御用の方は弊社までお問い合わせください。

https://virapture.com/

ラグナロクでもエンジニアやデザイナーのメンバーを募集しています！！楽しくぶち上げたい人はぜひお話ししましょう！！

https://ragna-rock.com