はじめに
Docker を使って React プロジェクトを作成する方法を忘れないように備忘録として残しておきます。
この順番でやれば最低限のプロジェクトは作成できます。
1. Docker のインストール
まずは Docker のインストールがまだの人は先にDockerインストールします。公式サイトからインストーラーをダウンロードし、指示に従ってインストールを完了してください。
2. React プロジェクトの作成
プロジェクト用のディレクトリを作成し、ディレクトリ配下でCreate React App を使って新しい React プロジェクトを作成します。
npx create-react-app my-react-app
cd my-react-app
3. Dockerfile の作成
プロジェクトのルートディレクトリに Dockerfile を作成し、以下の内容を追加します。
VScodeでプロジェクトを開いてDockerfileを作成するのが一番やりやすいと思います。
# ベースイメージを指定
FROM node:14
# 作業ディレクトリを設定
WORKDIR /usr/src/app
# 依存関係をコピー
COPY package*.json ./
# 依存関係をインストール
RUN npm install
# アプリケーションのソースコードをコピー
COPY . .
# 開発サーバーを起動
CMD ["npm", "start"]
# コンテナが使用するポートを指定
EXPOSE 3000
4. Docker イメージのビルド
Dockerfile を使って Docker イメージをビルドします。
docker build -t my-react-app .
5. Docker コンテナの実行
ビルドしたイメージを使って Docker コンテナを実行します。
Copy code
docker run -p 3000:3000 my-react-app
ブラウザで http://localhost:3000 にアクセスすると、React のデフォルトのウェルカムページが表示されるはずです。
6. Docker コンテナの停止
Docker コンテナを実行した後、必要に応じてサーバーを停止する方法について説明します。
まず、現在実行中の Docker コンテナの一覧を表示します。
Copy code
docker ps
このコマンドを実行すると、実行中のコンテナの一覧が表示されます。コンテナ ID と名前を確認できます。
Copy code
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
abc123def456 my-react-app "npm start" 5 minutes ago Up 5 minutes 0.0.0.0:3000->3000/tcp vibrant_tesla
ここで、CONTAINER ID 列の ID（例えば abc123def456）を使用して、コンテナを停止します。
Copy code
docker stop abc123def456
コンテナが正常に停止されると、docker ps を再度実行してもそのコンテナは一覧に表示されなくなります。
docker psで表示されたコンテナを一気に停止したい場合は以下のコマンドを実行してください。
docker stop $(docker ps -q)
まとめ
この記事では、初心者向けに Docker を使って React プロジェクトを作成し、コンテナを実行および停止する方法を説明しました。以下が基本的な流れです。
実際に作ってみると思ったよりも簡単に作成できるので是非一度プロジェクトを作成してみてください。