DockerでReact + TypeScript + Viteの開発環境を構築し、プロジェクトを作成する手順

この記事の最終更新日: 2023年4月12日

開始時ディレクトリ構成
React+TypeScriptプロジェクトを作成
package.jsonを編集
コンテナに入る
画面の確認
Reactを学習するのにおすすめな書籍

開始時ディレクトリ構成

./react-ts
└ docker
|     └ Dockerfile
└ docker-compose.yml

Dockerfile

FROM node:19.8.1

WORKDIR /data/src

RUN npm install -g npm@latest && npm install -g vite@latest

docker-compose.yml

version: '3'
services:
  app:
    build: ./docker
    container_name: front
    tty: true
    volumes:
      - ./src:/data
    ports:
      - "5173:5173"

React+TypeScriptプロジェクトを作成

dockerディレクトリ上で、以下のコマンドを実行

$ docker-compose build
$ docker-compose run --rm app npm create vite@latest .

yを押すと、プロジェクトが作成されます。

React, TypeScript + SWCを選択しましょう

(base) react-ts % docker-compose run --rm app npm create vite@latest .
[+] Running 1/1
 ⠿ Network ln-sb_default  Created                                                                                                                                                0.1s
Need to install the following packages:
  create-vite@4.2.0
Ok to proceed? (y) y
✔ Select a framework: › React
✔ Select a variant: › TypeScript + SWC

Scaffolding project in /data/src...

Done. Now run:

  npm install
  npm run dev

(base) react-ts %

package.jsonを編集

devに、 –hostを追加。

  "scripts": {
    "dev": "vite --host",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },

コンテナに入る

Dockerコンテナを立ち上げ、コンテナに入る。

その後npm install, npm run build, npm run devを実行。

$ docker-compose up -d
$ docker exec -it front sh
$ npm install
$ npm run build
$ npm run dev

画面の確認

http://localhost:5173/

最終ディレクトリ構成

.
└ app/src/....
└ docker
｜     └ Dockerfile
└ docker-compose.yml

Reactを学習するのにおすすめな書籍

daigoro

大阪のエンジニアが書いているブログ。