はじめに
Docker上でUbuntuの構築をした後、その中でReactの環境構築も行ったのを記事化したものです。
位置付けとしては【失敗OK】コンテナ上のUbuntuにReactを構築してみたでコンテナを閉じても環境が消えないバージョンとなります。
前提条件
- 使用しているPCがMacであること
- Dockerがインストールされていること
- VSCodeがインストールされていること
手順1:コンテナ作成
はじめに任意のディレクトリにてコンテナの基盤となるDockerfileとdocker-compose.ymlの作成から進めていきます。
Dockerfile
DockerfileにてベースとなるUbuntuの構築をし、必要なコマンドの導入やインストールを進めていきます。
# ベースイメージ
FROM ubuntu:22.04
# タイムゾーン・ロケール設定
ENV TZ=Asia/Tokyo
RUN apt-get update && apt-get install -y \
curl \
git \
gnupg \
ca-certificates \
sudo \
vim \
&& rm -rf /var/lib/apt/lists/*
# Node.js（LTS）のインストール
RUN curl -fsSL https://deb.nodesource.com/setup_20.x | bash - \
&& apt-get install -y nodejs \
&& npm install -g vite
# 作業ディレクトリ
WORKDIR /app
# ポート開放（Viteのデフォルトポート）
EXPOSE 5173
CMD ["bash"]
docker-compose.yml
version: '3.8'
services:
dockerubuntureact:
build: .
container_name: dockerubuntureact
volumes: # ホストPCから編集しつつUbuntu上で実行できる
- ./app:/app
ports:
- "5173:5173"
tty: true
コンテナ作成・起動
両ファイルを作成したら、下記のコマンドを実行しコンテナのビルドと起動をします。
docker-compose up -d --build
手順2:プロジェクトを作成しよう
コンテナが立ち上がったら早速プロジェクトを作成していきます。
その前にまずはコンテナの中に入っていきます。
docker exec -it dockerubuntureact bash
ここで
:/app#
という表示がされていれば無事コンテナに入れています。
コンテナに入れていることを確認したら下記のコマンドを実行します。
npm create vite@latest
ここでいくつか質問が表示されるので、Reactを選択しましょう。
成功すると、docker-compose.ymlのあるディレクトリにあるフォルダappの中にReact関係のものが色々入っていることが確認できます。
手順3:依存関係とReactのインストールをしよう
確認ができたら、コンテナそのものに対し依存関係とReactのインストールをする必要があります。
下記の順に沿ってコマンドを実行してください。
# 任意のプロジェクト名に移動
cd dockerubuntureact
# 依存関係をインストール
npm install
# reactをインストール
npm install react react-dom
npm install --save-dev @vitejs/plugin-react
問題がなければ次に進んでいきます。
手順4:プロジェクトを起動しよう
ここまで問題がなければ早速プロジェクトを起動しましょう。
一般的に
npm run dev
を使うことが多いですが、ここでは
npm run dev -- --host
と実行する必要があります。
というのも、-- --hostを付けないとコンテナ外からアクセスできないためです。
http://localhost:5173/ を開き
上のような画面が表示されれば成功です。
手順5:コンテナを停止しよう
表示されている画面のウィンドウを閉じ、Control+Cでプロジェクトを停止します。
また、exitを実行しコンテナの外に出ます。
そして、
docker compose down
を実行しコンテナそのものを停止します。
手順6:コンテナとプロジェクトを再度起動しよう
前回の記事では一度コンテナを停止したら消えていたので、環境が残っているかを確認も兼ね再度コンテナの起動から進めていきます。
docker compose up -d
docker exec -it dockerubuntureact bash
cd dockerubuntureact
npm run dev -- --host
の順に実行し、先程と同じURLから同じ画面を表示できれば成功です。
終わりに
今回は前回に引き続きDocker上で構築したUbuntuを使い、コマンド入力でReactの環境構築を進める方法を解説しました。
前回と違い一度コンテナを停止してからでも環境を維持できるので本格的な実装での活用も期待できます。
GitHubでも公開しているので必要に応じ参照してください。
最後まで読んでくださりありがとうございました。