Nginxとは？
- 2004年にリリースされた無料のオープンソースHTTPサーバー
- 高性能でメモリ使用量が少ない
- 高トラフィックサイドでも効率的に処理可能
Nginxの利点
- 高いパフォーマンス
- ロードバランサーとしての利用
- 優れたアーキテクチャ
- ダウンタイムなしのアップデート
スキーマ駆動開発
全体像
NginxとDockerでWEBサーバーを構築
- compose.yamlを作成する
compose.yaml
services:
flask:
build: ./backend
container_name: flask_server
ports:
- '8000:8000'
nginx:
build: ./frontend
container_name: nginx_server
ports:
- '9000:80'
depends_on:
- flask
2.openapi.yamlを作成する
openapi.yaml
openapi: 3.0.3
info:
title: User API
description: A simple API for managing users.
version: 1.0.0
servers:
- url: http://localhost:9000
description: Local development server
paths:
/greets:
get:
summary: Return a greeting message
responses:
'200':
description: A greeting message.
content:
application/json:
schema:
type: string
example: 'Hello, World!'
/calculate:
post:
summary: Perform a calculation
requestBody:
description: Input numbers for the calculation.
required: true
content:
application/json:
schema:
type: object
properties:
num1:
type: number
example: 5
num2:
type: number
example: 10
responses:
'200':
description: Calculation result.
content:
application/json:
schema:
type: object
properties:
num1:
type: number
example: 5
num2:
type: number
example: 10
result:
type: number
description: The result of the calculation.
example: 15
3.frontendフォルダを作成し、フォルダ内にTypescriptをインストールをする
$ npm install --save-dev typescript
$ npx tsc --init
$ mkdir src
$ touch src/app.ts
4.frontend/src/app.tsを作成する
frontend/src/app.ts
import { Configuration, DefaultApi } from './grenerated/index';
const config = new Configuration({
basePath: '/api',
});
const openai = new DefaultApi(config);
document.getElementById('greet-btn')?.addEventListener('click', async () => {
const response = await DefaultApi.greetsGet();
document.getElementById('output')!.textContent = response.message ?? '';
});
document.getElementById('calc-btn')?.addEventListener('click', async () => {
const response = await DefaultApi.calculatePost({
calculatePostRequest: { num1: 5, num2: 10 },
});
document.getElementById('output')!.textContent = `Result: ${response.result}`;
});
5.frontend/index.htmlを作成する
frontend/src/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Frontend</title>
<script type="module" src="./src/app.ts"></script>
</head>
<body>
<h1>Frontend with OpenAPI</h1>
<button id="greet-btn">Greet</button>
<button id="calc-btn">Calculate(5 + 10)</button>
<div id="output"></div>
</body>
</html>
6.frontend/nginx.confを作成する
frontend/nginx.conf
server{
listen 80;
location / {
root /usr/share/nginx/html;
index index.html;
}
location /api {
proxy_pass http://flask:8000;
}
}
7.backend/servicesにapp_service.pyを作成する
mkdir backend
mkdir backend/services
cd backend/services
touch app_service.py
backend/services/app_service.py
def handle_app_greets():
return "Hello, World! from service"
def handle_calculate(num1, num2):
return num1 + num2
OpenAPI Generator
docker run --rm \
-v $PWD:/local openapi-generator-cli generate \
-i /local/openapi.yaml \
-g <言語> \
-o /local/out/<生成物のディレクトリ>
docker run --name my-nginx -p 8080:80 -d nginx
docker run --rm
-v $PWD:/local openapi-generator-cli generate
-i /local/openapi.yaml
-g typescript-fetch
-o /local/frontend/src/generated
参考サイト
Nginx（エンジンエックス）入門 | 人気のWebサーバーを15分で解説！
【Webサーバー】NginxとApacheって何が違うのか解説してみた
【26分でNginxの基礎をマスター】Docker + NginxでのWebサーバー構築とアーキテクチャ解説、SSL設定について
ゼロから学ぶ WebAPI 開発：設計・実装・運用の基本