====== 29 Next.js ======

===== 1 ファイル用意 =====

node.jsのバージョンは、[[https://nodejs.org/en|ここ]]で確認

<code|Dockerfile>
FROM node:20.10.0
WORKDIR /usr/src/app
</code>

<code|docker-compose.yml>
version: '3'

services:
  node:
    container_name: "react"
    build: .
    volumes:
      - .:/usr/src/app
    command: sh -c "cd my-app && npm run dev"
    ports:
      - '3000:3000'
    environment:
      - WATCHPACK_POLLING=true
</code>
<color #ed1c24>※[my-app]は、アプリ作成で作るアプリ名を入れる</color>

===== 2 build =====

  docker-compose build

===== 3 react アプリ作成 =====

<color #ed1c24>※[my-app] は好きなアプリ名を入れる。</color>

  docker-compose run --rm node sh -c 'npx create-react-app [my-app] --template typescript'


===== 4 起動 =====

  docker-compose up -d

===== 5 確認 =====

ブラウザで http://[IP]:3000 をアクセス

{{:06_virtualization:05_container:pasted:20231210-080134.png}}

{{tag>react Docker next.js}}