🐵

Docker で Vite + React + TypeScript の環境構築！Tailwind CSS も導入

に公開
Docker
React
TypeScript
Tailwind CSS
Vite
tech

はじめに

本記事では、Dockerを使ってViteベースのReact+TypeScript環境を構築する手順を紹介します。
また、スタイルの管理を簡単にするためにTailwind CSSも導入します。

ローカル環境にNode.jsをインストールせずに、コンテナを活用して開発を進められるメリットがあります。
「環境構築を効率化したい」「React × TypeScriptの開発をスムーズに始めたい」という方にオススメです！

この記事でできること

  • Dockerを使用し、React + TypeScriptの環境をセットアップ
  • Viteを利用して高速開発
  • Tailwind CSSを導入してスタイル管理を簡単に
  • ローカルでNode.jsのインストール不要！ コンテナ上で動作

環境構築の流れ

1.フォルダ構成

frontend-reactフォルダの中に Vite のプロジェクトを作成します。

<プロジェクト名>
   ├── frontend-react  # React + TypeScript のフロントエンド
   │      ├── Dockerfile
   │      ├── package.json
   │
   ├── docker-compose.yml

2.docker-compose.ymlの設定

docker-compose.ymlにfrontend-reactディレクトリを新規追加します。

services:
  frontend-react:
    build:
      context: ./frontend-react
      dockerfile: Dockerfile
    volumes:
      - ./frontend-react:/frontend-react
    command: yarn run dev
    ports:
      - "5173:5173"
    depends_on:
      - backend
    stdin_open: true
    tty: true

ポイント

  • build：frontend-reactのDockerfileを指定
  • volumes：ローカルのfrontend-reactディレクトリとコンテナを同期
  • command: yarn run dev：Viteでyarn run devコマンドを実行すると、開発サーバー(dev server)が起動
    ⇨ ドキュメント<はじめに>
  • ports: "5173:5173"：Viteの開発サーバーは デフォルトでポート5173を使用するため、ホストPC（外部）からアクセスできるように5173:5173を指定
    ⇨ ドキュメント<サーバーオプション>

3. Dockerfileの作成

frontend-react用のDockerfileを作成します。

FROM node:22.11.0

WORKDIR /frontend-react

COPY package.json yarn.lock ./
RUN yarn install
COPY . .

ポイント

  • FROM node:22.11.0：公式リリーススケジュールを参照しLTSの22系を利用
    ⇨ リリーススケジュール
  • WORKDIR /frontend-react：作業ディレクトリ指定
  • COPY package.json yarn.lock ./：パッケージ情報を先にコピーすることで、Dockerのレイヤーキャッシュを活用し、インストール時間を短縮
    ⇨ DockerはDockerfileの各ステップをレイヤーとしてキャッシュするため、package.jsonやyarn.lockに変更がなければyarn installの結果を再利用できる。
    ⇨ 一方、もしCOPY . .を先にすると、コードが変更されるたびにレイヤーキャッシュが無効化され、毎回yarn installを実行する。
    ※ 「Dockerのレイヤーキャッシュ」について詳しく知りたい方は、こちらの記事をご参照ください！⇨ Dockerfileのフロントエンドとバックエンドの構築、命令コマンドの使い方、レイヤーキャッシュについて
  • RUN yarn installで必要なパッケージをインストール
  • COPY . .：通常、volumes を使ってローカルの frontend-react ディレクトリとコンテナを同期しますが、COPY . .を追加することで、Dockerイメージ単体でも動作。
    これにより、docker composeを使用せずにdocker build→docker runでも実行可能

4. Vite で React + TypeScript プロジェクトを作成

下のコマンドを実行し、frontend-reactフォルダ内にViteベースのReact + TypeScriptプロジェクトを作成します。

docker compose run --rm frontend-react sh -c "yarn create vite . --template react-ts"

コマンドについて

  • docker compose run --rm frontend-react
    → frontend-reactの`コンテナを一時的に起動し、終了後に自動削除
    → 不要なコンテナが残らないため、ローカル環境を汚さずに実行
  • sh -c "yarn create vite . --template react-ts"
    → Viteを使用しReact + TypeScriptのプロジェクトを作成
    → .（カレントディレクトリ）を指定し、frontend-reactのフォルダ内に直接セットアップ

5. パッケージのインストール

下のコマンドでyarn installを実行します。

docker compose run --rm frontend-react sh -c 'yarn install'

コマンドについて

  • sh -c 'yarn install'
    → sh -cは、シェル（sh）を起動し、その内でyarn installを実行するためのオプション
    → これにより、yarn installが確実に解釈実行

6. Vite の設定を修正

作成されたpackage.jsonのscripts.devを以下のように変更します。

"dev": "vite --host"

変更理由

デフォルトではlocalhost (127.0.0.1)にバインドされるため、--hostを指定して 0.0.0.0に変更します。
これにより、コンテナ外（ホストPC）からアクセス可能になります。

7. Tailwind CSS の導入

① Tailwind CSS をインストール

docker compose run --rm frontend-react sh -c "yarn add -D tailwindcss@3 postcss autoprefixer"

② 設定ファイルを作成

docker compose run --rm frontend-react sh -c "yarn tailwindcss init -p"

③ tailwind.config.js の修正

export default {
  content: [
    "./index.html",  ←（追加）
    "./src/**/*.{js,ts,jsx,tsx}",    ←（追加）
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

④ src/index.css に追加
src/index.cssの先頭に以下を追加します。

@tailwind base;
@tailwind components;
@tailwind utilities;

8. Docker コンテナの起動

docker compose build
docker compose up -d

9. レイアウトの崩れを修正するには

もし画面全体が中央に寄らないなどの問題が発生した場合、index.cssを下のように修正します。

body {
  @apply bg-gray-100 text-gray-900;
}

以上で http://localhost:5173 にアクセスすれば React アプリが動作するはずです！

Discussion