Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
OpenStreetMap Community向けタイルサーバ構築及びそもそもタイルサーバって何?
Search
Taro Matsuzawa aka. btm
October 24, 2020
Technology
0
1.1k
OpenStreetMap Community向けタイルサーバ構築及びそもそもタイルサーバって何?
Open Source Conference 2020 Fall/Online の資料です。
Taro Matsuzawa aka. btm
October 24, 2020
Tweet
Share
More Decks by Taro Matsuzawa aka. btm
See All by Taro Matsuzawa aka. btm
OpenLayers ext TypeScript declarationの開発
smellman
0
500
平成生まれのためのUNIX&IT歴 史講座 ~番外編~
smellman
2
460
掛川城の点群データをiTownsで表示しよう
smellman
0
250
そのJavascript、全部TypeScriptにしちゃえ
smellman
1
190
大容量SSDとOpenStreetMap
smellman
0
110
MapLibreとtile.openstretmap.jpで始めるベクトル地図プログラミング
smellman
1
530
国内向けタイルサーバの構築と運用について
smellman
0
1.1k
Python/Javascriptで読む点群
smellman
1
4.8k
日本のCommunity向け タイルサーバの現状
smellman
0
2.6k
Other Decks in Technology
See All in Technology
生成AIをより賢く エンジニアのための RAG入門 - Oracle AI Jam Session #20
kutsushitaneko
4
220
日本版とグローバル版のモバイルアプリ統合の開発の裏側と今後の展望
miichan
1
130
KnowledgeBaseDocuments APIでベクトルインデックス管理を自動化する
iidaxs
1
260
Oracle Cloudの生成AIサービスって実際どこまで使えるの? エンジニア目線で試してみた
minorun365
PRO
4
280
re:Invent をおうちで楽しんでみた ~CloudWatch のオブザーバビリティ機能がスゴい!/ Enjoyed AWS re:Invent from Home and CloudWatch Observability Feature is Amazing!
yuj1osm
0
120
あの日俺達が夢見たサーバレスアーキテクチャ/the-serverless-architecture-we-dreamed-of
tomoki10
0
440
AWS re:Invent 2024で発表された コードを書く開発者向け機能について
maruto
0
190
社外コミュニティで学び社内に活かす共に学ぶプロジェクトの実践/backlogworld2024
nishiuma
0
260
DevOps視点でAWS re:invent2024の新サービス・アプデを振り返ってみた
oshanqq
0
180
多領域インシデントマネジメントへの挑戦:ハードウェアとソフトウェアの融合が生む課題/Challenge to multidisciplinary incident management: Issues created by the fusion of hardware and software
bitkey
PRO
2
100
LINEスキマニにおけるフロントエンド開発
lycorptech_jp
PRO
0
330
生成AIのガバナンスの全体像と現実解
fnifni
1
180
Featured
See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Become a Pro
speakerdeck
PRO
26
5k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Code Review Best Practice
trishagee
65
17k
How To Stay Up To Date on Web Technology
chriscoyier
789
250k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
247
1.3M
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.6k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Transcript
OSC2020 Online/Fall 松澤太郎(タイル三兄弟) OpenStreetMap Community 向けタイルサーバ構築及びそも そもタイルサーバって何?
自己紹介
タイル三兄弟の一味 Twitter: @smellman 日本UNIXユーザ会理事、OSGeo日本支部理事、OpenStreetMap Foundation Japanメン バー React NativeとかRuby on
RailsとかPythonとかやってる地理系プログラマー ブレイクコアクラスタ 自己紹介
デモ OpenStreetMapとは Community向けサーバについて そもそもタイルサーバとは? 新しいCommunity向けサーバ 地図のイベント(時間つぶしに) 今日のお題
デモ
https://osmfj.github.io/geoweek_and_weekend_2020/ 今回作ってるサーバでできることをイメージするため、イベントページにデモを作りました 音楽がなるので注意してね★ デモ
OpenStreetMapとは
世界中のマッパーによる地図データの集合 世界中の道路や建物、飲食店の営業時間、災害情報、トイレの位置、バス路線、ベンチの位置、 その他「なにもかも」を入れている 世界単位の地理データを「単一の」データベースに保存する仕組み 世界単位を「Planet」と言う OpenStreetMapとは
node, way, relationの三種類のXMLからなるデータで表現 wayが「閉じている」とPOLYGONになる 子要素のtagがkey/valueとなる仕組み <tag k="highway" v="traffic_signals"/> keyを「なんでも」指定できるため、「なにもかも」入れることができる データ構造
例 <?xml version="1.0" encoding="UTF-8"?> <osm> <node id=“295400402" lat="35.6769535" lon="139.7126026"> <tag
k="highway" v="traffic_signals"/> <tag k="name" v="観音橋"/> <tag k="name:en" v="Kannon Bridge"/> </node> ... <way id="41857309"> <nd ref="517548467"/> <nd ref="2296561254"/> ... <tag k="highway" v="tertiary"/> <tag k="lanes" v="1"/> <tag k="maxspeed" v=“30"/> ... </way> <relation id="5596700"> ... </relation> </osm> : ಡΈ͘͢͢ΔͨΊ͔ͳΓ؆ུԽ͍ͯ͠·͢
「なにもかも」入れてもいいけど、ルールはある ルール自体はOpenStreetMapのWikiを参照 まずはここから! https://wiki.openstreetmap.org/wiki/Contribute_map_data XMLはデータ量が大きくなるので大きなデータはProtocol Bufferを使うのが主流 データ構造の補足
巨大なデータベースがOpenStreetMapの本質 見えている地図はその一部でしかない 営業時間やバス路線は可視化されないけどデータとしては入れられる データベースを参照すればサービスを作ることができる! とはいえ、今日は見える方のお話です おおまかにいうと
ৄ͍͜͠ͱ͜ͷຊʹԿނ͔ॻ͍ͯ͋Γ·͢ https://book.mynavi.jp/ec/products/detail/id=92636
Community 向け地図サーバ
OpenStreetMapの国内向けサーバ GMO お名前.com VPSを提供してもらっている 日本の単位でアップデートをかけている 日本以外の地域は国際サーバにProxyをしている 竹島対策なんかもしている tile.openstreetmap.jp
インフラがかなり古い Ubuntu 12.04 地図のレンダリングスタイルも古いまま CartoCSSに移行できなかった ラスタタイルのみしか提供ができていない 老朽化
そもそもタイルサーバとは
インターネット上で「効率よく」地図を配信する仕組みの「ひとつ」 地図画像はタイルという単位で切り取られている ズームレベルが上がると縦横が倍の精度になる ズームレベル0=全世界 タイルサーバ http://a.tile.openstreetmap.org/0/0/0.png
Zoomレベル=0を地球全体と定義 実際には経度 185 度あたりをカット Zoomレベルが一つ増えると解像度が 2x2 = 4倍になる Zoomレベル=2 =
22 * 22 = 4 * 4 = 16 Zoomレベル=18 = 218 * 218 = 68,719,476,736 Zoomレベルとタイル ग़య: ࠃཧӃɹཧӃλΠϧʹ͍ͭͯ https://maps.gsi.go.jp/development/siyou.html
地図タイルに特化した座標系(Web Mercator) Google Mapsで利用されたことからかつてEPSG:900913と呼ばれていた 900913 = Google 一般的に知られている緯度経度は世界測地系(EPSG:4326)を利用 タイルと違う座標系が使われるのに注意 座標系:
EPSG 3857
地図データをレンダリングして画像(ラスタ)にしたデータ 縦256px横256pxの長方形の画像がベース Retina対応で512pxや766pxも可能
[email protected]
とか
[email protected]
とかいうファイル名になる いずれにせよ256pxが基準 ラスタタイル IUUQTNBQTHTJHPKQYZ[TUEQOH
ラスタタイルの仕組み(例) NPE NBQOJL 4UZMF 9.- 3&45 (&5 ը૾ mapnikがデータベースとスタイルを読み 地図画像をレンダリングする
基本的に人間が「見る」ものが必要 「見る」データにするためにスタイリングをする データを提供する例もある RGB値=標高値など ラスタタイルの特徴 IUUQTDZCFSKBQBOEBUBHTJHPKQYZ[EFN@QOHQOH
スタイルを当てる単位がサーバ単位になる URLごとにスタイルを変更する仕組みは作れるがコストが高い CDNに乗っける場合など問題になる サーバ側にレンダリングのコストがかかる=CPU負荷がかかる 通信量も多い ラスタタイルの問題点
スタイルに対するコストは 結構問題
ベクターデータを提供するタイル ベクターデータはスタイルデータを持たない クライアントがスタイルデータとともにレンダリングをする ベクターデータ自体プログラムで制御可能 3Dの表示なども可能になる ベクタータイル
ベクタータイルの仕組み スタイルなど .BQCPY 7FDUPS 5JMF 8FCαʔό 8FCαʔό レンダリングは クライアントで行う
Mapbox社が提供しているベクタータイルの仕様 現在のデファクト・スタンダード Protocol Bufferに地図データを格納 Web Mercatorが前提 Mapbox Vector Tile
オーバーズームという概念がある データはzoom 14で、スタイルでzoom 18をレンダリングするという仕組み ラスタータイルに比べてデータ量が大きくても、ズームをしていくと結果として「通信 量」が減る スタイリングをクライアント側でやるので配信のコスト自体は減る ただし、ベクタータイルのみを配信するのは現実的ではない ベクタータイルの利点
ベクタータイルとラスタータイルの両方を配信 ラスタータイルのデータソースとしてベクタータイルを利用 tileserver-glというソフトウェアで上記の仕組みをサポートできる 現実的な対応
新しいコミュニティ向け サーバ
さくらインターネットから「さくらのクラウド」月10万円分提供してもらっている 2018年から研究を開始 現在は OSM Japan コミュニティサーバは移行済 tile2.openstreetmap.jp が現在構築中 今日はこれの戦いがメイン 新しいインフラ
ベクタータイルへのFirst step ダイレクト配信へのチャレンジ 挫折 新しい希望 現在の体制 戦いの歴史
元々仕事で「さくらのVPS」とtileserver-glを使ったベクター/ラスタタイル配信は実現済 その構成をそのまま持ってこれた nginx (フロントエンド) Varnish Cache (キャッシュ) tileserver-gl ベクタータイルのFirst Step
日本のエリアだけ作成するのであれば問題はない tile.openstreetmap.jp がProxyとはいえ世界中を対応しているので、ベクタータイルでも やりたい Planet(世界中)をインポートするには最低1TBのストレージが必要 PostgreSQLだけで600GB消費! やりたいこと
だったら、インポートしたベクタータイルをPostgreSQLから直接配信すればいいのでは? PostServeというプログラムがOpenMapTilesにあってそれがそのまま使えそう Varnish Cache挟めばよくね? PostgreSQLのデータを差分更新すればよくね? やってみた ダイレクト配信へのチャレンジ
構成図 Varnish PostgreSQL Postserve Varnish tileserver-gl tileserver-gl tileserver-gl vector.openstreetmap.jp tile2.openstreetmap.jp
nginx OpenMapTiles ࠩߋ৽
1TB+差分更新をしようとしたら差分更新が間に合わないというオチが発生 差分更新がどんどん遅れる 差分更新は日本の単位でもギリギリ では、PostgreSQLを2系統用意してスイッチすればいいのでは? 最低2TB必要 挫折(1)
構成図 Varnish PostgreSQL Postserve Varnish tileserver-gl tileserver-gl tileserver-gl vector.openstreetmap.jp tile2.openstreetmap.jp
nginx OpenMapTiles PostgreSQL Postserve Πϯϙʔτ
2TBにしたらその分マシンのスペックが落ちるので破滅 2TB=66,000円 インポートも終わらんようなスペックになって壊滅した 挫折(2)
Varnish + PostServe もおかしい動きをする PostServeが変な動きをしていたが、それは途中でupstreamで修正された そもそもスペックがラスタ配信にとって厳しすぎる その他の挫折
試行錯誤しているうちにOpenMapTilesのコントリビュータに 夜中3時の打ち合わせとかも出るようになった 気づいたらPostGISとpgRoutingのDockerにパッチ書いてた pgRoutingの方はメンテナーになっていた(いや、社内だけどな!) がんばったんだよ
そもそも配信とタイル作成はサーバを分けるべき では、タイル作成サーバをどうやって調達するべきか… 僕が行き着いた先は… 新しい希望
AMD Ryzen
Ryzen 5 3400G + Deskmini 300A + 32GB Memory +
Intel m2 SSD 1TB 実家に置きました 電源をスマートスピーカー経由で操作可能にした Raspberry Pi 4から「自宅」にVPNを貼り、外出先から「自宅」経由で「実家」のサーバにロ グインできるようにした 誤実家サーバ(何 サーバ組みました(てへ
PostgreSQL 9.6, 10, 11, 12, 13(リリース前)をテスト postgresql.conf を読み込むように調整 Mapnikベースのtileliveから、OpenMapTiles Tools
5.3で導入予定のpgqueryに変更 OpenMapTilesの最後のタスクであるベクタータイル作成が2倍以上パフォーマンスアップ チューニング
tile2.openstreetmap.jp Spec: 20Core CPU / 64GB Memory / 500GB SSD
現在は日本地域に対応、Planet単位は現在実家サーバで構築中 nginxのログをfluentd+elasticsearch+grafanaで可視化してる 現在の体制
構成図 Varnish tileserver-gl tileserver-gl tileserver-gl tile2.openstreetmap.jp nginx OpenMapTiles ࣮Ոαʔό
࣮Ոαʔόͷਐḿ
ՄࢹԽ
Planetの構築が無事できたら正式公開 今ビルドしてるのが失敗するとまた一ヶ月ぐらいスケジュールが遅れます(てへ 構築手順などは公開予定 Planetのタイル自体も公開する予定なので自分たちでタイルサーバ作れますよ ログとかはさくらインターネットさんに共有しようと思っている 正式公開
というわけで、ここでQA
地図のイベント
FOSS4G Conferenceは地図のOSSのイベントとして世界各地で行われている 日本では東京、関西、北海道、東海、新潟などで開催されている OSSなプログラムの紹介やサービスの紹介から政府系の発表など、様々な発表がある 昨年のFOSS4G Niigataでは政府CIO補佐官が基調講演 FOSS4G Conference
OpenStreetMapのマッパーやエンジニアの祭典 2017年に国際カンファレンスを会津若松に誘致 日本では1〜2年単位で開催 去年はお休み State of the MAP
コロナのせいでオンラインへ 開催日を調整して、State of the Map Japan 2020 と FOSS4G 2020
JAPAN Online を 2020年11月7日、8日の2日連続で開催 今年のイベント
202011݄7 202011݄8 ޕલ FOSS4G JP 2020 Online νϡʔτϦΞϧσΠ ޕޙ State
of the Map FOSS4G JP 2020 Online ίΞσΠ ࠙ձ λΠϜεέδϡʔϧ
State of the Map Japan 2020 https://stateofthemap.jp/2020/ FOSS4G 2020 Japan
Online https://www.osgeo.jp/events/foss4g-2020/foss4g-2020-japan-online 参加者募集
OpenStreetMap JP https://osm.jp OSGeo日本支部 https://www.osgeo.jp コミュニティサイト