はじめに
APIの仕様書をオンラインに上げるときの手順書です。
docker image作ってherokuに上げようとしたんですが手間がかかりそうだったのでそのままindex.html上げています。
Qiitaのいろいろな記事を参考にさせていただきました。
開発環境構築
docker-compose.yml
version: "2"
services:
swagger:
image: swaggerapi/swagger-ui
volumes:
- ./swagger.yml:/usr/share/nginx/html/swagger.yml
environment:
API_URL: swagger.yml
ports:
- "8080:8080"
$ docker-compose up
で起動、
localhost:8080
にアクセスで確認できます。
APIの仕様はswagger.yml
に記述してください
herokuへdeploy
ファイル
static.json
{
"root": "dist/",
"routes": {
"/swagger.yml": "../swagger.yml"
},
"basic_auth": true
}
dist/index.html
<!-- HTML for static distribution bundle build -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Swagger UI</title>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.17.2/swagger-ui.css" >
<style>
html
{
box-sizing: border-box;
overflow: -moz-scrollbars-vertical;
overflow-y: scroll;
}
*,
*:before,
*:after
{
box-sizing: inherit;
}
body
{
margin:0;
background: #fafafa;
}
</style>
</head>
<body>
<div id="swagger-ui"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.17.2/swagger-ui-bundle.js"> </script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/swagger-ui/3.17.2/swagger-ui-standalone-preset.js"> </script>
<script>
window.onload = function() {
// Begin Swagger UI call region
const ui = SwaggerUIBundle({
url: "swagger.yml",
dom_id: '#swagger-ui',
deepLinking: true,
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
plugins: [
SwaggerUIBundle.plugins.DownloadUrl
],
layout: "StandaloneLayout"
})
// End Swagger UI call region
window.ui = ui
}
</script>
</body>
</html>
セットアップ
$ git init
$ heroku git:remote -a app_name
$ heroku stack:set heroku-18
$ heroku buildpacks:set https://github.com/heroku/heroku-buildpack-static -a app_name
デプロイ
$ git push heroku master
参考
ありがとうございました!
Dockerを使ってswagger.yamlをサクッとみる (swagger-ui 3.x)
Swagger x Heroku で手軽に API モック&ドキュメントを作る