itoma(2)：unvt/itoma（ベクトルタイルのためのArcGIS REST API 実装ツール）をhttps対応させる #unvt

はじめに

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モードでもやりました。）