Swagger.ymlを受け取った後に、APIのモックサーバーを作成するまでのメモを残します。
↓ こちらのサイトを参考にさせていただきました！
①Swagger Editorの左エディタ画面に、swagger.ymlを載せる。
Swagger Editorはこちらから！ → Swagger Editor
デフォルトで黒いエディタにSwaggerの記述がしてありますので、出来あがったSwagger.ymlの内容をそのままコピペして貼り付けます。
私の場合、実案件のSwaggerで表示を試したかったので、
localhost用に少し記述を変えています。
②ローカル環境用にhostを"localhost:3001"、basePathを"/"に変更
下の画像の通りです！
hostをlocalhostにしたり、basePathも変更必要だったので色々変更しました。
③「Generate Server」からサーバーを選んでエクスポート
左上ナビバーにある「Generate Server」をクリックして、エクスポートしたいタイプを選択した上でローカルにファイルを落とします。
私はjavascript以外全く無知なので笑、「nodejs-server」を選択しました。
「nodejs-server-server」フォルダを開くと、./api/swagger.yamlはエディタにコピペした記述と全く同じものが入っております！
「service」ディレクトリにあるAdminService.jsも、Swaggerに記述した通りのデータや、モックで返してくれるExampleデータまで入ってます！
④ローカルに落としたSwaggerディレクトリで$ yarn install & $ yarn start
私はSwaggerのhostにlocalhost:3001と指定しましたので、
http://localhost:3001/docs/
を開くとSwagger Editorの右側に表示されていたようなドキュメントが確認できます。
「Curl」内の記述をターミナルで叩くと、ちゃんとレスポンスされているのが確認できます。
`curl -X GET --header 'Accept: application/json' --header 'Authorization: 1' 'http://localhost:3001/admin/client'`
⑤下のようなエラーが出てしまっても大丈夫！corsライブラリをインストールしましょう！
モックをローカルサーバーで作成出来たことだし、いざ非同期処理のテストをしてみよう！
と思い、下のように記述して動作を試してみました。
（試したかったアプリケーションがReactを使ってますので、axiosを使ってAPIを呼び出しています。）
下は抜粋です。
import axios from 'axios'
export const handleFetchProjects = Id => async dispatch =>
{
const response = await axios.get(`http://localhost:3001/projects/${Id}`)
dispatch(actions.fetchProjects(response.data, response.status))
}
これでよしよし、と思いきや、以下のようなエラーが出て戸惑いました。。
Access to XMLHttpRequest at 'http://localhost:3001/admin/*****' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
エラーを解消すのに参考にさせて頂いたサイトがこちらです！
参考サイト
Swaggerで自動生成したnodejs-serverにCORSを許可する方法
swaggerディレクトリでcorsライブラリをインストールし、参考サイト通りindex.jsにcorsのimportと、app.use(cors());を該当箇所に記述してあげます。
$ npm install cors --savevar cors = require('cors');app.use(cors());
そして、自分の無知故に、jsの記述も違っていたようです。
headerも渡してあげる必要があったので、以下のように書き換えました。
export const handleFetchProjects = Id => async dispatch =>
{
const response = await axios.get(`http://localhost:3001/projects/${Id}`, {
headers: { Authorization: '1' }
})
dispatch(actions.fetchProjects(response.data, response.status))
}
ローカル環境でSwagger-uiでモックできました！
特にjsonファイルに変換したり等の操作も必要なかったので、便利そうです。
⑥レスポンスのデータを少し改造したい…！
仮のデータを返してくれるのは優秀なのですが、プルリク送ったら
「削除した日にちがnullの時はカラで表示にして、日付が入っていたら表示させたい」と修正依頼がありました。
Exampleデータは１種類のデータをループさせているだけなので、２つ以上の比較ができません…！
なので、./service/****.jsを直接いじります！
該当箇所を見つけるのは、ペーな私は時間が掛かってしまいましたが、以下のような記述が見つかるはずです。
var examples = {};
examples['application/json'] = [ {
...
} ]
examplesのobjectを例えば100個にしてみたり、依頼の通りnullと日付で何通りもダミーデータを作ってみたり、これでより良いモックになってくれました！
【終えて】
初めてswagger触ったので、これから色々触っていきます！
モックのツールはきっと他にもあるはず…！