Swagger UIをAWS Amplifyでホスティングする

Swaggerを利用したスキーマ駆動開発をするため、Swagger UIをホスティングできるサービスを探していました。  
要件としては以下の通りです。
  
- 適当なURLとしてアクセスできる
- Basic認証がかかっている
- デプロイが容易（自動だと嬉しい）

よくある選択肢として**GitHub Pages**や**Netlify**などの静的サイトジェネレータが挙げられますが、それらは自動デプロイなどは兼ね備えているもののBasic認証ができなかったり[^1]など、求めるものとして不十分でした。
そこで他に探してみたところ、[AWS Amplify](https://aws.amazon.com/jp/amplify/)が要件に合致しそうだと判断し、使ってみることにしました。この記事では導入の流れを紹介します。

# AWS Amplifyとは？
サーバーレスアプリケーションの構築を簡単にしてくれるJavascriptライブラリです。AWSの各種マネージドサービスをまとめて提供し、アプリケーションのビルド、デプロイ、公開を自動で行ってくれます。  
こちらの記事が詳しいです。
[AWS AmplifyでサーバレスWebアプリの構築(Cognito + API Gateway + IAM認証)](https://qiita.com/nakayama_cw/items/c4aae9ddb19c087e18cb)
  
- Githubリポジトリの特定ブランチにpushされることをフックにデプロイが行われる
- Basic認証が簡単に利用できる
- SSL証明書が追加料金なしで利用できること

上記の理由から今回はホスティングとして利用することにしました。

# やっていき
早速始めていきましょう。今回は以下の構成のswagger-uiのGitHubリポジトリがすでに存在していることとします。

```
.
└── docs
    ├── dist
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── index.html
    │   ├── oauth2-redirect.html
    │   ├── swagger-ui-bundle.js
    │   ├── swagger-ui-bundle.js.map
    │   ├── swagger-ui-standalone-preset.js
    │   ├── swagger-ui-standalone-preset.js.map
    │   ├── swagger-ui.css
    │   ├── swagger-ui.css.map
    │   ├── swagger-ui.js
    │   └── swagger-ui.js.map
    └── swagger.yml
```

Swagger UIのソースコードである `dist` ディレクトリの導入に関してはこちらを参考にしています。
https://github.com/peter-evans/swagger-github-pages/blob/master/README.md  
  
## リポジトリブランチの追加
まず[AWS Amplify Console](https://ap-northeast-1.console.aws.amazon.com/amplify/home?region=ap-northeast-1#/)にアクセスし、Deployの**GET STARTED** を選択します。
<img width="1437" alt="AWS_Amplify_Console.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236911/c4eb5d6d-7fc4-713a-b2ab-24ab44b75cd3.png">

今回はGitHubリポジトリからアプリケーションをデプロイするため、Git ProviderにGitHubを選択します。
<img width="1096" alt="AWS_Amplify_Console.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236911/aaeffbf3-c7ef-43ee-5979-fe318900cf4e.png">

GitHubの認証を行い、デプロイするリポジトリとブランチを選択し、次へをクリックします。
<img width="1039" alt="AWS_Amplify_Console.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236911/b0ade85c-0bdd-ad82-6f68-9b52539c4e69.png">

## ビルド設定
アプリケーションの名前を設定し、ビルド設定を行います。
<img width="1029" alt="AWS_Amplify_Console.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236911/a6e917c9-88ed-bbe5-f4db-bff978fdf5bb.png">

ビルド設定はブラウザ上で編集する方法と、リポジトリに `amplify.yml` を追加し利用することもできます。
今回は以下のymlファイルをリポジトリに追加しました。

```yaml:apmlify.yml
version: 0.1
frontend:
  artifacts:
    baseDirectory: /
    files:
      - 'docs/*' # docs以下のファイルのみデプロイする
  cache:
    paths: []
```

ディレクトリを指定するのみの簡単な構成です。
今回のSwagger UIの場合、docsディレクトリに存在する `swagger.yml` をSwaggerUIが見ているだけなのでビルドは必要ありませんでした。
ビルド設定のドキュメントは[こちら](https://docs.aws.amazon.com/ja_jp/amplify/latest/userguide/build-settings.html)です。

## 確認
構成を確認し、 `保存してデプロイ` をクリックします。
<img width="1044" alt="AWS_Amplify_Console.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236911/001f405f-be26-d911-f231-0c0ea3b5d1b2.png">

以上でデプロイ/公開が行われます。とっても簡単ですね。
<img width="1391" alt="AWS_Amplify_Console.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236911/63fa7bc1-4e00-7094-171b-814df95f5ab2.png">
パイプラインが終了すれば `ドメイン` からアクセスできますが、現状だとアクセスしてもエラーが表示されます。

## リダイレクト設定
デフォルトの設定では `https://xxxxxxxx.amplifyapp.com` にアクセスするとルートディレクトリの `index.html` を見に行ってしまい、そんなものは存在しないためエラーになります。Swagger UIのビューファイルは `docs/dist/index.html` のため、リダイレクトして表示させる必要があります。  
  
サイドバーの `アプリの設定→書き換えて、リダイレクト` をクリックします。
`編集` をクリックし、以下のようにターゲットアドレスを設定します。
<img width="1146" alt="AWS_Amplify_Console.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236911/3a5f38f0-ca19-f680-e5e3-602594d5633d.png">

これでSwagger UIの表示ができました。

## Basic認証を追加する
最後にBasic認証を追加します。
サイドバーの `アクセスコントロール` をクリックします。
<img width="1138" alt="AWS_Amplify_Console.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236911/35b3db8b-e197-27c0-a09c-222f930c3a4e.png">

該当のブランチに対して、usernameとpasswordを設定します。  

# 終わり
以上でかんたんにSwagger UIのホスティングができるようになりました。AWS Amplifyには他にも今回利用しなかったフロントエンドのビルドはもちろん、Cognitoを用いた認証やPinPointを用いたアクセス解析、キャッシュデータの管理などの機能を兼ね備えています。ぜひ使ってみてください。

[AWS Amplify](https://aws.amazon.com/jp/amplify/)

[^1]: Netlifyの場合Basic認証を行うこともできるが、月45ドルの有料プランの加入が必要と少々高い。