Webアプリケーションスケルトン実装
Webアプリケーションのスケルトン実装。必要に迫られたときに、すぐにプロトタイピングできるよう自分向けに作成したもの。
要素技術
本プロジェクトは以下の要素技術を含みます。
- OpenAPIよるAPI定義
- PrismによるOpenAPI定義ファイルの編集とMockサーバ生成
- Postmanによる開発用APIリクエスト発行
- openapi-generator-cliによるAPIクライアント(typescript-axios版)の生成
- golangによるAPIサーバ実装
- Docker/docker-composeによるMySQLサーバなどのホスティング
- JWTによるユーザ認証実装
- Nuxt.jsによるフロントエンド実装
- 現状、中途半端なTypeScript実装
- Nuxt.js ver.3リリース後に完全TypeScript化を目指す
- Jestによるフロントエンドのテスト
- 現状中途半端な状態
- 完全TypeScript化後に再検討
ファイル/ディレクトリ構成
主なファイルおよびディレクトリの説明。
- api-client
- openapi-generator-cliにより生成したAPIクライアント
- フロントエンドでimportして利用
- backend
- golangによるAPIサーバ実装
- Dockerのmysqlイメージ生成用docker-compose設定ファイル群を含む
- frontend
- create-nuxt-appコマンドで生成したNuxt.jsプロジェクト
- openapi.yaml
- OpenAPI定義
- Prismで編集およびExportしたものを配置
情報源
https://blog.5thfloor.co.jp/2019/06/26/webapp-development-with-openapi-and-typescript/
利用方法
Swagger UI
- 起動
docker run --rm -p 8080:8080 -e SWAGGER_JSON=/local/openapi.yaml -v ${PWD}:/local swaggerapi/swagger-ui:v3.20.1
Mockサーバ
- インストール
npm install -g @stoplight/prism-cli
- 起動
prism mock openapi.yaml
API Client
- 生成
npm run generate-api-client