openapi-generatorで手軽にスタブサーバとクライアントの生成

# はじめに

手元のOASでさくっとスタブサーバやクライアントを作りたい時用に本記事をまとめました。

[Web版SwaggerEditor](https://editor.swagger.io/)からでもスタブサーバのソースコード一式生成してくれるのですが、
業務でNDA契約がどうのこうので使えないケースがあるみたいなのでそうゆう時に役立つかもです。

今回紹介するOASのバージョンは**3.0**です。([OAS 3.0](https://swagger.io/blog/news/whats-new-in-openapi-3-0/))

今回はDockerを使用します。

**作業環境**

```
Windows 10 pro
Docker version 19.03.2
docker-compose version 1.24.1
```

# Dockerfileの準備

下記の`Dockerfile`をプロジェクト直下に用意します。

```Dockerfile
FROM openjdk:8-jdk-alpine

WORKDIR /app

RUN apk --update add bash nodejs npm maven git
RUN rm -rf /var/cache/apk/*ls
RUN git clone https://github.com/openapitools/openapi-generator /generator
RUN cd /generator && mvn clean package
RUN npm install -g swagger-cli
```

- javaを使うのでJDKの入ったイメージをベースにしています。([DockerHub](https://hub.docker.com/_/openjdk?tab=description))
- 作業ディレクトリは`/app`直下にしています。
- 自動生成ツールに[OpenAPI Generator](https://github.com/OpenAPITools/openapi-generator)を使用するのでCloneします。
- Mavenを使用して`openapi-generator`のJavaプログラムをビルドします。
- `swagger-cli`はOASをYAMLからJSONに変換したりするのに便利なので入れてます。

# docker-compose.ymlの準備

下記の`docker-compose.yml`をプロジェクト直下に用意します。

```docker-compose.yml
version: '3'
services:
  tools:
    build: ./
    volumes:
      - .:/app
    tty: true
    command: sh
```

- 前述で用意した`Dockerfile`をビルドしてバックグラウンドでコンテナを起動する想定で作成しています。
- ホスト側のカレントディレクトリをコンテナ側の作業ディレクトリにマウントしています。


# Swaggerの準備

Swaggerファイルをプロジェクト直下に用意します。
今回はサンプルとして、`get`と`post`のシンプルなAPIのOASを用意しました。

```openapi.yml
openapi: 3.0.0
info:
  title: Sample API
  version: 0.0.1
servers:
  - url: http://localhost:3000/api
    description: SampleApiServer
tags:
  - name: Sample
paths:
  /getTest:
    get:
      tags: [ "Sample" ]
      summary: Get test.
      description: Get test.
      operationId: getTest
      parameters:
        - in: query
          name: name
          schema:
            type: string
      responses:
        '200':
          description: Sample
  /postTest:
    post:
      tags: [ "Sample" ]
      summary: Post test.
      description: Post test.
      operationId: postTest
      requestBody:
        content:
          application/x-www-form-urlencoded:
            schema:
              type: object
              properties:
                name:
                  type: string
      responses:
        '200':
          description: Sample
```

# 実践

コンテナを起動します。（けっこう時間かかります、長くて10分くらい？

```
PS C:\Users\user\Desktop\project> docker-compose up -d --build
```

コンテナの中に入ります。

```
PS C:\Users\user\Desktop\project> docker-compose exec tools bash
```

OASをYAML形式からJSON形式に変換します。

```
bash-4.4# swagger-cli bundle -o openapi.json openapi.yml
```

ExpressなNodeJSスタブサーバを生成します。

```
bash-4.4# java -jar /generator/modules/openapi-generator-cli/target/openapi-generator-cli.jar generate \
   -i openapi.yml \
   -g nodejs-express-server \
   -o server
```

Javascriptなクライアントを生成します。

```
bash-4.4# java -jar /generator/modules/openapi-generator-cli/target/openapi-generator-cli.jar generate \
   -i openapi.yml \
   -g javascript \
   -o client
```

ここまでやると下のような感じで、クライアントとスタブサーバが自動生成されているかと思います。
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518115/224e21cd-5654-9a4a-339f-3c765c9428e1.png)

※Javascript以外の言語でも生成できるので[OpenAPI Generator](https://github.com/OpenAPITools/openapi-generator)をご参照ください。

# おまけ

どうせなら、SwaggerUIとSwaggerEditorもDockerで立ててしまいましょう。
下記を`docker-compose.yml`に追記します。

```docker-compose.yml
  swagger-ui:
    image: swaggerapi/swagger-ui
    volumes:
      - ./openapi.yml:/usr/share/nginx/html/openapi.yml
    environment:
      API_URL: openapi.yml
    ports:
      - "9001:8080"

  swagger-editor:
    image: swaggerapi/swagger-editor
    ports:
      - "9002:8080"
```

コンテナを起動します。

```
PS C:\Users\user\Desktop\project> docker-compose up -d --build
```

localhost:9001でSwagger UIに、localhost:9002でSwagger Editorにアクセスできるかと思います。
![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/518115/8e8771c2-9f49-1fda-a546-e43d874a38fb.png)


以上です！