NodeのDockerfileにopenapi-generatorを入れてaxios-typescriptを試したメモ

## 概要
[前回、OpenAPIをRedoc](https://qiita.com/hibohiboo/items/a1568d9ecaf9ebb25e11)で出力するときに手元で試すようのDockerfileを作った。
openapi-generatorもそこに追加しようとしたらひと手間必要だったのでメモする。
手間をかけなくとも、公式が[Dockerのopenapi-generator](https://github.com/OpenAPITools/openapi-generator#16---docker)を配布しています。
ただの趣味。


[ソースコード](https://github.com/hibohiboo/kotatool/tree/da1af3de953838b90f099528f8a5d7c920fad95f/internals/api-schema)


## Dockerfile

```Dockerfile:docker/node/Dockerfile
FROM node:15.10.0

# コンテナ上の作業ディレクトリ作成
WORKDIR /app

# 後で確認出来るようにpackage.jsonを作成
COPY .npmrc /app/.npmrc
RUN npm init -y
RUN npm i -D redoc redoc-cli swagger-cli
RUN sed -i -e "s/\(\"scripts\": {\)/\1\n    \"build\": \"swagger-cli bundle -r .\/openapi.yml -o .\/openapi.json\", /g" /app/package.json
RUN sed -i -e "s/\(\"scripts\": {\)/\1\n    \"redoc\": \"npm run build \&\& redoc-cli bundle .\/openapi.json --options.menuToggle --options.pathInMiddlePanel  -o .\/dist\/index.html\", /g" /app/package.json
# openapi-generator-cliインストール。これだけだとjavaがなくて動かない。
RUN npm i -D @openapitools/openapi-generator-cli

# sdk download
RUN apt-get update
RUN apt-get install curl unzip zip -y
RUN curl -s "https://get.sdkman.io" | bash

# これを設定しないと、デフォルトの/bin/sh -c の動きとなる。そうすると、`source`コマンドが見つからない
SHELL ["/bin/bash", "-l", "-c"]

# sdk install
RUN source "/root/.sdkman/bin/sdkman-init.sh"
# java install
RUN sdk install java 8.0.282-open
# set openapi-generator-cli
RUN npx openapi-generator-cli version-manager set 5.0.1

RUN sed -i -e "s/\(\"scripts\": {\)/\1\n    \"generate\": \"openapi-generator-cli generate -g typescript-axios -i .\/bundle.yml -o .\/dist\/client-axios \",/g" /app/package.json

```


```json:package.json
{
  "scripts": {
    "generate": "swagger-cli bundle -r ./openapi.yml -o ./bundle.yml && openapi-generator-cli generate -g typescript-axios -i ./bundle.yml -o ./dist/client-axios ", 
    "redoc": "npm run build && redoc-cli bundle ./openapi.json --options.menuToggle --options.pathInMiddlePanel  -o ./dist/index.html",
    "build": "swagger-cli bundle -r ./openapi.yml -o ./openapi.json"
  },
  "devDependencies": {
    "@openapitools/openapi-generator-cli": "^2.1.26",
    "redoc": "^2.0.0-rc.48",
    "redoc-cli": "^0.10.2",
    "swagger-cli": "^4.0.4"
  }
}
```

## 確認

```diff
import { useEffect, useState } from 'react'
import CountersWithText from './organisms/CountersWithText'
import styles from './styles/Count.module.scss'
+ import { GasApi } from '~/lib/openapi/client-axios'
+ import axios from 'axios'


+ const api = new GasApi(undefined, undefined, axios.create())

const AccessCounter: React.FC = () => {
  const [accessNuber, setAccessNumber] = useState(0)
  const [accessStr, setAccessStr] = useState('LOADING')
  useEffect(() => {
    if (!apiUrl) return
    ;(async () => {
      try {
-        const response = await fetch(apiUrl, { method: 'POST' })
-        const json: { accessNumber: number } = await response.json()
-        setAccessNumber(json.accessNumber)
+        const response = await api.getAccessCounter()
+        setAccessNumber(response.data.accessNumber)
        setAccessStr('')
      } catch (_) {
        setAccessStr('ERROR')
      }
    })()
  }, [])

  return (
    <div className={styles.kotaAccessCounterWrapper}>
      {accessStr ? accessStr : <CountersWithText num={accessNuber} />}
    </div>
  )
}
export default AccessCounter

```


型が表示できるようになった。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/99876/0ac3993a-8d1f-30fb-aed2-b836aa39bd71.png)


## 参考
[[備忘録]dockerでjava環境を一から作る](https://qiita.com/tshk_mtsys/items/a75870f903585e97cfd9)
[DockerfileのRUNやCMDをBashのログインシェルで実行させる](https://qiita.com/clomie/items/235192bd62c60b0d0806)