はじめに
この記事は、弊社で行うインターンシップのプラス要素の資料として書きました。
5日間のインターンでは、環境構築を必要としないCodesandboxを使用します。
インターンを通じて、さらに興味を持った学生向けに今回の資料を作成しました。
この記事の目的は、記事に出てくるツールなどを使いこなすのではなく、入門編として今後Dockerなどを使用することが出てきた際に抵抗なく、始められるようになることを目指して作成しています。
対象者
- 弊社のインターン生
- Viteを使ってReactの環境構築したい人
- Vite + Dockerを使って環境構築したい人
など...
今回出てくるものたち
- Node.js
- Docker
- React
- Vite
出てこないもの
ツールそれぞれの詳しい解説
Node.jsの準備
今回、npmコマンドを使用するため、Node.jsをインストールします。
まず、バージョンを確認するコマンドで、npmコマンドが使用できるか確認しましょう。
$ npm -v
10.5.1
このようにバージョンが表示されれば、npmコマンドが使用できる状態です。
$ npm -v
bash: node: command not found
コマンドないよと言われた方は、インストールをします。
次のコマンド、
$ brew install node
または、
ここからダウンロードできます。
インストールできたら、先ほどのバージョンを確認するコマンドで、npmコマンドが使用できるか確認してください。
バージョンが確認できたら、こちらの準備は完了です。
Reactのプロジェクトを作成する
今回、ビルドツールにViteを使用します。
Viteは、フランス語で「速い」を意味し、名前の通り開発サーバの起動が速いといった特徴があります。
詳しくは、公式サイトを見てみてください。
それでは、Viteプロジェクトを作成します。
次のコマンドを実行してください。
$ npm create vite@latest
実行すると、いろいろ聞かれるので回答します。
最初はyを入力してenter
$ npm create vite@latest
Need to install the following packages:
create-vite@5.5.2
Ok to proceed? (y) y
プロジェクトネームは、デフォルトではvite-projectになっています。ファイル名になるので、自由に変更してください。
$ npm create vite@latest
? Project name: › vite-project
フレームワークはReactを選択。
$ npm create vite@latest
✔ Project name: … vite-project
? Select a framework: › - Use arrow-keys. Return to submit.
Vanilla
Vue
❯ React
Preact
Lit
Svelte
Solid
Qwik
Others
ここではTypeScript、JavaScript使用する言語を選択してください。ただし、SWCがついているものを選択してください。高速でビルドすることが可能になります。
$ npm create vite@latest
✔ Project name: … vite-project
✔ Select a framework: › React
? Select a variant: › - Use arrow-keys. Return to submit.
TypeScript
TypeScript + SWC
JavaScript
❯ JavaScript + SWC
Remix ↗
以下のような表示が出たら作成完了です。
Done. Now run:
cd vite-project
npm install
npm run dev
プロジェクトの作成が終わったら、作成されたファイルに移動します。
$ cd vite-project
以下のようなファイルが作成されていると思います。
vite-project
├── README.md
├── eslint.config.js
├── index.html
├── package.json
├── public
│ └── vite.svg
├── src
│ ├── App.css
│ ├── App.jsx
│ ├── assets
│ │ └── react.svg
│ ├── index.css
│ └── main.jsx
└── vite.config.js
移動したら、最初に次のコマンドを実行してください。必要なパッケージのインストールを行います。
$ npm install
インストールが完了したら次のコマンドで、サーバを起動します。
$ npm run dev
以下のような表示が出れば立ち上げ成功です。
VITE v5.4.1 ready in 272 ms
➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ press h + enter to show help
http://localhost:5173/にアクセスしてみましょう。
以下の画像のように表示されたら完了です。
ここまでで最低限のReactの環境構築は終わりました。
Docker
ここからは、これまで準備した開発環境をDockerで使用できるようにしたいと思います。
Dockerは簡単に説明すると、自分のPCの中で別のPCを動かすみたいなイメージです。独立しているため、Docker内でインストールしたものなどは、自身のPCには影響を及ぼしません。詳しく知りたい方は、もっと詳しく説明されている記事などもあるので、そちらを参考にしてみてください。
個人的に感じた、Dockerのメリットは、
- ローカル環境がめちゃくちゃにならない
- チーム開発する時に、環境構築が楽になる
- 自分は動くのにバージョンなどの違いで、他の人は動かないことがない
などがあるかなと思っています。
Dockerのインストール
早速Dockerのインストールを行います。
以下のリンクからDocker Desktopをダウンロードしてください。
インストール手順は以下の記事などを参考にしてみてください。
バージョン確認などでdockerコマンドが使用できるとこを確認できたらインストール完了です。
$ docker -v
Docker version 26.1.3, build b72abbb
OrbStackもおすすめなので、興味ある方はよかったら見てみてください。
Dockerfileとcompose.yamlの作成
先ほど作成したViteプロジェクトのフォルダ内に新しくファイルを作成します。
$ touch Dockerfile compose.yaml
フォルダ構成は以下のようになっていると思います。
vite-project
├── Dockerfile
├── README.md
├── compose.yaml
├── eslint.config.js
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── vite.config.js
ファイルを作ることができたら、作成したファイルに以下のようにコードを記述します。
# ベースイメージとしてNode.jsを使用
FROM node:22-slim
# 作業ディレクトリを設定
WORKDIR /app
# パッケージファイルをコピー
COPY package.json package-lock.json ./
# 依存関係をインストール
RUN npm install
# 開発用サーバの起動
CMD ["npm", "run", "dev"]
services:
app:
build: .
ports:
- "3000:3000"
volumes:
- .:/app
- /app/node_modules
簡単に解説をします。
まずは、Dockerfileから
# ベースイメージとしてNode.jsを使用
FROM node:22-slim
Dockerfileの最初に使用するイメージを記述しています。
このイメージは、以下のサイトを参考に選びました。
基本的にslimとついている新しいものを選べば大丈夫です。
# 作業ディレクトリを設定
WORKDIR /app
コンテナ内のディレクトリにappという名前を使用。
# パッケージファイルをコピー
COPY package.json package-lock.json ./
# 依存関係をインストール
RUN npm install
ここでは、最初に必要なパッケージをインストールするため、ファイルのコピーを行いインストールしています。
# 開発用サーバの起動
CMD ["npm", "run", "dev"]
このように記述することで、コンテナを立ち上げると、一緒に開発用サーバも起動してくれます。
次に、compose.yamlの解説
services:
app:
コンテナの名前をappに指定
build: .
現在いるディレクトリにあるDockerfileを使用してbuild
ports:
- "3000:3000"
ホストの3000番をコンテナの3000番に関連付ける。
volumes:
- .:/app
- /app/node_modules
.:/appはvite-projectフォルダの中身を、コンテナのappフォルダにマウントさせる。これにより、ホスト上の変更がリアルタイムでコンテナ内に反映される。
/app/node_modulesはホストとコンテナないの競合を防ぐことができる。
あとはvite-projectフォルダ内のvite.config.jsを以下のように編集してください。
3000番ポートを使用するように記述しています。
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
host: "0.0.0.0",
port: 3000,
},
});
Dockerのコマンド
ここでは必要最低限のコマンドを紹介します。
#主に初回のコンテナ起動時、すでにあるイメージを使用してコンテナを起動する時に使用
$ docker compose up -d
#Dockerfileやcompose.yamlを編集した時に使用
$ docker compose up -d --build
#コンテナに入る時に使用 appはcompose.yamlのservicesの名前
$ docker compose exec app bash
#コンテナを修了する時に使用
$ docker compose down
その他のコマンドなどは、以下などを参考にしてみてください。
コンテナに入る
それでは実際に以下のコマンドで、コンテナを起動してみましょう。
$ docker compose up -d
[+] Running 2/2
✔ Network vite-project_default Created
✔ Container vite-project-app-1 Started
最初の起動には時間が少しかかると思います。
起動が完了したらコンテナに入ります。
$ docker compose exec app bash
root@e894f2bbde51:/app#
このような表示になれば成功です。
http://localhost:3000/にアクセスをしてみてください。
先ほどと同じ画面が表示されればDockerを使った環境構築の完成です。
コンテナから抜ける時はexitで抜けられます。
root@e894f2bbde51:/app# exit
作業終了する時は、
$ docker compose down
このコマンドを忘れずにしましょう。
おわりに
長めな内容となってしまいましたが、いかがだったでしょうか。
私自身Dockerを触ったのが、入社してからだったので良いアウトプットの経験となりました。
わかりにくい部分、うまくできない部分などありましたらコメントお願いします。