Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

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

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

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

よくある選択肢としてGitHub PagesNetlifyなどの静的サイトジェネレータが挙げられますが、それらは自動デプロイなどは兼ね備えているもののBasic認証ができなかったり1など、求めるものとして不十分でした。
そこで他に探してみたところ、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 を選択します。
AWS_Amplify_Console.png

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

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

ビルド設定

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

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

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

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

確認

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

以上でデプロイ/公開が行われます。とっても簡単ですね。
AWS_Amplify_Console.png
パイプラインが終了すれば ドメイン からアクセスできますが、現状だとアクセスしてもエラーが表示されます。

リダイレクト設定

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

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

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

Basic認証を追加する

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

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

終わり

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

AWS Amplify


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

timee
日本の労働力の減少を若者の働き方改革で解決します。好きな時に好きなだけ働けるプラットフォームタイミーを作り、人々が好きなことをできる世界を実現します。
https://timee.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away