はじめに：やりたいこと
今回はgatsbyのサイトで、Google Mapを埋め込むにはどういうコンポーネントを作ればよいか紹介をしたいと思います。利用するにあたり、GCPのAPIキーも必要になるため、環境変数をGatsbyでどうやって利用するかもあわせて紹介いたします。
やったこと
GCPの設定
まずは公式ドキュメントの確認
Google Maps Embed API の有効化が GCP の管理画面から必要となるようです。
上記のスクショの通り、Google Maps のAPIは他にも沢山あるようです。APIを利用する際の料金については、Embed API については「無料」ということでかなり良心的なサービスですね。
Maps Embed API リクエストは、使用量の上限なく、すべて無料でご利用いただけます。 https://developers.google.com/maps/billing/gmp-billing?hl=ja#embed
ということで迷うことなく Embed API を有効にしました。
有効化した後に、APIキーを払い出す。
map-generatorから埋め込みコードの生成
APIキーを払い出したら、以下のページから生成したいマップの住所を入力すれば、HTMLコードを生成してくれます。
「東京都新宿区」と入力した場合
コンポーネントの作成
記で生成した <iframe>タグを基にReactでコンポーネントを作りました。
import React from "react"
import '../utils/global.css'
const EmbedMap = ({ url }) => {
const api_key = process.env.GASTBY_GCP_API_KEY || 'no value'
return (
<iframe className="w-1/2 lg:w-4/5" loading="lazy" allowfullscreen src={url + "&key=" + api_key}></iframe>
)
}
export default EmbedMap;※process.env.GASTBY_GCP_API_KEY は後述の環境変数の箇所で定義する。
このコンポーネントが受け取る引数 url はMapの住所が記載されたURLが入る想定です。上述のgeneratorから生成できます。
それと、Mapを表示するためのAPIキーは環境変数化（GCP_API_KEY）してコード内には書かないようにしています。
上記のコンポーネントを使って、以下のように特定のページで利用。
...
<h2 id="office">事業所一覧</h2>
<EmbedMap url="https://www.google.com/maps/embed/v1/place?q=%E5%B2%A1%E5%B1%B1%E7%9C%8C%E5%B2%A1%E5%B1%B1%E5%B8%82%E5%8C%97%E5%8C%BA%E7%94%B0%E7%94%BA%E4%B8%80%E4%B8%81%E7%9B%AE4%E7%95%AA15%E5%8F%B7" />
...
環境変数の設定
無料とは言え、GCPのAPIキーなどは機密情報ではあるので、本番環境にAPIキーを設定する方法を調査。
development（ローカル） 環境の場合
まずは本番環境にデプロイする前に他の環境で動作確認をおこなう。その際は、プロジェクトのルートディレクトリに以下のような .env.development ファイルを作成。
GASTBY_GCP_API_KEY=<自身のAPIキーに置き換え>また、gatsby-config.js に以下のブロックを追加する。
Copygatsby-config.js: copy code to clipboard require("dotenv").config({ path: `.env.${process.env.NODE_ENV}`, })参考：https://www.gatsbyjs.com/docs/how-to/local-development/environment-variables/
上記設定を追加した後に、アプリケーションを起動すればローカルで問題なくMapが表示できた。
production (本番) 環境の場合
それでは本番環境に同様の設定を入れることを考える。本番の場合は、上記のdevelopmentのような手段は取れない。なぜかというと、.env.*ファイルをgithubなどにアップロードするのはセキュリティリスクが高く、基本的には禁じ手の行為である。
今回筆者はAzure Static Web AppというAzureのPaaSを使っていたため、以下ドキュメントに従ってポータルから環境変数の設定をしてみた。
こんな感じ：
しかしながら、結果としてこの設定方法では、アプリケーション側で環境変数を認識してくれなかった。（変数がundefinedとなる）
結論としては、azureのビルド/デプロイのpipelineスクリプトに以下のように環境変数の設定を入れることで解決した。
...
env:
GATSBY_GCP_API_KEY: ${{ secrets.GCP_API_KEY }}
...なお、パイプラインscriptもGithub上にアップしているファイルのため、APIキーについてはGithubのシークレットに保管して、上記のように ${{ secrets.GCP_API_KEY }} でアクセスする。
設定例：
まとめ
というように、GoogleMapをGatsbyで埋め込むにはという内容を紹介しました。筆者はMapのAPIの使い方より、環境変数のアクセス方法に四苦八苦して実は半分以上をそのデバッグに費やしました。。しかし、Azureの設定から環境変数にアクセス出来ないのはなんとかして欲しい。。この辺はgatsbyとAzure Static Web Appの事例がまだまだ少ないので、参考情報も少ないんですよね。より良いやり方などあればぜひ教えて下さい。
Comments