🐳
【Docker】APIとReact/TypeScriptを同じコンテナで動かす【備忘録】
はじめに
今回の記事は、以下の過去記事3つを元に、APIと、TypeScriptを同じコンテナで動かすための備忘録です。
過去記事
ディレクトリ構成
以下のような構成にしていきます。
📁 your-project
├── 📁 api
│ ├── Dockerfile
│ └── ...
├── 📁 web
│ ├── Dockerfile
│ └── ...
└── docker-compose.yml
手順
- ディレクトリを作る
以下のようにフォルダを作ります。
mkdir <your-project>
- 以下の記事を元に、APIを作る
なお、今回は、apiというフォルダに入るようにします。 Dockerfileも、この記事を参考にします。
- 以下の記事を参考に、Reactでプロジェクトを作ります。
- 以下の記事を参考に、APIに接続できるようにします。
この時点で、Dockerfileが2つ、docker-compose.ymlが1つ出来ているはずです。
- docker-compose.ymlファイルを書き換える
＋になっている部分を追記すればOKです。
# Please refer https://aka.ms/HTTPSinContainer on how to setup an https developer certificate for your ASP.NET Core service.
version: '3.4'
services:
simplewebapi:
image: <IMAGE_NAME>
build:
context: .
dockerfile: Dockerfile
depends_on:
- sql
environment:
- ConnectionStrings__DefaultConnection=Server=sql;Database=<DATABASE_NAME>;User Id=sa;Password=<PASSWORD>;MultipleActiveResultSets=true;TrustServerCertificate=True;
ports:
- XXXX:XXXX
sql:
image: "mcr.microsoft.com/mssql/server:2022-latest"
container_name: sql-server-zenn
ports: # not actually needed, because the two services are on the same network.
- "1433:1433"
environment:
- ACCEPT_EULA=y
- SA_PASSWORD=<PASSWORD>
+ web:
+ build:
+ context: ./web
+ dockerfile: Dockerfile
+ ports:
+ - "XXXX:80"
- vite.config.tsを書き換える
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
+ build: {
+ outDir: 'dist'
+ }
})
- プロジェクトを立ち上げる
docker-compose up -d
-
http://localhost:XXXX/にアクセスして、きちんと動いていればOK
Discussion