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

概要

前回、OpenAPIをRedocで出力するときに手元で試すようのDockerfileを作った。
openapi-generatorもそこに追加しようとしたらひと手間必要だったのでメモする。
手間をかけなくとも、公式がDockerのopenapi-generatorを配布しています。
ただの趣味。

ソースコード

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

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"
  }
}

確認

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

型が表示できるようになった。

参考

[備忘録]dockerでjava環境を一から作る
DockerfileのRUNやCMDをBashのログインシェルで実行させる