OSM ベクトルタイル自前ホスティング構築記録

Cloudflare R2 + Workers + PMTiles

コミュニティ運営のタイルサーバー tile.openstreetmap.jp への依存をやめ、 日本全国の地図タイルを月額ほぼ 0 円で自前配信するまでの全記録。

• 構築日: 2026年8月4日
• 配信ドメイン: tiles.naughty-ghost.org
• リポジトリ: naughty-ghost/map-tiles

目次

1. 背景と課題
2. 設計判断
3. アーキテクチャ
4. コスト設計 — 月額ほぼ 0 円のからくり
5. 構築ステップ全記録
6. つまずきと解決
7. 動作確認の結果
8. ライブデモ
9. ライセンスと帰属表示
10. 運用 — 月次更新フロー
11. まとめ

1. 背景と課題

地域の危険度を可視化するアプリ hazardmap（Web / Android / iOS）は、地図表示に OSMFJ（OpenStreetMap Foundation Japan）が運営する無料コミュニティタイルサーバー tile.openstreetmap.jp を利用していた。 しかし次の課題があった。

• タイル読み込みが稀にエラーになる事象を確認していた
• 無料・コミュニティ運営のため、商用利用を想定した信頼性保証がない
• 配信の可用性を自分たちで制御できない

そこで「日本全国の OSM ベクトルタイルを自前ホスティングし、外部タイルサーバーへの依存を完全に廃止する」 ことにした。要件定義〜詳細設計は naughty-ghost/hazardmap リポジトリ（非公開）で実施し、 実体のインフラは複数アプリから共用できる汎用基盤として独立リポジトリ naughty-ghost/map-tiles に切り出した。

2. 設計判断

3. アーキテクチャ

構成（上から下へリクエストが流れる）:

1. クライアント（MapLibre GL） — Web / Android / iOS。style.json の URL を参照するだけ
2. Cloudflare CDN — tiles.naughty-ghost.org（カスタムドメイン・キャッシュ 24h）
3. Cloudflare Worker（map-tiles） — /tiles/… → PMTiles から Range Request でタイル切り出し。 /styles/…・/fonts/… → R2 の静的ファイルをそのまま配信。/tiles/{source}.json → TileJSON をメタデータから動的生成
4. Cloudflare R2（バケット: map-tiles / apac） — japan.pmtiles（1.67GB）+ スタイル 2 種 + スプライト + グリフ 768 ファイル

エンドポイント契約

Worker は protomaps/PMTiles 公式の Cloudflare 実装をベースに、上記のパス構成と静的ファイル配信を追加した約 250 行の TypeScript。 新しいタイルソースを追加したくなったら {name}.pmtiles を R2 に置くだけで /tiles/{name}/… として配信される。

4. コスト設計 — 月額ほぼ 0 円のからくり

5. 構築ステップ全記録

1. リポジトリ作成と Worker プロジェクトの雛形作成（naughty-ghost/map-tiles）

   Protomaps 公式の Cloudflare Worker 実装を取得してエンドポイント契約に合わせて改変し、 wrangler 設定・スタイル生成スクリプト・運用手順書（README）とともに push。 TypeScript 型チェックを通してからコミットした。

2. Cloudflare 側の準備（ダッシュボード + wrangler login）

   R2 の有効化（無料枠でも支払い方法の登録が必須）と npx wrangler login による OAuth 認証。ドメイン naughty-ghost.org は既に Cloudflare 管理下だったため ゾーン追加は不要だった。

3. R2 バケット作成（location hint: apac）

   npx wrangler r2 bucket create map-tiles --location apac

   利用者が日本のため、データの物理配置をアジア太平洋リージョンに寄せた。

4. タイル生成 — Planetiler（Java 21（Corretto ポータブル版）/ 処理 13 分 / 出力 1.67GB）

   java -Xmx8g -jar planetiler.jar --download --area=japan --output=japan.pmtiles

   Geofabrik の日本抽出データ（2.3GB）と水域等の共通データを自動ダウンロードし、 日本全国 zoom 0–14 のベクトルタイルを生成。事前見積もりは「10GB・1〜2 時間」だったが、 実際は 1.67GB・13 分で完了した。

5. スタイル・スプライト・グリフの準備（スクリプト 2 本で自動化）

   build-styles.mjs が現行スタイル 2 種を取得して sources / glyphs / sprite の URL を 自前 CDN に書き換え、スプライトも同時取得。続いて fetch-fonts.mjs が スタイルの参照する Migu 系 3 フォントスタック × 全 256 range = 768 グリフファイルを 取得（失敗 0 件、計 28MB）。

6. R2 アップロード — rclone（計 786 オブジェクト）

   rclone copy japan.pmtiles r2:map-tiles/ --s3-no-check-bucket \
     --s3-upload-cutoff=100M --s3-chunk-size=100M
   rclone copy dist/ r2:map-tiles/ --s3-no-check-bucket

   1.67GB の本体は 100MB チャンクのマルチパートアップロード。wrangler の 300MiB 制限を超えるため rclone（S3 互換 API）を採用した。

7. Worker デプロイ + カスタムドメイン（wrangler deploy 一発）

   wrangler.toml に custom_domain = true を書いておくだけで、 デプロイと同時に tiles.naughty-ghost.org の DNS レコードと TLS 証明書が 自動作成された。Worker 本体のアップロードは gzip 後 10.6KB。

6. つまずきと解決

実作業で遭遇した問題は 4 件。いずれも原因を特定して解決済み。

7. 動作確認の結果

【合格】ライト / ダーク両スタイルを、ズーム 4 段階（z4 全国 / z10 都市 / z14 タイル最大 / z16 オーバーズーム）で実表示確認。

8. ライブデモ

以下は実際に稼働中の自前配信基盤（tiles.naughty-ghost.org）からタイルを読み込む MapLibre の地図。

9. ライセンスと帰属表示

10. 運用 — 月次更新フロー

月 1 回、3 コマンド + キャッシュパージで最新の OSM データに差し替えられる。

# 1. 最新データで再生成（--download が japan-latest.osm.pbf を自動取得）
java -Xmx8g -jar planetiler.jar --download --area=japan --output=japan.pmtiles

# 2. R2 へ差し替えアップロード
rclone copy japan.pmtiles r2:map-tiles/ --s3-no-check-bucket \
  --s3-upload-cutoff=100M --s3-chunk-size=100M

# 3. Cloudflare ダッシュボード → キャッシュ → すべてをパージ

プレフィックス指定パージは Enterprise プラン限定のため全パージで運用（タイルは 24 時間で 再キャッシュされるため実用上の影響は軽微）。スタイル・グリフ・スプライトは変更時のみ再アップロード。 所要時間は生成 13 分 + アップロード数分。

11. まとめ

更新履歴

• 2026/08/04 新規作成。