Vite + React + TypeScript 環境を Docker で構築する方法 | GROUP DEV BLOG

2025.02.14

TypeScript

Vite + React + TypeScript 環境を Docker で構築する方法

1. はじめに

こんにちは、24卒で入社しました。キャベツ六郎です！

　最近、個人的に Docker を勉強しています。業務では主にバックエンドの機能を Docker で構築することが多いと感じているのですが、今回、モダンなフロントエンドの開発環境として Vite + React + TypeScript の環境を Docker コンテナ上で構築してみました。

まず、それぞれの技術について簡単にご紹介します。

Vite：React や Vue.js などのフロントエンドフレームワーク向けの高速なビルドです。軽量かつ効率的で、開発者体験を大きく向上させます。
TypeScript：JavaScript に静的型付けを追加した言語で、大規模なアプリケーション開発に適しています。コードの信頼性や保守性が向上します。
Docker：アプリケーションとその依存関係をコンテナ化するためのプラットフォームで、環境の差異による問題を解消し、効率的な開発・デプロイを可能にします。

今回のブログでは、これらの技術を用いた環境構築の手順や過程で得た知見を共有したいと思います。このブログが、Docker の活用範囲を広げたい方やモダンなフロントエンド環境構築に挑戦したい方の参考になれば幸いです。

2. Vite とは

出典：https://ja.vite.dev/

　Vite (ヴィート) は、フランス語で「速い」を意味する言葉の通り、高速な開発サーバーの起動と、変更内容の即時反映 (HMR: Hot Module Replacement) が特徴のフロントエンド開発ツールです。Vue.js の作者である Evan You 氏によって開発され、Vue.js だけでなく React など、様々なライブラリに対応しています。

Vite の主な特徴

高速な開発サーバーの起動

　Vite は、esbuild を使用して依存関係の事前バンドルを行います。esbuild は Go 言語によって開発されており、その言語の特徴であるメモリ効率や並列処理によって、依存関係の事前バンドル時間は、JavaScript ベースよりも 10 倍から 100 倍高速です。

変更内容の高速反映 (HMR)

　RollupやWebpackといった従来のバンドラーでは、モジュールの変更が検知されると、依存関係を再構築し、新しいバンドルを生成します。それによって、再度バンドル済みのファイルをブラウザに与えることで、HMRを実現しています。Viteでは、ネイティブESMの仕組みを利用するため、ファイルの変更が発生しても依存関係全体を再構築せず、変更箇所だけを更新することで高速な反映を可能にしています

シンプルな設定

　初期設定が非常に簡単で、面倒な設定をせずにVueやReactなどのモダンなライブラリを用いた開発環境の構築が容易に行えます。

個人的に利用する理由

　これまでのフロントエンド開発ツールである Webpack や Rollup を使用して TypeScript で開発する場合、それぞれのツールに適したルールに従い、環境設定を行う必要がありました。

一方で、Parcel のように、設定不要で手軽に使えるツールも登場しましたが、柔軟なカスタマイズが難しいという課題がありました。

その点、Vite は直感的な操作で TypeScript の開発環境を簡単に構築できるため、TypeScript を試してみたい初心者から、日常的に TypeScript を活用する開発者まで、幅広い層にとって非常に便利なツールになっています。

　私自身も初心者として、その手軽さに大きな魅力を感じ、Vite を使って開発環境を構築することに決め、本ブログを執筆しています。もっと詳しく、これまでの開発ツールの比較が見たい方はこちらへ

3. 環境構築

3.1 Docker のインストール

　Docker Desktop を公式サイトからダウンロードし、インストールしてください。

※アカウントは作らなくて大丈夫です。

出典：https://www.docker.com/ja-jp/get-started/

3.2 プロジェクトの作成

　任意のディレクトリに “ app “というディレクトリを作成します。その後、以下の手順でDockerで利用するファイルを作成します。

3.3 Dockerfile の作成

　VSCodeを用いて先ほど作成したフォルダを開きます。VSCodeのメニュータブから”ファイル＞新しいファイルの作成”でDockerfileという名前のファイルを作成します。Dockerfile は、コンテナイメージを作成するための設計図です。このファイルに記述する内容によって、コンテナの中身（環境）が決まります。

# ベースイメージの指定 
FROM node:lts-alpine3.20 

#作業ディレクトリ 
WORKDIR /var/www/html/app

3.4 docker-compose.yml の作成

　次に、docker-compose.yml を作成します。このファイルは、環境の設定ファイルであり、これから作成するコンテナの初期状態を「ports:」「volumes:」などYAML形式を用いて定義しています。また、複数のdockerイメージを一つのファイルで管理も出来ます。

docker-compose.yml には、以下の内容を記述します。

services:
  app:
    build:
      context: .
      dockerfile: ./docker/Dockerfile
    #どのディレクトリのdockerfileからimageをビルドするかを指定
    container_name: vite-container　# コンテナ名を明示的に指定する
    ports:
      - 5173:5173
    volumes:
      - ./app/:/var/www/html/app
    # ホストマシンの(./app)をコンテナ内のディレクトリ（/var/www/html/app） にマウント
    environment:
      - WATCHPACK_POLLING=true　#ホットリロードできるように
    tty: true　#コンテナを起動させ続ける

ディレクトリ構成

　作成するディレクトリやファイルの構成は以下の通りです。

任意のディレクトリ/
┣app
┣ docker
┃   ┗dockerfile
┣docker-compose.yml

4. アプリケーションの実行

docker compose up -d コマンドを実行
docker exec -it vite-container sh コマンドでコンテナの仮想環境にアクセス
npm create vite@latest
Ok to Procedd?(y)：y
Project name ：任意（defalutでも可）
Select a framework:React
select a variant： TypeScript( + SWCの方が高速にビルドしてくれる)
cd {プロジェクト名}
npm install
npm run dev

しかし、この状態ではブラウザで http://localhost:5173 にアクセスしても画面は表示されません。

コンテナとローカルマシンは別のホストであるため、初期設定の状態では仮想環境でサーバーを立ててもローカルマシンからアクセスできないことが原因でした。そのため、「vite.config.ts」に以下のコードを追加します。

import react from "@vitejs/plugin-react";


export default defineConfig({
  plugins: [react()],

//追加コード
  server: {
    host: true, // true に設定すると、LAN やパブリックアドレスを含むすべてのアドレスをリッスン
    port: 5173, // 開発サーバーが使用するポート番号
  },
});

こうすることで仮想環境上のサーバーを0.0.0.0で立てることになります。0.0.0.0はワイルドカードのような特殊なアドレスであり、同じネットワーク内の他のデバイスからもアクセス可能になります。そのため、LAN 内の別のホストから開発サーバーに接続し、動作を確認することができます。再度、ブラウザで http://localhost:5173 にアクセス

無事、表示確認できました👏

5. まとめ

　この記事では、Vite + React + TypeScript 環境を Docker で構築する方法を解説しました。Docker を使用することで、環境構築の手間を省き、開発効率を向上させることができます。また、Viteは、Parcelの「簡単さ」とWebpackの「拡張性」を両立させたツールとして、特にモダンなフロントエンド開発で強みを発揮します。

　開発速度を向上させたいなら、是非、試してみる価値があると考えられます。私は、これからもモダンな開発の発展に乗り遅れないように技術のキャッチに努めていきます。

皆さんもぜひ試してみてください！！！！