TechRAMEN 2025 発表資料

TechRAMEN 2025 20分でつなぐ！ .NETのAPI × Reactのフロントエンド をDockerで動かしてみた 「バックエンドとフロントエンド、それぞれ動かせたけど、 結局どうやって“つなげる”の？」 Haru / @Blog_IT_haru

• https://x.com/Blog_IT_haru

TechRAMEN 2025 自己紹介 名前: Haru X: @Blog_IT_haru 新卒2年目モバイルアプリエンジニア ⚫ 情報系大学卒業後、都内IT企業に入社 ⚫ 新卒1年目の開発職研修でC#とReactを初めて使う ⚫ 現在は北海道からフルリモートで モバイルアプリ開発を担当 2

• https://x.com/Blog_IT_haru

TechRAMEN TechRAMEN 2025 2025 アジェンダ 1. 背景とゴール 2. 作るサービスの全体像・構成 3. バックエンド（.NET + SQL Server） 4. フロントエンド（React） 5. Dockerでつなぐ（フロントエンドとバックエンド） 6. 詰まった点と解決方法 7. まとめ 3

TechRAMEN 2025 1. 背景とゴール 4

TechRAMEN 2025 背景 ⚫ 新卒研修でTODOアプリを作成 ⚫ フロントエンド・バックエンド・データベースは 個別に動かせるが「つなげる」ことが難しい ⚫ 自主学習でDockerに挑戦 ⚫ Dockerで簡単に「つなげる」感覚を得られた 5

TechRAMEN 2025 ゴール・対象者 対象者 APIやフロントエンドを作ったことはあるけど、 「つなげる」ことに不安がある方 ゴール 「やってみたい︕動かせそう︕」と感じてもらうこと 6

TechRAMEN 2025 ２. 作るサービスの全体像・構成 7

TechRAMEN 2025 作るサービス｜全体像 本を登録・更新・削除する管理サービス[1] 以下のようなデータベース形式で本のタイトルと作者を管理 BookId 1 2 Title 月灯りの標本室 空蝉の図書館 Author 3 4 5 記憶交換モジュール 雨とコケと、わたしの午後 永谷 琴美 6番線の沈黙 東雲 雅也 白鷺 由梨 星乃 瑠璃 アラン・フォージャー ※テーブルのデータは、タイトル・作者ともにAI生成の架空のもの [1]: ASP.NET Core Web API と Entity Framework Core で SQL Server からデータを取得する, https://qiita.com/tamtamyarn/items/5a755d4d5d59592a82cd 8

• https://qiita.com/tamtamyarn/items/5a755d4d5d59592a82cd

TechRAMEN 2025 作るサービス｜フロントエンドの機能 ⚫ 表示機能：本のタイトルが一覧で表示される ⚫ 追加機能：本のタイトルと作者を追加できる ⚫ 更新機能：IDを指定して本のタイトルと作者を更新 ⚫ 削除機能：IDを指定して本のデータ削除 9

TechRAMEN 2025 作るサービス｜フロントエンドのUI 10

TechRAMEN 2025 作るサービス｜バックエンド ⚫ GET(api/books)：一覧ですべての本を取得 ⚫ GET(api/books/{id})：該当IDの本を取得 ⚫ POST(api/books)：本のタイトルと作者を新しく追加 ⚫ PUT (api/books/{id}) ：該当IDの本のタイトルと作者を更新 ⚫ DELETE (api/books/{id}) ：該当IDの本を削除 11

TechRAMEN 2025 構成 ⚫ フロントエンド︓ React(TypeScript) ⚫ バックエンド︓ API：.NET（C#） データベース：SQL Server Docker フロントエンド（React） API（.NET） Dockerでまとめて起動 データベース （SQL Server） 12

TechRAMEN 2025 環境 Dockerを動かす環境 ⚫ WSL（Windows Subsystem for Linux） ⚫ Docker 27.0.1 (build 7fafd33) フロントエンドを動かす環境 (npm installやnpm run buildをする） ⚫ node v22.11.0 / npm 10.9.0 バックエンドを動かす環境（dotnetコマンドを利用する） ⚫ .NET 8.0.110 13

TechRAMEN 2025 3. バックエンド（.NET + SQL Server） 14

TechRAMEN 2025 APIの構成と役割 (.NET) ⚫ ASP.NET Coreを用いて、 CRUD機能(生成、読み取り、更新、削除)を実装 GET/POST/PUT/DELETEのリクエストを可能に︕ ⚫ BooksController で /api/books エンドポイントを提供 ⚫ BookContext でデータベースにつながる 15

TechRAMEN 2025

コード例｜GET（全取得, ID指定）
[HttpGet]
public ActionResult<IEnumerable<Book>> List()
{
var books = new { items = context.Books };
return Ok(books);
}
[HttpGet("{id}")]
public ActionResult<Book> Get(int id)
{
var book = context.Books.Find(id);
if (book == null)
{
return NotFound();
}
return Ok(book);
}

コードはこちら↓

16

• https://github.com/Haru-330/.NET_API_Docker_Sample

TechRAMEN 2025 データベースの構成（SQL Server） ⚫ Dockerイメージ： mcr.microsoft.com/mssql/server:2022-latest ⚫ docker-compose.ymlで永続化設定・パスワード管理 ⚫ 初回起動時にdotnet ef database update コマンドで マイグレーションを適用 ⚫ Entity Framework Coreでテーブル作成 17

TechRAMEN 2025 Dockerfileの記述 FROM mcr.microsoft.com/dotnet/aspnet:8.0 AS base WORKDIR /app EXPOSE 5009 FROM mcr.microsoft.com/dotnet/sdk:8.0 AS build WORKDIR /src COPY ["dotnet-api-sample.csproj", "."] RUN dotnet restore "./dotnet-api-sample.csproj" COPY . . WORKDIR "/src/." RUN dotnet build "dotnet-api-sample.csproj" -c Release -o /app/build FROM build AS publish RUN dotnet publish "dotnet-api-sample.csproj" -c Release -o /app/publish /p:UseAppHost=false FROM base AS final WORKDIR /app COPY --from=publish /app/publish . ENV ASPNETCORE_URLS="http://*:5009" ENTRYPOINT ["dotnet", "dotnet-api-sample.dll"] 18

TechRAMEN 2025 Docker ComposeでAPIとデータベースを起動 APIとデータベースを docker-compose.yml にまとめる それにより、APIとデータベースを一緒に起動できる︕ 19

TechRAMEN 2025

docker-compose.yml(APIとデータベース)
version: '3.4’
services:
simplewebapi:
image: dotnet-api-sample
build:
context: .
dockerfile: Dockerfile
depends_on:
- sql
environment:
- ConnectionStrings__DefaultConnection=Server=sql;Database=ZennData;User
Id=sa;Password=MyNewPassw0rd!;MultipleActiveResultSets=true;TrustServerCertificate=True;
ports:
- 5009:5109
sql:
image: "mcr.microsoft.com/mssql/server:2022-latest"
container_name: sql-server-dotnet-api-sample
ports:
- "1433:1433"
environment:
- ACCEPT_EULA=y
- SA_PASSWORD=MyNewPassw0rd!

20

TechRAMEN 2025 デモ｜API 21

TechRAMEN 2025 デモ｜GET（全取得） 22

TechRAMEN 2025 デモ｜GET（ID指定） 23

TechRAMEN 2025 デモ｜POST 24

TechRAMEN 2025 デモ｜PUT（ID指定） 25

TechRAMEN 2025 デモ｜DELETE（ID指定） 26

TechRAMEN 2025 4. フロントエンド（React） 27

TechRAMEN 2025 フロントエンド｜UI 28

TechRAMEN 2025 フロントエンドの構成（React） ⚫ React と TypeScript (Vite) ⚫ fetch でAPIと通信し、GET/POST/PUT/DELETE ⚫ 本の一覧表示と追加、修正、削除を実装 ⚫ 状態管理は useState / useEffect でシンプルに ※あくまで簡易的なため、CSSはなし コードはこちら→ 29

• https://github.com/Haru-330/React_CRUD_Docker_Sample

TechRAMEN 2025

コード例｜GET
import { useState, useEffect } from 'react'

<table border={1} cellPadding="8">
<thead>
<tr>
<th>ID</th>
<th>タイトル</th>
<th>作者</th>
</tr>
</thead>
<tbody>
{posts.map(post => (
<tr key={post.bookId}>
<td>{post.bookId}</td>
<td>{post.title}</td>
<td>{post.author}</td>
</tr>
))}
</tbody>
</table>

type Book = {
bookId: number;
title: string;
author: string;
}
function GetAPI() {
const [posts, setPosts] = useState<Book[]>([])
useEffect(() => {
fetch('http://localhost:5009/api/books', { method: 'GET' })
.then(res => res.json())
.then(data => {
setPosts(data.items)
})
}, [])
return (
<div>
<p> 本の一覧</p>
{posts.length === 0 ? (
<p>データがありません</p>
) : (

)}
</div>
)
}
export default GetAPI;

30

TechRAMEN 2025

コード例｜DELETE
import { useState } from 'react';

function DeleteAPI() {
const [id, setId] = useState('');
const handleChange = (event: { target: { value: any; }; }) => {
setId(event.target.value);
};

const handleSubmit = (event: { preventDefault: () => void; }) => {
event.preventDefault();
fetch(`http://localhost:5009/api/books/${id}`, {
method: 'DELETE',
})
.then(data => {
console.log(data);
});

return (
<div>
<form onSubmit={handleSubmit}>
<label>
本のID:
<input type="text" name="id"
onChange={handleChange} />
</label>
<button type="submit">削除
</button>
</form>
</div>
);
};
export default DeleteAPI;

};

31

TechRAMEN 2025 Dockerfileの記述 # Node.js LTSバージョンをベースイメージとして使用する FROM node:lts-alpine AS builder # 作業ディレクトリの設定 WORKDIR /app # package.jsonとpackage-lock.jsonがあればコピーする COPY package*.json ./ # 依存関係のインストール RUN npm install # すべてのファイルをコピーする COPY . . # プロジェクトの構築 RUN npm run build # Dockerfile 内でのベースイメージの指定 FROM nginx:alpine # builder stageからbuild filesをコピーする COPY --from=builder /app/dist /usr/share/nginx/html # ポート80を公開する EXPOSE 80 # Nginxサーバーの起動 CMD ["nginx", "-g", "daemon off;"] 32

TechRAMEN 2025 docker-compose.ymlでフロントエンドを起動 version: '3' services: web: build: context: . dockerfile: Dockerfile ports: - "5173:80" volumes: - ./src:/app/src - ./public:/app/public stdin_open: true 33

TechRAMEN 2025 5. Dockerでつなぐ （フロントエンドとバックエンド） 34

TechRAMEN 2025 フロントエンドとバックエンドを一括起動 ⚫ バックエンド(api)もフロントエンド(web)と合わせて docker-compose.ymlで実行 ⚫ Dockerfileは今までと同じものを使用 ルート コードはこちら↓ ├── api ├── web └── docker-compose.yml 35

• https://github.com/Haru-330/dotnet-api-react-docker

TechRAMEN 2025

docker-compose.yml(API, データベース, React)
version: '3.4'
services:
simplewebapi:
image: zennapi
build:
context: ./api
dockerfile: Dockerfile
depends_on:
- sql
environment:
ConnectionStrings__DefaultConnection=Server=sql;Datab
ase=ZennData;User
Id=sa;Password=MyNewPassw0rd!;MultipleActiveResultSet
s=true;TrustServerCertificate=True;
ports:
- 5009:5009

sql:
image:
"mcr.microsoft.com/mssql/server:2022latest"
container_name: sql-server-zenn
ports:
- "1433:1433"
environment:
- ACCEPT_EULA=y
- SA_PASSWORD=MyNewPassw0rd!
web:
build:
context: ./web
dockerfile: Dockerfile
ports:
- "5173:80"

36

TechRAMEN 2025 デモ｜フロントエンド 37

TechRAMEN 2025 デモ｜表示・追加 38

TechRAMEN 2025 デモ｜更新 39

TechRAMEN 2025 デモ｜削除 40

TechRAMEN 2025 6.詰まった点と解決方法 41

TechRAMEN 2025 詰まった点と解決方法 詰まったこと データベースに接続できない フロントエンドが CORSエラーでAPIに アクセスできない 解決策 • appsettings.jsonやdocker-compose.yml のポート・パスワードを確認 • データベースの起動を待つ • AddDefaultPolicy や app.UseCors(); を利用 • なお、docker-compose.ymlでやると、 このエラーに困らない︕ ※【C#】WebAPIのCORSエラーの解決を参照 42

• https://zenn.dev/haru330/articles/334861c67c4554

TechRAMEN 2025 7. まとめ 43

TechRAMEN 2025 まとめ ⚫ フルスタック開発の一連の流れを体験できた︕ ⚫ Dockerの便利さを実感できた︕ ⚫ APIとフロントを「つなげる」ことを理解できた︕ ⚫ 「動くものをつくる」って楽しい︕ 44

TechRAMEN 2025 関係記事 ⚫ 【C#】.NETの環境構築方法【WindowsとWSL】【VSCode】 ⚫ 【C#】SQL Serverと.NETのAPIをDockerで動かす方法 ⚫ 【Docker】Viteを使ってReactとTypeScriptの環境構築 ⚫ 【C#】WebAPIのCORSエラーの解決 ⚫ 【FetchAPI】React/TypeScriptでGET,POST,PUT,DELETEをする 【C#】 ⚫ 【Docker】APIとReact/TypeScriptを同じコンテナで動かす【備忘録】 45

• https://zenn.dev/haru330/articles/5f0a42a8df36eb
• https://zenn.dev/haru330/articles/3840fcd5ff02f4
• https://zenn.dev/haru330/articles/24aa98eb05306f
• https://zenn.dev/haru330/articles/334861c67c4554
• https://zenn.dev/haru330/articles/859d6a7982d06d
• https://zenn.dev/haru330/articles/c4e2fb4a350a9f

TechRAMEN 2025 質問・フィードバックお待ちしています 「つなげる」体験にフォーカスしたため、 コードの記述に誤りやこうした方が良いということも多々あると 思います。 ぜひ、質問やフィードバックお願いします X: @Blog_IT_haru Zenn: haru330 ご清聴ありがとうございました︕ 46

• https://x.com/Blog_IT_haru
• https://zenn.dev/haru330