OpenStreetMap(以下OSM)を利用したWebアプリを作成中です
OSMでは利用規約として「タイルサーバー(地図の画像を生成するサーバー)」に負荷をかけないようにすること という規約があります。
今回はその規約を遵守するため、クライアントとOSMのタイルサーバーとの間にProxy Cacheを導入することにしました
Nginxを利用したProxy Cache設定例
NginxはDockerコンテナで構築し、nginx.confにProxy Cacheの設定を行いました
Dockerファイルとnginx.confの設定は以下のとおりです
# docker composeサンプル
services:
static-file-proxy:
image: nginx:alpine
container_name: static-file-proxy
ports:
- "8888:80"
volumes:
- ./nginx/nginx.conf:/etc/nginx/nginx.conf:ro
- ./map_tiles_cache_data:/var/cache/nginx# nginx.conf例
worker_processes 1;
events {
worker_connections 1024;
}
http {
proxy_cache_path /var/cache/nginx levels=1:2 keys_zone=map_tiles_cache:10m max_size=1G inactive=7d use_temp_path=off;
server {
listen 80;
location /map_tiles/ {
proxy_pass https://tile.openstreetmap.org/;
proxy_cache map_tiles_cache;
proxy_cache_key $uri;
proxy_cache_valid 200 304 7d;
proxy_cache_use_stale error timeout updating;
proxy_buffering on;
add_header X-Cache-Status $upstream_cache_status;
}
}
}
以上の設定を行い、docker compose up -dコマンドでコンテナを起動すればキャッシュサーバーの完成です
動作確認
今回の設定では、以下にアクセスするとキャッシュが行われる設定となっています
http://localhost:8888/map_tiles/12/3639/1611.png
(URL内の3つの数値はズームレベル、緯度、経度を表していて、ここの値を変更すると、返却される地図画像が変わります)
同じページにアクセスすると、キャッシュが効いていることがわかります
(プライベートモードなどで確認することを推奨、ローカルキャッシュが利用されるとプロキシキャッシュが効いているか不明なため)
キャッシュキーとしてURLを設定しているため、URLを変更すればキャッシュがヒットしないことがわかります
以上
ということで、簡単ですがNginxのProxy Cache機能の紹介でした
今回はOSMのキャッシュを例としましたが、当然通常のスタティックファイル(画像やjs, cssなど)もキャッシュできるので、例えばオブジェクトストレージに保存した画像をNginxにキャッシュする、なんて方法も使えそうです
Proxy Cacheの機能を利用して、OSMのサーバーに負荷を掛けず、ユーザーにも高速に地図表示ができるようなWebアプリにしたいですね
