coesite4レポジトリを改良して認証なしサーバレポジトリを作成する（個人メモ）

# はじめに
 [coesite4レポジトリ](https://github.com/unvt/coesite4/tree/main)は、認証ありのサーバであるため、気軽にベクトルタイルをホストすることが出来ません。そのため、テスト用に認証なしに改良して、レポジトリを新たに作成しようと思います。
新しく作成したレポジトリは[こちら](https://github.com/k96mz/20250602coesite4withoutAuthentication)です。
自身でレンタルしたサーバLinux9に元のフォルダを作成しています。

# 削除する機能
coesite4から削除する機能としては、以下です。

- 認証
- セッション
- タイル認証

# コード修正

## app.js
app.jsについては、認証に関するコードを無効化します。

```js: app.js
// const msal = require("@azure/msal-node");


// MSAL config
// const msalConfig = {
//   auth: {
//     clientId: process.env.OAUTH_CLIENT_ID,
//     authority: process.env.OAUTH_AUTHORITY,
//     clientSecret: process.env.OAUTH_CLIENT_SECRET,
//     //Client credential (secret, certificate, or assertion) must not be empty when creating a confidential client.
//     //An application should at most have one credential
//   },
//   system: {
//     loggerOptions: {
//       loggerCallback(loglevel, message, containsPii) {
//         console.log(message);
//       },
//       piiLoggingEnabled: false,
//       logLevel: msal.LogLevel.Verbose,
//     },
//   },
// };



// app.locals.msalClient = new msal.ConfidentialClientApplication(msalConfig);



// var authRouter = require("./routes/auth"); //before app


// app.use("/unvt/auth", authRouter); //after app.use('/', indexRouter)
```


セッション機能（Session + Flash）に関するコードも無効化します。

```js: app.js
// const session = require("express-session");
// const MySQLStore = require("express-mysql-session")(session); //Added for session store in mysql
// const flash = require("connect-flash");


//session with mysql (from here)
// const mysqlOptions = {
//   host: "localhost",
//   port: 3306,
//   user: process.env.MYSQL_USER,
//   password: process.env.MYSQL_PASSWORD,
//   database: process.env.MYSQL_DATABASE,
// };
// const sessionStore = new MySQLStore(mysqlOptions);
// const sess = {
//   secret: process.env.OAUTH_CLIENT_SECRET,
//   cookie: { maxAge: 60000000 }, //16h40m
//   store: sessionStore,
//   resave: true, //make it true if necessary
//   saveUninitialized: true, //make it true if necessary
// };
// //sess.cookie.secure = true //for production
// app.use(session(sess));
// //session with mysql (until here)

// // Flash middleware
// app.use(flash());

// // Set up local vars for template layout
// app.use(function (req, res, next) {
//   // Read any flashed errors and save
//   // in the response locals
//   res.locals.error = req.flash("error_msg");

//   // Check for simple error string and
//   // convert to layout's expected format
//   var errs = req.flash("error");
//   for (var i in errs) {
//     res.locals.error.push({ message: "An error occurred", debug: errs[i] });
//   }

//   // Check for an authenticated user and load
//   // into response locals
//   if (req.session.userId) {
//     res.locals.user = app.locals.users[req.session.userId];
//   }

//   next();
// });

```

タイルの認証については、オープンのものを使用します。
```js: app.js
// var VTRouter = require("./routes/VT"); //test 0308
var VTORouter = require("./routes/VT-open"); //test 0322(only for development env.)


// app.use("/unvt/VT", VTRouter);
app.use('/unvt/VT-open', VTORouter)

```


## 不要パッケージの削除

以下のパッケージは不要なので削除しました。
```
@azure/msal-node
express-session
express-mysql-session
connect-flash
```

## default.json
default.jsonについては、default-exmple.hjsonをコピーして作成しておきます。以下の部分を修正します。

```test: default.hjson
privkeyPath: ./key/privkey.pem
fullchainPath: ./key/cert.pem
port: 8080
```

自身で利用しているプロキシサーバの設定がHTTPSを利用し、ポートが8080なので、それに合わせています。

## index.htmlの作成
index.htmlをpublicフォルダの下に作成します。

```html: index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h4>Welcome </h4>

    <h4>Map in Geoportal</a></h4>
    <ol>
      <li><a href="./geoportal.html">Link to the Geoportal map</a>.</li>
    </ol>

    <h4>Map APP in our page</h4>
    <ol>
      <li><a href="./map-l">Simple Web Map APP</a> with MapLibre-gl.js version 5.3.0</li>
      <li><a href="./webmap-l">Web Map APP (3 styles)</a> - with several MapLibre plugins</li>
      <li><a href="./webmap-3d">Web Map APP - 3D (Testing)</a> - with MapLibre version 5.3.0</li>
    </ol>
  </body>
</html>
```

index.htmlのリンク先に含まれるgeoportal.htmlをpublicフォルダに作成しました。
geoportal.htmlにおいて、
style: "./styles/style-geoportal.json"
としています。


```html: geoportal.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Display a map</title>
    <meta
      property="og:description"
      content="Initialize a map in an HTML element with MapLibre GL JS."
    />
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="./maplibre-gl@5.3.0/maplibre-gl.js"></script>
    <link href="./maplibre-gl@5.3.0/maplibre-gl.css" rel="stylesheet" />
    <link
      href="./watergis/maplibre-gl-export@4.0.1/maplibre-gl-export.css"
      rel="stylesheet"
    />
    <script src="./watergis/maplibre-gl-export@4.0.1/maplibre-gl-export.umd.js"></script>
    <link
      href="./watergis/maplibre-gl-legend@2.0.5/maplibre-gl-legend.css"
      rel="stylesheet"
    />
    <script src="./watergis/maplibre-gl-legend@2.0.5/maplibre-gl-legend.umd.js"></script>
    <style>
      body {
        margin: 0;
        padding: 0;
      }
      html,
      body,
      #map {
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      const map = new maplibregl.Map({
        container: "map", // container id
        style: "./styles/style-geoportal.json", // style URL
        center: [0, 0], // starting position [lng, lat]
        zoom: 1, // starting zoom
        maplibreLogo: true,
        hash: true,
      });

      //UI
      map.addControl(new maplibregl.NavigationControl(), "bottom-right");
      map.addControl(new maplibregl.ScaleControl());

      //Export
      map.addControl(
        new MaplibreExportControl.MaplibreExportControl({
          PageSize: MaplibreExportControl.Size.A4,
          PageOrientation: MaplibreExportControl.PageOrientation.Landscape,
          Format: MaplibreExportControl.Format.PNG,
          DPI: MaplibreExportControl.DPI[300],
          Crosshair: true,
          PrintableArea: true,
          Local: "en",
        }),
        "top-right"
      );

      //legend
      map.addControl(
        new MaplibreLegendControl.MaplibreLegendControl(
          {},
          {
            showDefault: false,
            onlyRendered: true,
            reverseOrder: true,
          }
        ),
        "bottom-left"
      );

      //debug
      map.showTileBoundaries = true;
      map.showCollisionBoxes = false;
    </script>
  </body>
</html>
```


上記に対応して、styleフォルダに、esri/UniteStreetMapVector/style.json
をコピーして、名前をstyle-geoportal.jsonとして、以下のとおり修正します。

```js: style-geoportal.json
"sprite": "https://k96mz.xyz/unvt/sprite-rev/sprite_S",
"glyphs": "https://k96mz.xyz/unvt/font/{fontstack}/{range}.pbf",

"tiles": ["https://k96mz.xyz/unvt/VT-open/zxy/UniteStreetMapVector/{z}/{x}/{y}.pbf"],
```
urlをtilesに修正しています。


## map-l.js, webmap-l.js, webmap-3d.jsの編集
３つのjsファイルについて、セッション情報などを省いて記載します。

```js: map-l.js
const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  res.render("map-l", { layout: false });
});

module.exports = router;
```

```js: webmap-l.js
const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  res.render("webmap-l", { layout: false });
});

module.exports = router;
```


```js: webmap-3d.js
const express = require("express");
const router = express.Router();

router.get("/", (req, res) => {
  res.render('webmap-3d',{ layout: false } );
});

module.exports = router;
```


# スタイルファイルのURL変更
style-std.json、style-prod.json、style-el.jsonについて、style-geoportal.jsonと同様にURLを変更します。

```js: style-std.jsonなど
"sprite": "https://k96mz.xyz/unvt/sprite-rev/sprite_S",
"glyphs": "https://k96mz.xyz/unvt/font/{fontstack}/{range}.pbf",

"tiles": ["https://k96mz.xyz/unvt/VT-open/zxy/UniteStreetMapVector/{z}/{x}/{y}.pbf"],
```

style-el.jsonについては、contourとdemについてもURLの変更を忘れないようにします。

esri/UniteStreetMapVector/index.jsonとesri/UniteStreetMapVector/style.jsonについても、変更します。

style.jsonのurl部分は以下のようにします。
```json: style.json
"url": "https://k96mz.xyz/unvt/rest/services/esriIF/UniteStreetMapVector/VectorTileServer",
```

上記を修正してリポジトリを作成しました。

# 地図タイルのコピー
地図タイルデータはレポジトリに含まれません。必要な地図タイルをローカルの以下にコピーしてきます。

/mbtiles/UniteStreetMapVector
/mbtiles/contour
/rgbElev

6-39-32（モンバサ周辺）をコピーしました。
ホストしてみます。
https://k96mz.xyz/unvt/index.html

無事に以下のサイトが見られました。

![スクリーンショット 2025-06-02 15.11.38.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3684675/f118aba3-41f9-48a3-b868-06c767eac678.jpeg)

それぞれのリンクをクリックすると、地図が見られます。

# まとめ
テスト用に認証なしのサーバをレンタルサーバLinux9上に構築しました。
タイルURLは以下であり、QGISなどでタイルが見られるかのテストを行えます。
※サーバを立ち上げている時のみ反応します。
https://k96mz.xyz/unvt/VT-open/zxy/UniteStreetMapVector/{z}/{x}/{y}.pbf

UNVTスタイルファイルURLは以下です。
https://k96mz.xyz/unvt/styles/style-std.json

GeoPortalスタイルファイルURLは以下です。
https://k96mz.xyz/unvt/styles/style-geoportal.json


# Reference
https://github.com/k96mz/20250602coesite4withoutAuthentication

https://github.com/unvt/coesite4/tree/main