ドキュメントを検索

maps-react

チュートリアル Step 5: ビルドと本番公開

この Step の前提

Step 0 から Step 4 までで、地図の表示、場所の指定、データの表示、色分け、ポップアップを扱いました。この Step では、作成したアプリを自分のドメインで公開します。

デモキーと本番キーの違い

ここまでのコードでは、apiKey="YOUR-API-KEY" を指定していました。これは Geolonia が提供するデモキーであり、localhost、GitHub Pages、CodePen、Netlify、Vercel などの開発環境とプレビュー環境でのみ地図が描画されます（対象の一覧はデモキーで無料で試せる環境を参照してください）。

自分のドメインで公開する場合は、本番用の API キーの発行が必要です。

API キーを取得する

  1. Geolonia のダッシュボードにログインする。
  2. API キーの管理画面で新しいキーを作成する。
  3. 利用する URL を登録する（例: https://example.com）。登録した URL でのみ地図が描画されます。許可の判定はスキームとポートまで含めて行われるため、http:// と https:// は別の値として扱われます。

コードを書き換える

取得した API キーで apiKey を差し替えます。それ以外のコードに変更はありません。

<Map
  apiKey="YOUR-REAL-API-KEY"
  center={[139.75, 35.68]}
  zoom={11}
  containerStyle={{ width: "100%", height: "100vh" }}
>
  ...
</Map>

API キーは地図の描画に使用する公開可能なキーです。ドメイン制限を設定すると、他のサイトからの無断利用を防げます。

ビルドして公開する

React アプリをビルドすると静的ファイルが出力されます。Vite の場合は次のコマンドを実行します。

npm run build

dist/ ディレクトリに HTML、JS、CSS が出力されます。この内容を静的ホスティングに配置すると公開されます。

public/data/ に配置した GeoJSON は、ビルド時に dist/data/ へコピーされ、あわせて公開されます。

動いたか確認する

公開した URL をブラウザで開き、色分けされた点とポップアップを含む地図が表示されれば成功です。

うまくいかないとき
  • 「地図が表示できません」と出る → API キーに登録した URL と、公開先の URL が一致しているか確認。スキーム（http:// と https://）、ホスト名（www.example.com と example.com）、ポートは、いずれか1つでも異なると別の値として扱われます。
  • ローカルでは表示されるが本番で表示されない → デモキー（YOUR-API-KEY）のままになっていないか確認。
  • データだけ表示されない → GeoJSON の URL が本番環境で解決できるか確認。サブディレクトリ配下に公開した場合、/data/... のような絶対パスが一致しなくなります（Vite の base 設定を確認）。

チュートリアル完了

以上で maps-react チュートリアルは完了です。Step 0 から Step 5 までで扱った内容は次のとおりです。

続けて参照するドキュメントは次のとおりです。