Swaggerを利用したスキーマ駆動開発をするため、Swagger UIをホスティングできるサービスを探していました。

要件としては以下の通りです。

適当なURLとしてアクセスできる
Basic認証がかかっている
デプロイが容易（自動だと嬉しい）

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

AWS Amplifyとは？

サーバーレスアプリケーションの構築を簡単にしてくれるJavascriptライブラリです。AWSの各種マネージドサービスをまとめて提供し、アプリケーションのビルド、デプロイ、公開を自動で行ってくれます。

こちらの記事が詳しいです。
AWS AmplifyでサーバレスWebアプリの構築(Cognito + API Gateway + IAM認証)

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にアクセスし、DeployのGET STARTED を選択します。

今回はGitHubリポジトリからアプリケーションをデプロイするため、Git ProviderにGitHubを選択します。

GitHubの認証を行い、デプロイするリポジトリとブランチを選択し、次へをクリックします。

ビルド設定

アプリケーションの名前を設定し、ビルド設定を行います。

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

apmlify.yml

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

ディレクトリを指定するのみの簡単な構成です。
今回のSwagger UIの場合、docsディレクトリに存在する swagger.yml をSwaggerUIが見ているだけなのでビルドは必要ありませんでした。
ビルド設定のドキュメントはこちらです。

確認

構成を確認し、 保存してデプロイ をクリックします。

以上でデプロイ/公開が行われます。とっても簡単ですね。

パイプラインが終了すれば ドメイン からアクセスできますが、現状だとアクセスしてもエラーが表示されます。

リダイレクト設定

デフォルトの設定では https://xxxxxxxx.amplifyapp.com にアクセスするとルートディレクトリの index.html を見に行ってしまい、そんなものは存在しないためエラーになります。Swagger UIのビューファイルは docs/dist/index.html のため、リダイレクトして表示させる必要があります。

サイドバーの アプリの設定→書き換えて、リダイレクト をクリックします。
編集 をクリックし、以下のようにターゲットアドレスを設定します。

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

Basic認証を追加する

最後にBasic認証を追加します。
サイドバーの アクセスコントロール をクリックします。

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

終わり

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

AWS Amplify

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

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