[開発] WSLとDockerを活用したReactサーバー構築ガイド

git init
# 最初のコミットはrebaseなどで変更しづらいため --allow-empty オプションを付けて空のコミットにする
git commit --allow-empty -m "first commit"
git branch -M main
git remote add origin https://github.com/okzaq/server_template.git
git push -u origin main

# frontend用のディレクトリを作成
mkdir frontend

# docker-compose.yml
version: '3.8'
services:
  frontend:
    build:
      context: ./
      dockerfile: ./Dockerfile_frontend  # 今後バックエンドも追加予定のためサフィックスを付与
    container_name: sample_frontend
    volumes:
      - "./frontend:/workspace"
    ports:
      - "3000:3000"
    tty: true

# Dockerfile_frontend
FROM node:20-buster  # VSCodeでアタッチできないとデバッグがしづらいためbusterを指定
WORKDIR /workspace

# -------------------------------------------------
# [1] 初期構築
# -------------------------------------------------

RUN apt-get update
RUN apt-get -y install locales && \
    localedef -f UTF-8 -i ja_JP ja_JP.UTF-8
ENV LANG ja_JP.UTF-8 \
    LANGUAGE ja_JP:ja \
    LC_ALL ja_JP.UTF-8 \
    TZ JST-9
RUN apt-get install -y vim

docker-compose up --build

Recreating sample_frontend ... done
Attaching to sample_frontend
sample_frontend | Welcome to Node.js v20.12.1.
sample_frontend | Type ".help" for more information.

cd /workspace/  # 作業ディレクトリに移動
npx create-next-app@latest  # Reactのプロジェクトを新規作成

# 実行結果と設定メモ
root@8b93b597330d:/workspace# npx create-next-app@latest
Need to install the following packages:
create-next-app@14.1.4
Ok to proceed? (y)  ### デフォルトのままEnter
✔ What is your project named? … .  ### workspace直下に展開したいのでドットを指定
✔ Would you like to use TypeScript? … No / Yes  ### デフォルト(Yes)のままEnter
✔ Would you like to use ESLint? … No / Yes  ### デフォルト(Yes)のままEnter
✔ Would you like to use Tailwind CSS? … No / Yes  ### Noを指定してEnter
✔ Would you like to use `src/` directory? … No / Yes  ### デフォルト(No)のままEnter
✔ Would you like to use App Router? (recommended) … No / Yes  ### デフォルト(Yes)のままEnter
✔ Would you like to customize the default import alias (@/*)? … No / Yes  ### デフォルト(No)のままEnter
Creating a new Next.js app in /workspace.

・・・省略・・・

added 316 packages, and audited 317 packages in 1m

125 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
Success! Created workspace at /workspace

# 最後にバージョンをあげるようnoticeが表示されることがありますが無視します

root@8b93b597330d:/workspace# npm run dev

> workspace@0.1.0 dev
> next dev

   ▲ Next.js 14.1.4
   - Local:        http://localhost:3000

Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:

Telemetry | Next.js by Vercel - The React Framework
Next.js by Vercel is the full-stack React framework for the web.
nextjs.org

 ✓ Ready in 1521ms

# docker-compose.yml
・・・省略・・・
    ports:
      - "3000:3000"
    tty: true
    command: sh -c "npm run dev"  # 追記、コンテナ起動時にReactが起動されるようにします

# Dockerfile_frontend
・・・省略・・・
RUN apt-get install -y vim

# ここより下を追記

# -------------------------------------------------
# [2] パッケージのインストール
# -------------------------------------------------

COPY frontend/package*.json /workspace
COPY frontend/tsconfig.json /workspace
RUN npm install -g next && npm install

# 権限変更（okzaqの部分はユーザー名を入れてください）
sudo chown okzaq:okzaq -R frontend/

# コードをGithubにあげる
git add ./
git commit -m "React環境を構築"
git push