はじめに
Docker上でUbuntuの構築をした後、その中でReactの環境構築も行ったのを記事化したものです。
位置付けとしては【Mac】Docker上でUbuntuを構築しVSCodeに接続してみたの続きとなります。
前回の記事と併せることでUbuntuにてReactの環境構築をする際の練習としてご活用いただけます。
前提条件
- 前回の記事を基にコンテナを作成し、その中にUbuntuを構築していること
注意点
- このコンテナはdocker compose downを実行するとUbuntuそのもの以外は消えてしまうので、あくまで環境構築の練習のみの用途になる点はご注意ください
- 逆に途中で失敗してしまってもコンテナを停止することでやり直しができるというのがメリットとなります
手順1:コンテナを立ち上げVSCodeに接続しよう
Mac側のターミナルでディレクトリをコンテナのある場所へ移動し、起動します。
docker compose up -d
Startedが表示されたら、
code .
を実行します。
そうするとVSCodeが開くのでCommand,Shift,Pを同時に押してコマンドパレットを起動させ、「Dev Containers: Attach to Running Container...」をクリックします。
そうするとコンテナ名が表示されるので該当するものをクリックします。
新たにVSCodeのウィンドウが表示されたら接続成功です。
手順2:必要なパッケージなどをインストールしよう
手順1を実行できた時点でコンテナに入っているのでVSCode上のターミナルからプロジェクト作成に必要なものをインストールしていきます。
まず、apt関係から順に入れていきます。
apt update
apt install -y curl build-essential
そうしたら、Node.jsとnpmをインストールします。
curl -fsSL https://deb.nodesource.com/setup_20.x | bash -
apt install -y nodejs
その後下記のコマンドを実行し、Node.jsとnpmのバージョンがそれぞれ表示されれば成功です。
node -v
npm -v
手順3:プロジェクトを作成しよう
一通りインストールできたら、プロジェクト用のディレクトリを作成し、そこにプロジェクトを作成していきます。
mkdir /app
cd /app
# dockerUbuntuReactは任意の名称です
npm create vite@latest dockerUbuntuReact -- --template react
ここでいくつかの質問が表示される場合はそれぞれの状況に応じて選択するようにしてください。
手順4:依存パッケージをインストールし起動しよう
プロジェクトが作成できたら、依存パッケージをインストールし開発サーバーを起動していきます。
cd dockerUbuntuReact
npm install
npmのインストールができたら、下記のコマンドを実行します。
npm run dev
そうするとターミナル上にhttp://localhost:5173/ と表示されるのでブラウザで表示します。
最終的に下記の画面が表示されば成功です。
手順5:コンテナを停止しよう
コンテナを停止する際は
exit
を実行しVSCodeを閉じます。
そしてMac側のターミナルにて
docker compose down
を実行すればコンテナが停止されます。
この後手順1を再度行い下記のコマンドを実行しても存在しないことが確認できます。
node -v
npm -v
終わりに
今回はDocker上で構築したUbuntuを使い、コマンド入力でReactの環境構築を進める方法を解説しました。
前回の記事を併せた方法なので一度停止させると中身が消えてしまいますが、Ubuntuでの環境構築の練習をする際に有効です。
最後まで読んでくださりありがとうございました。