OpenStreetMap Community向けタイルサーバ構築及びそもそもタイルサーバって何？

by Taro Matsuzawa aka. btm

Slide 1

Slide 1 text

OSC2020 Online/Fall 松澤太郎(タイル三兄弟) OpenStreetMap Community 向けタイルサーバ構築及びそもそもタイルサーバって何？

Slide 2

Slide 2 text

自己紹介

Slide 3

Slide 3 text

タイル三兄弟の一味 Twitter: @smellman 日本UNIXユーザ会理事、OSGeo日本支部理事、OpenStreetMap Foundation Japanメンバー React NativeとかRuby on RailsとかPythonとかやってる地理系プログラマーブレイクコアクラスタ自己紹介

Slide 4

Slide 4 text

デモ OpenStreetMapとは Community向けサーバについてそもそもタイルサーバとは？新しいCommunity向けサーバ地図のイベント(時間つぶしに) 今日のお題

Slide 5

Slide 5 text

デモ

Slide 6

Slide 6 text

https://osmfj.github.io/geoweek_and_weekend_2020/ 今回作ってるサーバでできることをイメージするため、イベントページにデモを作りました音楽がなるので注意してね★ デモ

Slide 7

Slide 7 text

OpenStreetMapとは

Slide 8

Slide 8 text

世界中のマッパーによる地図データの集合世界中の道路や建物、飲食店の営業時間、災害情報、トイレの位置、バス路線、ベンチの位置、その他「なにもかも」を入れている世界単位の地理データを「単一の」データベースに保存する仕組み世界単位を「Planet」と言う OpenStreetMapとは

Slide 9

Slide 9 text

node, way, relationの三種類のXMLからなるデータで表現 wayが「閉じている」とPOLYGONになる子要素のtagがkey/valueとなる仕組み keyを「なんでも」指定できるため、「なにもかも」入れることができるデータ構造

Slide 10

Slide 10 text

例 ... ... ... ... ஫: ಡΈ΍͘͢͢ΔͨΊ͔ͳΓ؆ུԽ͍ͯ͠·͢

Slide 11

Slide 11 text

「なにもかも」入れてもいいけど、ルールはあるルール自体はOpenStreetMapのWikiを参照まずはここから！ https://wiki.openstreetmap.org/wiki/Contribute_map_data XMLはデータ量が大きくなるので大きなデータはProtocol Bufferを使うのが主流データ構造の補足

Slide 12

Slide 12 text

巨大なデータベースがOpenStreetMapの本質見えている地図はその一部でしかない営業時間やバス路線は可視化されないけどデータとしては入れられるデータベースを参照すればサービスを作ることができる！とはいえ、今日は見える方のお話ですおおまかにいうと

Slide 13

Slide 13 text

ৄ͍͜͠ͱ͸͜ͷຊʹԿނ͔ॻ͍ͯ͋Γ·͢ https://book.mynavi.jp/ec/products/detail/id=92636

Slide 14

Slide 14 text

Community 向け地図サーバ

Slide 15

Slide 15 text

OpenStreetMapの国内向けサーバ GMO お名前.com VPSを提供してもらっている日本の単位でアップデートをかけている日本以外の地域は国際サーバにProxyをしている竹島対策なんかもしている tile.openstreetmap.jp

Slide 16

Slide 16 text

インフラがかなり古い Ubuntu 12.04 地図のレンダリングスタイルも古いまま CartoCSSに移行できなかったラスタタイルのみしか提供ができていない老朽化

Slide 17

Slide 17 text

そもそもタイルサーバとは

Slide 18

Slide 18 text

インターネット上で「効率よく」地図を配信する仕組みの「ひとつ」地図画像はタイルという単位で切り取られているズームレベルが上がると縦横が倍の精度になるズームレベル０＝全世界タイルサーバ http://a.tile.openstreetmap.org/0/0/0.png

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

地図タイルに特化した座標系(Web Mercator) Google Mapsで利用されたことからかつてEPSG:900913と呼ばれていた 900913 = Google 一般的に知られている緯度経度は世界測地系(EPSG:4326)を利用タイルと違う座標系が使われるのに注意座標系: EPSG 3857

Slide 21

Slide 21 text

地図データをレンダリングして画像(ラスタ)にしたデータ縦256px横256pxの長方形の画像がベース Retina対応で512pxや766pxも可能 [email protected] とか [email protected]とかいうファイル名になるいずれにせよ256pxが基準ラスタタイル IUUQTNBQTHTJHPKQYZ[TUEQOH

Slide 22

Slide 22 text

ラスタタイルの仕組み(例) NPE NBQOJL 4UZMF 9.- 3&45 (&5 ը૾ mapnikがデータベースとスタイルを読み地図画像をレンダリングする

Slide 23

Slide 23 text

基本的に人間が「見る」ものが必要「見る」データにするためにスタイリングをするデータを提供する例もある RGB値＝標高値などラスタタイルの特徴 IUUQTDZCFSKBQBOEBUBHTJHPKQYZ[EFN@QOHQOH

Slide 24

Slide 24 text

スタイルを当てる単位がサーバ単位になる URLごとにスタイルを変更する仕組みは作れるがコストが高い CDNに乗っける場合など問題になるサーバ側にレンダリングのコストがかかる＝CPU負荷がかかる通信量も多いラスタタイルの問題点

Slide 25

Slide 25 text

スタイルに対するコストは結構問題

Slide 26

Slide 26 text

ベクターデータを提供するタイルベクターデータはスタイルデータを持たないクライアントがスタイルデータとともにレンダリングをするベクターデータ自体プログラムで制御可能 3Dの表示なども可能になるベクタータイル

Slide 27

Slide 27 text

ベクタータイルの仕組みスタイルなど .BQCPY 7FDUPS 5JMF 8FCαʔό 8FCαʔό レンダリングはクライアントで行う

Slide 28

Slide 28 text

Mapbox社が提供しているベクタータイルの仕様現在のデファクト・スタンダード Protocol Bufferに地図データを格納 Web Mercatorが前提 Mapbox Vector Tile

Slide 29

Slide 29 text

オーバーズームという概念があるデータはzoom 14で、スタイルでzoom 18をレンダリングするという仕組みラスタータイルに比べてデータ量が大きくても、ズームをしていくと結果として「通信量」が減るスタイリングをクライアント側でやるので配信のコスト自体は減るただし、ベクタータイルのみを配信するのは現実的ではないベクタータイルの利点

Slide 30

Slide 30 text

ベクタータイルとラスタータイルの両方を配信ラスタータイルのデータソースとしてベクタータイルを利用 tileserver-glというソフトウェアで上記の仕組みをサポートできる現実的な対応

Slide 31

Slide 31 text

新しいコミュニティ向けサーバ

Slide 32

Slide 32 text

さくらインターネットから「さくらのクラウド」月10万円分提供してもらっている 2018年から研究を開始現在は OSM Japan コミュニティサーバは移行済 tile2.openstreetmap.jp が現在構築中今日はこれの戦いがメイン新しいインフラ

Slide 33

Slide 33 text

ベクタータイルへのFirst step ダイレクト配信へのチャレンジ挫折新しい希望現在の体制戦いの歴史

Slide 34

Slide 34 text

元々仕事で「さくらのVPS」とtileserver-glを使ったベクター/ラスタタイル配信は実現済その構成をそのまま持ってこれた nginx (フロントエンド) Varnish Cache (キャッシュ) tileserver-gl ベクタータイルのFirst Step

Slide 35

Slide 35 text

日本のエリアだけ作成するのであれば問題はない tile.openstreetmap.jp がProxyとはいえ世界中を対応しているので、ベクタータイルでもやりたい Planet(世界中)をインポートするには最低1TBのストレージが必要 PostgreSQLだけで600GB消費！やりたいこと

Slide 36

Slide 36 text

だったら、インポートしたベクタータイルをPostgreSQLから直接配信すればいいのでは？ PostServeというプログラムがOpenMapTilesにあってそれがそのまま使えそう Varnish Cache挟めばよくね？ PostgreSQLのデータを差分更新すればよくね？やってみたダイレクト配信へのチャレンジ

Slide 37

Slide 37 text

構成図 Varnish PostgreSQL Postserve Varnish tileserver-gl tileserver-gl tileserver-gl vector.openstreetmap.jp tile2.openstreetmap.jp nginx OpenMapTiles ࠩ෼ߋ৽

Slide 38

Slide 38 text

1TB+差分更新をしようとしたら差分更新が間に合わないというオチが発生差分更新がどんどん遅れる差分更新は日本の単位でもギリギリでは、PostgreSQLを2系統用意してスイッチすればいいのでは？最低2TB必要挫折(1)

Slide 39

Slide 39 text

構成図 Varnish PostgreSQL Postserve Varnish tileserver-gl tileserver-gl tileserver-gl vector.openstreetmap.jp tile2.openstreetmap.jp nginx OpenMapTiles PostgreSQL Postserve Πϯϙʔτ

Slide 40

Slide 40 text

2TBにしたらその分マシンのスペックが落ちるので破滅 2TB=66,000円インポートも終わらんようなスペックになって壊滅した挫折(2)

Slide 41

Slide 41 text

Varnish + PostServe もおかしい動きをする PostServeが変な動きをしていたが、それは途中でupstreamで修正されたそもそもスペックがラスタ配信にとって厳しすぎるその他の挫折

Slide 42

Slide 42 text

試行錯誤しているうちにOpenMapTilesのコントリビュータに夜中3時の打ち合わせとかも出るようになった気づいたらPostGISとpgRoutingのDockerにパッチ書いてた pgRoutingの方はメンテナーになっていた(いや、社内だけどな！) がんばったんだよ

Slide 43

Slide 43 text

そもそも配信とタイル作成はサーバを分けるべきでは、タイル作成サーバをどうやって調達するべきか… 僕が行き着いた先は… 新しい希望

Slide 44

Slide 44 text

AMD Ryzen

Slide 45

Slide 45 text

Ryzen 5 3400G + Deskmini 300A + 32GB Memory + Intel m2 SSD 1TB 実家に置きました電源をスマートスピーカー経由で操作可能にした Raspberry Pi 4から「自宅」にVPNを貼り、外出先から「自宅」経由で「実家」のサーバにログインできるようにした誤実家サーバ(何サーバ組みました(てへ

Slide 46

Slide 46 text

PostgreSQL 9.6, 10, 11, 12, 13(リリース前)をテスト postgresql.conf を読み込むように調整 Mapnikベースのtileliveから、OpenMapTiles Tools 5.3で導入予定のpgqueryに変更 OpenMapTilesの最後のタスクであるベクタータイル作成が2倍以上パフォーマンスアップチューニング

Slide 47

Slide 47 text

tile2.openstreetmap.jp Spec: 20Core CPU / 64GB Memory / 500GB SSD 現在は日本地域に対応、Planet単位は現在実家サーバで構築中 nginxのログをfluentd+elasticsearch+grafanaで可視化してる現在の体制

Slide 48

Slide 48 text

構成図 Varnish tileserver-gl tileserver-gl tileserver-gl tile2.openstreetmap.jp nginx OpenMapTiles ࣮Ոαʔό

Slide 49

Slide 49 text

࣮Ոαʔόͷਐḿ

Slide 50

Slide 50 text

ՄࢹԽ

Slide 51

Slide 51 text

Planetの構築が無事できたら正式公開今ビルドしてるのが失敗するとまた一ヶ月ぐらいスケジュールが遅れます(てへ構築手順などは公開予定 Planetのタイル自体も公開する予定なので自分たちでタイルサーバ作れますよログとかはさくらインターネットさんに共有しようと思っている正式公開

Slide 52

Slide 52 text

というわけで、ここでQA

Slide 53

Slide 53 text

地図のイベント

Slide 54

Slide 54 text

FOSS4G Conferenceは地図のOSSのイベントとして世界各地で行われている日本では東京、関西、北海道、東海、新潟などで開催されている OSSなプログラムの紹介やサービスの紹介から政府系の発表など、様々な発表がある昨年のFOSS4G Niigataでは政府CIO補佐官が基調講演 FOSS4G Conference

Slide 55

Slide 55 text

OpenStreetMapのマッパーやエンジニアの祭典 2017年に国際カンファレンスを会津若松に誘致日本では1〜2年単位で開催去年はお休み State of the MAP

Slide 56

Slide 56 text

コロナのせいでオンラインへ開催日を調整して、State of the Map Japan 2020 と FOSS4G 2020 JAPAN Online を 2020年11月7日、8日の2日連続で開催今年のイベント

Slide 57

Slide 57 text

2020೥11݄7೔ 2020೥11݄8೔ ޕલ FOSS4G JP 2020 Online νϡʔτϦΞϧσΠ ޕޙ State of the Map FOSS4G JP 2020 Online ίΞσΠ ໷ ࠙਌ձ λΠϜεέδϡʔϧ

Slide 58

Slide 58 text

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 参加者募集

Slide 59

Slide 59 text

OpenStreetMap JP https://osm.jp OSGeo日本支部 https://www.osgeo.jp コミュニティサイト