シンプルなAmazon Location Serviceのスターターを公開してみた

![img](https://day-journal.com/memo/images/try-073_00.gif)

<br>

![img](https://day-journal.com/memo/images/try-073_01.png)

<br>

この記事は、「[MIERUNE Advent Calendar 2021](https://qiita.com/advent-calendar/2021/mierune)」の9日目の記事です。

### シンプルなAmazon Location Serviceのスターターを公開してみました :tada:  

今までの[記事](https://qiita.com/dayjournal/items/3c6637779133bce44fdb)では、ログイン機能とフレームワークがある前提で[Amazon Location Service](https://aws.amazon.com/jp/location)のアプリケーション構築を紹介してきましたが、これらの機能を利用しないシンプルな「[amazon-location-service-starter](https://github.com/dayjournal/amazon-location-service-starter)」というスターターを構築してみました :bulb: 

https://github.com/dayjournal/amazon-location-service-starter

<br>

## 利用方法
リポジトリをクローンし、READMEに書かれている流れで、AWS Amplifyのインストールと設定をするだけでアプリケーション実行の準備が完了になります。

```sh
npm install -g @aws-amplify/cli
amplify configure
npm install
amplify init
amplify push
```

また、AWS Amplifyを設定済みのかたは、下記のみでアプリケーション実行の準備が完了になります。

```sh
npm install
amplify init
amplify push
```

<br>

ここからはスターターの内部を少し紹介していきたいと思います！

## Amazon Location Serviceの設定
はじめに、Amazon Location Serviceの設定ですが、内部的にはAmplify Geoを利用し手軽に環境構築をしています。  

認証機能は通常通り追加しています。

- [AWS Amplify #003 - 認証機能を追加](https://day-journal.com/memo/aws-amplify-003)

```sh
amplify add auth
```

<br>

マップ機能は基本部分は通常通りで問題ありませんが、アクセス対象だけ「Authorized and Guest users」に設定しています。この設定を選ぶことで、ログイン機能を利用しなくても誰でも閲覧できる設定になります。

- [AWS Amplify #004 - 位置情報機能(マップ)を追加](https://day-journal.com/memo/aws-amplify-004)

```sh
amplify add geo
```

![img](https://day-journal.com/memo/images/try-073_03.png)  

<br>

## フロントエンド
次に、マップアプリケーション部分を紹介します。

実行環境

- node v16.10.0  
- npm v7.24.0  

全体構成

![img](https://day-journal.com/memo/images/try-073_02.png)

#### package.json

```json
{
    "name": "amazon-location-service-starter",
    "version": "0.1.0",
    "description": "",
    "main": "main.js",
    "scripts": {
        "build": "webpack --mode=production",
        "dev": "webpack serve --mode=development"
    },
    "keywords": [],
    "author": "Yasunori Kirimoto",
    "license": "ISC",
    "devDependencies": {
    "webpack": "^4.46.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^3.11.2"
    },
    "dependencies": {
        "aws-amplify": "^4.3.10",
        "css-loader": "^5.2.6",
        "file-loader": "^6.2.0",
        "maplibre-gl": "^1.15.2",
        "maplibre-gl-js-amplify": "^1.1.2",
        "style-loader": "^2.0.0",
        "url-loader": "^4.1.1"
    }
}
```

<br>

#### webpack.config.js

```javascript
const webpack = require('webpack');

module.exports = {
    mode: 'production',
    entry: './_resouce/main.js',
    output: {
        path: __dirname + '/dist',
        filename: 'app.js',
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                    },
                ],
            },
            {
                test: /\.(png|svg|jpg|gif)$/,
                use: {
                    loader: 'url-loader',
                    options: {
                        name: './dist/img/icon/[name].[ext]',
                    },
                },
            },
        ],
    },
    plugins: [
        new webpack.ProvidePlugin({
            maplibregl: 'maplibre-gl',
            maplibregljsamplify: 'maplibre-gl-js-amplify',
        }),
    ],
    devServer: {
        contentBase: __dirname + '/dist',
        publicPath: '/',
        watchContentBase: true,
        open: true,
    },
};
```

<br>

MapLibre GL JSとMapLibre GL JS Amplifyを定義します。

```javascript
plugins: [
    new webpack.ProvidePlugin({
        maplibregl: 'maplibre-gl',
        maplibregljsamplify: 'maplibre-gl-js-amplify',
    }),
],
```

<br>

/_resouce

#### main.js

```javascript
import './css/style.css';
import 'maplibre-gl/dist/maplibre-gl.css';

import './js/script.js';
```

<br>

MapLibre GL JSを読み込みます。

```javascript
import 'maplibre-gl/dist/maplibre-gl.css'
```

<br>

/_resouce/css

### style.css

```css
html,
body {
    height: 100%;
    padding: 0;
    margin: 0;
}

#map {
    z-index: 0;
    height: 100%;
}
```

<br>

マップのスタイルを定義します。

```css
#map {
    z-index: 0;
    height: 100%;
}
```

<br>

/_resouce/js

#### script.js

```javascript
import Amplify from 'aws-amplify';
import awsconfig from '../aws-exports';
Amplify.configure(awsconfig);

async function mapCreate() {
    const map = await maplibregljsamplify.createMap({
        container: 'map',
        center: [139.7648, 35.6794],
        zoom: 15,
        bearing: 64.8,
        pitch: 60,
        hash: true,
    });
    map.addControl(new maplibregl.NavigationControl());
}
mapCreate();
```

<br>

Amplifyを設定します。

```javascript
import Amplify from 'aws-amplify';
import awsconfig from '../aws-exports';
Amplify.configure(awsconfig);
```

<br>

マップを設定します。

```javascript
async function mapCreate() {
    const map = await maplibregljsamplify.createMap({
        container: 'map',
        center: [139.7648, 35.6794],
        zoom: 15,
        bearing: 64.8,
        pitch: 60,
        hash: true,
    });
    map.addControl(new maplibregl.NavigationControl());
}
mapCreate();
```

<br>

簡易ローカルサーバーで確認してみます。

```shell
npm run dev
```

<br>

Amplifyのデプロイが正常にされているとマップが表示されます :bulb: 

![img](https://day-journal.com/memo/images/try-073_00.gif)

#### シンプルなAmazon Location Serviceのスターターを公開しました :thumbsup: 

ログイン機能とフレームワークを利用しない、シンプルなAmazon Location Serviceスターターを構築してみました。手軽に表示可能なのでゼヒ試してみて頂ければと思います :thumbsup: ログイン機能を利用しないため、公開環境での運用時は大量アクセスによる課金等にご注意ください。

<br>

AWS AmplifyとMapLibre GL JSについて、他にも記事を書いています。よろしければぜひ。
<a href="https://day-journal.com/memo/tags/AWS-Amplify" target="_blank">tags - AWS Amplify</a>
<a href="https://day-journal.com/memo/tags/MapLibreGLJS" target="_blank">tags - MapLibre GL JS</a>

やってみたシリーズ :grinning:
<a href="https://day-journal.com/memo/tags/Try" target="_blank">tags - Try</a>

https://qiita.com/dayjournal/items/3c6637779133bce44fdb

<br>
<br>

<a href="https://dayjournal.booth.pm" target="_blank"><img src="https://day-journal.com/memo/images/etc/book.png" alt="book"></a>