レンタルサーバでcoesiteレポジトリを使用してベクトルタイルをホスティングする（リバースプロキシ）

# はじめに

[こちらの記事](https://qiita.com/k96mz/items/6e80215e1b50f752248f)でcoesiteレポジトリについて解説を行いました。本記事では、レンタルサーバでcoesiteレポジトリを使用してベクトルタイルをホスティングする過程について記載したいと思います。
サーバに関しては、[こちらの記事](https://qiita.com/k96mz/items/ba983b4d34e94aafa4c2)を参考にします。プロキシサーバを利用しています。

# コードの取り込み

ホスティングサーバに接続して、編集した[coesiteレポジトリのコード](https://github.com/k96mz/coesite)を取り込みます。

git をインストールする必要があるので、以下のコードでインストールします。
```
sudo dnf install git -y
```

以下でcoesiteレポジトリのコードを取り込みます。
```
git clone https://github.com/k96mz/coesite.git
```

```
npm install
```
として、必要なモジュールをインストールしておきます。


# 認証

```
node app.js
```
としてサーバを実行し、
https://k96mz.com
にアクセスします。

無事に以下のとおり、ページが表示されました。

![スクリーンショット 2024-12-06 16.34.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684675/43763dc7-4f4c-aeac-df35-746c15a32bcc.png)

次に.envファイルを作成して必要な情報を記載します。
新しいサーバを利用する場合には、Entra IDのCertificates & secretsで新しく「OAUTH_APP_SECRET」を作成して、.envファイルに記載しておきます。

また、以下の設定を記載して、さらにEntra IDのAuthenticationにも追加しておきます。
OAUTH_REDIRECT_URI=https://k96mz.com/auth/callback

以前に試行錯誤していたときに、以下のコードが残っていたため、最初はエラーが出ましたが、コードを削除した後は問題ありませんでした。
```javascript: auth.js
req.session = { ...req.session };
```

# リバースプロキシを使用して地図を表示する
サインイン後は以下のページが表示されます。

![スクリーンショット 2025-02-12 16.24.55.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684675/efdc3788-e949-4841-a881-c5947763baee.jpeg)

試しに、map/un-z5.htmlをクリックすると以下の通り地図が表示されます。正常にHTTP/2プロトコルで表示されていました。

![スクリーンショット 2025-02-12 16.31.32.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684675/7480b9b2-593a-4c50-8a1f-5c9fcaa14db9.jpeg)

※ちなみに、express-session は HTTP/1.x 向け に設計されており、HTTP/2 ではエラーが発生します。そのためリバースプロキシを使用しない状態で、express-session の代わりに cookie-session を使用すると、HTTP/2 でも問題なく動作すると思い試しましたが、サインイン後のページに飛ばず、うまく解決出来ませんでした。
やはり、以下のように
クライアント ⇄（HTTP/2）⇄ Nginx ⇄（HTTP/1.1）⇄ Express 4.x
が良い解決策だと思います。


# PM2を使用してサーバを永続化する
次にPM2を使用してサーバを永続化します。[こちらの記事](https://qiita.com/k96mz/items/668bee0c6d751a444b5c#pm2%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9Fnodejs%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AE%E6%B0%B8%E7%B6%9A%E5%8C%96)を参考に設定していきます。


記事にある通り、まずはPM2を

```
npm install pm2 -g
```
としてインストールします。 無事にインストール出来ました。
次に
```
pm2 start app.js  --name server-test-01
```
として、サーバーを起動します。

これで、
https://k96mz.com
とすることでサイトが表示されます。

記事にある通り、サーバの停止や削除も以下の通り簡単に行う事ができました。

停止
```
pm2 stop server-test-01
```

削除
```
pm2 delete server-test-01
```

# crontabを利用した定期的なサーバの再起動

以前の記事を参考に以下の通りシェルスクリプトを作成しました。

```sh:pmreload2.sh
#!/bin/bash

export PATH=$PATH:/home/koji/.nvm/versions/node/v16.20.2/bin

~/.nvm/versions/node/v16.20.2/bin/pm2 reload --update-env /home/koji/coesite/app.js  --name server-test-01
date
```

作成したシェルスクリプトに対して実行権限を付与します。これをしないと実行出来ないので、忘れずに付与します。
```
chmod +x pmreload2.sh
```

次に、
```
crontab -e
```
としてcronエディタを起動し、以下のように記載するとシェルスクリプトが１分毎に実行されます。

```
*/1 * * * * /home/koji/coesite/pmreload2.sh >> /tmp/cron_output.txt 2>&1
```

上記は、１分ごとに実行していますが、pm2 には プロセス監視機能 があるため、cron で1分ごとに実行するより pm2 に監視させる方が良いらしいです。



# まとめ
レンタルサーバでcoesiteレポジトリを使用してベクトルタイルをホスティングする過程について記載しました。
プロキシサーバを使用することで、
(failed)net::ERR_HTTP2_PROTOCOL_ERROR
のエラーがでなくなりました。

# Reference

https://qiita.com/k96mz/items/6e80215e1b50f752248f

https://qiita.com/T-ubu/items/f7147def371b49cb232c

https://qiita.com/k96mz/items/ba983b4d34e94aafa4c2

https://qiita.com/k96mz/items/668bee0c6d751a444b5c#pm2%E3%82%92%E5%88%A9%E7%94%A8%E3%81%97%E3%81%9Fnodejs%E3%82%B5%E3%83%BC%E3%83%90%E3%81%AE%E6%B0%B8%E7%B6%9A%E5%8C%96