プロジェクトの初期化

.devcontainer/devcontainer.json

@@ -1,17 +1,15 @@
 {
   "name": "cas-ru.com",
-  "dockerComposeFile": ["../docker-compose.dev.yml", "docker-compose.yml"],
+  "dockerComposeFile": [
+    "../docker-compose.yml",
+    "../docker-compose.dev.yml",
+    "docker-compose.yml"
+  ],
   "service": "web",
-  "workspaceFolder": "/workspace/web",
+  "workspaceFolder": "/workspace",
   // コンテナに追加する機能
   "features": {
-    "ghcr.io/devcontainers/features/common-utils:2": {
-      "installZsh": true,
-      "configureZshAsDefaultShell": true,
-      "installOhMyZsh": true,
-      "upgradePackages": false,
-      "username": "node"
-    }
+    "ghcr.io/devcontainers/features/git:1": {}
   },
   "postStartCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",
   "customizations": {
@@ -49,25 +47,13 @@
           "typescriptreact"
         ],
         // VSCodeのデフォルトのフォーマッターを無効に
-        "javascript.format.enable": false,
-        "typescript.format.enable": false
+        "js.format.enable": false,
+        "ts.format.enable": false
       },
       // 拡張機能を追加
       "extensions": [
         "dbaeumer.vscode-eslint", // ESLint
-        "esbenp.prettier-vscode", // Prettier
-        "formulahendry.auto-rename-tag", // Auto Rename Tag
-        "eamodio.gitlens", // GitLens
-        "streetsidesoftware.code-spell-checker", // Code Spell Checker
-        "yzhang.dictionary-completion", // Dictionary Completion
-        "mhutchie.git-graph", // Git Graph
-        "mosapride.zenkaku", // zenkaku
-        "shardulm94.trailing-spaces", // Trailing Spaces
-        "christian-kohler.path-intellisense", // Path Intellisense
-        "ms-azuretools.vscode-docker", // Docker
-        "usernamehw.errorlens", // Error Lens
-        "ms-vsliveshare.vsliveshare", // Live Share
-        "stylelint.vscode-stylelint" // stylelint
+        "esbenp.prettier-vscode" // Prettier
       ]
     }
   }

.gitignore

@@ -3,8 +3,12 @@
 # dependencies
 /node_modules
 /.pnp
-.pnp.js
-.yarn/install-state.gz
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
 
 # testing
 /coverage
@@ -24,16 +28,14 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.pnpm-debug.log*
 
-# local env files
-.env*.local
+# env files (can opt-in for committing if needed)
+.env*
 
 # vercel
 .vercel
 
 # typescript
 *.tsbuildinfo
 next-env.d.ts
-
-# env file
-.env

Dockerfile

@@ -1,39 +1,58 @@
-FROM node:20-bullseye-slim AS base
+FROM node:24-bookworm-slim AS base
 
-FROM base AS builder
+ENV PNPM_HOME="/pnpm"
+ENV PATH="$PNPM_HOME:$PATH"
+RUN corepack enable
 
-WORKDIR /workspace/web
 
-RUN apt-get update && apt-get upgrade -y
-COPY package.json yarn.lock* ./
-RUN yarn --frozen-lockfile
+FROM base AS dependencies
+
+WORKDIR /workspace
+
+COPY package.json pnpm-lock.yaml pnpm-workspace.yaml ./
+RUN --mount=type=cache,target=/pnpm/store pnpm install --frozen-lockfile
 
-COPY app/ ./app
-COPY public/ ./public
-COPY tsconfig.json *.mjs ./
+
+FROM dependencies AS builder
+
+COPY ./src ./src
+COPY ./public ./public
+COPY ./tsconfig.json ./next.config.ts ./postcss.config.mjs ./
 
 # Next.jsによってテレメトリデータを収集するのを無効にする
 ARG NEXT_TELEMETRY_DISABLED=1
 ENV NEXT_TELEMETRY_DISABLED=$NEXT_TELEMETRY_DISABLED
 
-RUN  yarn build
+ENV NODE_ENV=production
+RUN  pnpm run build
+
+
+FROM dependencies AS dev
+
+USER node
+COPY . .
+ENV NODE_ENV=development
+EXPOSE 3000
+
+CMD [ "pnpm", "run", "dev" ]
+
 
 FROM base AS runner
 
 WORKDIR /workspace/web
 
 USER node
 
-COPY --from=builder /workspace/web/public ./public
+COPY --from=builder --chown=node:node /workspace/public ./public
 
 # 自動的に出力トレースを活用することで、イメージサイズを削減する
-# https://nextjs.org/docs/advanced-features/output-file-tracing
-COPY --from=builder --chown=node:node /workspace/web/.next/standalone ./
-COPY --from=builder --chown=node:node /workspace/web/.next/static ./.next/static
+# https://nextjs.org/docs/app/api-reference/config/next-config-js/output
+COPY --from=builder --chown=node:node /workspace/.next/standalone ./
+COPY --from=builder --chown=node:node /workspace/.next/static ./.next/static
 
 # Next.jsによってテレメトリデータを収集するのを無効にする
-ENV NEXT_TELEMETRY_DISABLED=$NEXT_TELEMETRY_DISABLED
+ENV NEXT_TELEMETRY_DISABLED=1
 
-# 注意: ポートのマッピングはdocker-composeで行うため、設定しない
+EXPOSE 3000
 
-CMD ["node", "server.js"]
+CMD ["node", "server.js"]

README.md

@@ -6,24 +6,34 @@
 
 - [Next.js](https://nextjs.org/)
 - [TypeScript](https://www.typescriptlang.org/)
-- [PostgreSQL](https://www.postgresql.org/)
-- [Remote container](https://code.visualstudio.com/docs/remote/containers)
+- [TailwindCSS](https://tailwindcss.com)
+- [Dev container](https://code.visualstudio.com/docs/remote/containers)
 - [Docker](https://www.docker.com/)
 
 ## 開発環境のセットアップ
 
-1. [Docker](https://www.docker.com/)をインストール
-2. [Visual Studio Code](https://code.visualstudio.com/)をインストール
-3. [Remote - Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)拡張機能をインストール
-4. このレポジトリをクローン`git clone https://github.com/CASru-IT/cas-ru.com.git`
-5. Visual Studio Codeでこのレポジトリを開く
-6. `sample.env`を参考に`.env`ファイルを作成し、環境変数を設定
-7. コマンドパレット（Ctrl+Shift+p）から`Reopen in Container`
+### 共通
+
+[Docker](https://www.docker.com/)をインストールしておく。
+
+### Devcontainerを使う場合
+
+1. [Visual Studio Code](https://code.visualstudio.com/)をインストール
+2. [Dev Containers](https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers)拡張機能をインストール
+3. このレポジトリをクローン`git clone https://github.com/CASru-IT/cas-ru.com.git`
+4. Visual Studio Codeでこのレポジトリを開く
+5. コマンドパレット（Ctrl+Shift+p）から`Reopen in Container`
+6. `localhost:3000`にアクセス
+
+`docker-compose.yml`を`docker-compose.dev.yml`で上書きして開発環境を構築している。devcontainerではさらに`.devcontainer/docker-compose.yml`で上書きしてコンテナーが落ちないようにしている。
+
+### Devcontainerを使わない場合
+
+1. `docker compose -f docker-compose.yml -f docker-compose.dev.yml up --build`
+2. `localhost:3000`にアクセス
 
 ## 本番環境のセットアップ
 
 1. [Docker](https://www.docker.com/)をインストール
-2. [Docker Compose](https://docs.docker.com/compose/)をインストール
-3. このレポジトリをクローン`git clone https://github.com/CASru-IT/cas-ru.com.git`
-4. `sample.env`を参考に`.env`ファイルを作成し、環境変数を設定
-5. `docker-compose up -d`でコンテナーを起動
+2. このレポジトリをクローン`git clone https://github.com/CASru-IT/cas-ru.com.git`
+3. `docker-compose up -d`でコンテナーを起動