はじめに

unvt/itomaはベクトルタイルのためのArcGIS REST API 実装ツールです。今年の3月末、国土地理院からFOSS4Gツールとして公開されました。

私も、前回の記事で unvt/itoma を試していました。その結果、どうも http://localhost でホストしたベクトルタイルサーバーをArcGIS Onlineで読み込めない、ということに気がつきました。

なんでだろうと少し調べてみると、少し前にArcGIS Onlineはhttp対応をやめていたようです（こちらの記事）。なるほどArcGIS Onlineでは、ベクトルタイルレイヤの読み込みについては、httpで指定しても、スタイルファイルを読みに行く先が https://localhost になっている。これではローカルでhttpホストだと見られない、というわけです。

せっかくの itoma の機能がもったいない。どうにかitomaをhttps対応させてみよう、具体的にはlocalhostのhttps化をやってみようと思いました。その結果をこの記事にまとめます

オープンソース、FOSS4Gツールの素敵なところですが、コードがオープンなので私もunvt/itomaをフォークして実験してみました。今後、itomaがさらに発展するといいなと思います。

環境

Windows 10 (Enterprise)
Docker version 20.10.8, build 3967b7d
つかったDocker container unvt/nanban

手順

Step1: httpsのためのドメインとSSL認証取得

このステップのためには以下の二つの記事を参考にしました。（ありがとうございます。）

1-1. ドメイン取得

ドメインについて長期間利用できる保証は必要ないので、無料のdomainサービス（freenom.com）を使ってvt-itomas.mlというドメインをとり、localhostを127.0.0.1にするAレコードを追加しました。これでlocalhost.vt-itomas.mlが127.0.0.1になるかなと思います。（つまづきメモ：ドメインの利用可否をチェックしたあと、ドメインの検索窓のドメインで.mlなどをつけて申請しないと上手くいきません。）

1-2. Let's Encryptで認証ファイル取得

Let's EncryptでのSSL証明書は前にもとったことがあるので、自分の実験用サーバーにCertbotはすでに入っている。そこのcertbotを使って、今回あらたに取得したドメインのための証明書をとった。

certbot --version
sudo certbot certonly --manual -d localhost.（自分のドメイン） --preferred-challenges dns

ドメインに証明書をとるとき、途中でTXTをデプロイ（実装しなさい）というように言われるので、ドメインの管理サイトで指定の文字列を追加します。

最初、ワイルドカード（*.vt-itomas.ml）で証明書をとろうとしたら（上図）失敗しましたが、localhost.vt-itomas.mlで取得したら成功。（最初の時はdigして値が返ってくるのを確認しなかったので、多分テキストの登録が反映されていなかっただけだと思いますが。）

サーバーの中にpemファイルが出来ています。Let's encryptだと、cert.pem, chain.pem, fullchain.pem, privkey.pemの4つが出来ていると思います。これで、localhost.vt-itomas.ml のSSL証明書がとれたはず（そしてこれが127.0.0.1にいくはず）。
privkey.pem　と　fullchain.pem　はローカル環境にもってきてitomaの中に入れておきます。

Step2: itomaを改造

unvt/itomaをフォークして、github.com/ubukawa/itomaにもってきました。これをクローンして作業をします。

2-1: 作業環境を整える

itomaを動かすにはLinuxの方がいいでしょうから、dockerでunvt/nanbanをスタートします。これには、unvt/itoma がもう入っているので、アンインストールします。

（itomaをクローンしておく）
cd itoma
Docker run -it --rm -v ${PWD}:/data -p 8080:8080 unvt/nanban
cd /data
npm uninstall -g @unvt/itoma

また、sshのkeyを入れておくフォルダssh-keyを作って、そこにprivkey.pemとfullchain.pemを入れておきます。（2つのファイルは他の人に渡らないようgitignoreに登録しておく。）

2-2: nodejsモジュール追加

私の実力ではあんまり難しいことはできないですが、httpsのため、nodeパッケージのspdyを追加します。

npm install spdy

2-3: src/command/serve.ts をいじる

見てみるとこのファイル（src/command/serve.ts）がhttpホスティングのことをやっているみたいです。ここをいじります。

変数を追加

spdyパッケージを追加したので、tsファイルの中でも定義します。また、sshキーへのパスを定義します（外部でやるときはconfigファイルとか.envファイルから読ませましょう）。

変数の追加

const spdy = require('spdy') // test for https
const privkeyPath = 'ssh-key/privkey.pem' //for https (it should be stored in config)
const fullchainPath = 'ssh-key/fullchain.pem' //for https (it should be stored in config)

serverPromiseの修正

過去のunvt/marbleなどの経験で、httpからhttpsに切り替えたことがあります。その時のコードを参考に、だいたいこんな感じだろうということで修正してみました。（下の通り）

serverPromiseの修正

  const serverPromise = new Promise<Server>((resolve) => {
    /*
    const server = app.listen(port, () => {
      console.log(`itoma listening on port ${port}\n`)
      console.log(`MapLibre interface: http://localhost:${port}/maplibre`)
      console.log(`Mapbox interface  : http://localhost:${port}/mapbox`)
      console.log(`ArcGIS interface  : http://localhost:${port}/arcgis`)
      resolve(server)
    })
    */
   //test (from here)
    const server = spdy.createServer({
      key: fs.readFileSync(privkeyPath),
      cert: fs.readFileSync(fullchainPath)
    }, app).listen(port, () => {
      console.log(`itoma listening on port ${port}\n`)
      console.log(`MapLibre interface: https://localhost:${port}/maplibre`)
      console.log(`Mapbox interface  : https://localhost:${port}/mapbox`)
      console.log(`ArcGIS interface  : https://localhost:${port}/arcgis`)
      resolve(server)
    })
    //test (until here)
  })

という作業をフォークしたレポジトリでやりました。

2-4: Distをつくる

npm run buildをして、distをつくります。そして出来たdistの中のcli.jsがitomaのツールのようです。itomaの代わりにdist/cli.jsを実行すればよいというようなイメージです。

Step3. 改造したitomaを動かして見てみる

2-4の作業から同じところでつづけます。前にitomaを実験したときのレポジトリubukawa/itoma-testからtestフォルダのスタイルをもってきます。そして、dist/cli.js serve itoma-test/test/style.ymlと実行してみました。（strictモードでもやりました。）

HTTPSにしているので、以下のようにアドレスをうつとローカルホストになります。

MapLibreのリンク先では参照スタイルのURLがhttpになっているので見られませんでした。どこかを直します。

おもしろいことにArcGISは見られました。（以下はstrictモード）

そして、ArcGIS Online用のindexもなんとhttpsで見られるようになりました。このURLをArcGISで読めば、ローカルホストながらhttpsなので中身がみられそうですね。今度実験します。（今日は眠たいのでここまで）

あと、以下の画面に出ているdepuricationのことも今後調べます。

まとめ

このブログを書きながらでしたが、unvt/itomaをフォークし、これをhttps化したローカルホストで使えそうというところまできました。これにより、今後、ArcGIS Onlineでもプレビューを見られるようになるはずです。

謝辞

今回の作業にあたっては、ローカルホストのhttps化に関して非常によい取組みがまとめられており助けられました。リンクで示した2つのブログに感謝します。また、unvt/itomaの開発者の皆様に敬意を表します。

References

UNVT/itoma https://github.com/unvt/itoma
ArcGIS関係の参考
- ArcGIS Online HTTPS Only Enforcement - CommunityHub
ローカルホストのhttps化の参考
- ローカル開発環境のhttps化　| blog.jxck.io
- localhost(127.0.0.1)をHTTPS化して開発環境を作る - Crieit
作業で使ったもの
- ドメインの取得　Freenom
- SSL認証の取得　Let's Encrypt
自分の過去の記事
- ベクトルタイルのためのArcGIS Rest API実装ツール unvt/itoma を試してみる
作業用レポジトリ　https://github.com/ubukawa/itoma