REACT、Node-JS、TypeScriptの初心者（JS経験あり）なのでまずはWeb上のお手本を基にサンプルプログラムの開発環境を構築してみる。

Dockerで開発環境を構築

ベースのコンテナについては以下を参照。

お手軽に最新バージョンの slim を使って構築。
compose を使う意味はないが、お手本通りに app サービスとして作成してみる。

Dockerfile

FROM node:21.1-slim
WORKDIR /app

docker-compose.yml

version: '3.8'
services:
  app:
    container_name: node-app
    build:
      context: .
      dockerfile: Dockerfile
    restart: always
    tty: true
    volumes:
      - type: bind
        source: .
        target: /app

コンテナを作成して実行。

コンテナアプリフォルダで実行

docker compose up --build

起動すれば VSC から「実行中のコンテナにアタッチ」で /app にコンテナ上の開発フォルダにアタッチして開発ができるようになっている。

星野仁

React のサンプルを構築

npx create-react-app react-app

実行は

npm start

VSCがコンテナのポートをlocalhostに転送してくれるのでブラウザで表示できる。

Nextjs でサンプルを構築。

npx create-next-app

設定内容は以下を参照

星野仁

VSCのデバグ実行の設定で Chrome: Launch を選択すると、上記のブラウザ表示＆操作に対してブレークやステップ実行が可能になる。

launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Nextjs: Client",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

npm run dev で起動した Node.js process にVSCのデバッガがアタッチしていると、上記のDebuggerを追加で起動してもブレーク設定ができてもブレークできない。

起動後にデバッガを停止して Nextjs: Client を別途起動するとクライアントのコードをVSC上でデバグできるようになる。

コンテナ上でサーバーを動かしてローカルでデバッグする環境をつくる。
以下を参照。

星野仁

TypeScriptのプロジェクトの環境構築には npm, yarn などを利用するが、CIではメモリ効率を考慮して pnpm を使っているところが多いようだ。

星野仁

Next.jsでアプリを作って、PWA化する方針に決定。

環境構築は以下を参照。