React開発を加速！ViteとDockerで作るシンプル開発環境入門

## はじめに
この記事は、弊社で行うインターンシップのプラス要素の資料として書きました。
5日間のインターンでは、環境構築を必要としないCodesandboxを使用します。
インターンを通じて、さらに興味を持った学生向けに今回の資料を作成しました。

この記事の目的は、記事に出てくるツールなどを使いこなすのではなく、入門編として今後Dockerなどを使用することが出てきた際に抵抗なく、始められるようになることを目指して作成しています。

### 対象者
- 弊社のインターン生
- Viteを使ってReactの環境構築したい人
- Vite + Dockerを使って環境構築したい人
など...

### 今回出てくるものたち
- Node.js
- Docker
- React
- Vite

### 出てこないもの
ツールそれぞれの詳しい解説

## Node.jsの準備
今回、npmコマンドを使用するため、Node.jsをインストールします。
まず、バージョンを確認するコマンドで、npmコマンドが使用できるか確認しましょう。
```bash
$ npm -v
10.5.1
```
このようにバージョンが表示されれば、npmコマンドが使用できる状態です。
```bash
$ npm -v
bash: node: command not found
```
コマンドないよと言われた方は、インストールをします。
次のコマンド、
```bash
$ brew install node
```
または、

https://nodejs.org

ここからダウンロードできます。
インストールできたら、先ほどのバージョンを確認するコマンドで、npmコマンドが使用できるか確認してください。
バージョンが確認できたら、こちらの準備は完了です。

## Reactのプロジェクトを作成する
今回、ビルドツールにViteを使用します。
Viteは、フランス語で「速い」を意味し、名前の通り開発サーバの起動が速いといった特徴があります。
詳しくは、公式サイトを見てみてください。

https://vitejs.dev

それでは、Viteプロジェクトを作成します。
次のコマンドを実行してください。
```bash
$ npm create vite@latest
```
実行すると、いろいろ聞かれるので回答します。
最初は`y`を入力してenter
```bash
$ npm create vite@latest
Need to install the following packages:
create-vite@5.5.2
Ok to proceed? (y) y
```
プロジェクトネームは、デフォルトではvite-projectになっています。ファイル名になるので、自由に変更してください。
```bash
$ npm create vite@latest
? Project name: › vite-project
```
フレームワークはReactを選択。
```bash
$ 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がついているものを選択してください。高速でビルドすることが可能になります。
```bash
$ 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 ↗
```
以下のような表示が出たら作成完了です。
```bash
Done. Now run:

  cd vite-project
  npm install
  npm run dev
```
プロジェクトの作成が終わったら、作成されたファイルに移動します。
```bash
$ cd vite-project
```
以下のようなファイルが作成されていると思います。
```bash
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
```

移動したら、最初に次のコマンドを実行してください。必要なパッケージのインストールを行います。
```bash:vite-project/
$ npm install
```
インストールが完了したら次のコマンドで、サーバを起動します。
```bash:vite-project/
$ npm run dev
```
以下のような表示が出れば立ち上げ成功です。
```bash
  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/`にアクセスしてみましょう。
以下の画像のように表示されたら完了です。
![Screenshot 2024-08-20 at 14.26.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815234/8f5009a2-7f65-7695-359a-389d9a10f722.png)

ここまでで最低限のReactの環境構築は終わりました。

## Docker
ここからは、これまで準備した開発環境をDockerで使用できるようにしたいと思います。
Dockerは簡単に説明すると、自分のPCの中で別のPCを動かすみたいなイメージです。独立しているため、Docker内でインストールしたものなどは、自身のPCには影響を及ぼしません。詳しく知りたい方は、もっと詳しく説明されている記事などもあるので、そちらを参考にしてみてください。

個人的に感じた、Dockerのメリットは、
- ローカル環境がめちゃくちゃにならない
- チーム開発する時に、環境構築が楽になる
- 自分は動くのにバージョンなどの違いで、他の人は動かないことがない

などがあるかなと思っています。

### Dockerのインストール
早速Dockerのインストールを行います。
以下のリンクからDocker Desktopをダウンロードしてください。

https://www.docker.com/

インストール手順は以下の記事などを参考にしてみてください。

https://qiita.com/R_R/items/a09fab09ce9fa9e905c5

バージョン確認などで`docker`コマンドが使用できるとこを確認できたらインストール完了です。
```bash
$ docker -v
Docker version 26.1.3, build b72abbb
```

OrbStackもおすすめなので、興味ある方はよかったら見てみてください。

https://qiita.com/shoki-y/items/4b8e48a525062a8ec9ad

### Dockerfileとcompose.yamlの作成
先ほど作成したViteプロジェクトのフォルダ内に新しくファイルを作成します。
```bash
$ touch Dockerfile compose.yaml
```
フォルダ構成は以下のようになっていると思います。
```bash
vite-project
├── Dockerfile
├── README.md
├── compose.yaml
├── eslint.config.js
├── index.html
├── node_modules
├── package-lock.json
├── package.json
├── public
├── src
└── vite.config.js
```
ファイルを作ることができたら、作成したファイルに以下のようにコードを記述します。
```Dockerfile:vite-project/Dockerfile
# ベースイメージとしてNode.jsを使用
FROM node:22-slim

# 作業ディレクトリを設定
WORKDIR /app

# パッケージファイルをコピー
COPY package.json package-lock.json ./

# 依存関係をインストール
RUN npm install

# 開発用サーバの起動
CMD ["npm", "run", "dev"]
```
```yaml:vite-project/compose.yaml
services:
  app:
    build: .
    ports:
      - "3000:3000"
    volumes:
      - .:/app
      - /app/node_modules
```
簡単に解説をします。
まずは、Dockerfileから
```dockerfile
# ベースイメージとしてNode.jsを使用
FROM node:22-slim
```
Dockerfileの最初に使用するイメージを記述しています。
このイメージは、以下のサイトを参考に選びました。

https://hub.docker.com/_/node

基本的に`slim`とついている新しいものを選べば大丈夫です。
```dockerfile
# 作業ディレクトリを設定
WORKDIR /app
```
コンテナ内のディレクトリにappという名前を使用。
```dockerfile
# パッケージファイルをコピー
COPY package.json package-lock.json ./

# 依存関係をインストール
RUN npm install
```
ここでは、最初に必要なパッケージをインストールするため、ファイルのコピーを行いインストールしています。
```dockerfile
# 開発用サーバの起動
CMD ["npm", "run", "dev"]
```
このように記述することで、コンテナを立ち上げると、一緒に開発用サーバも起動してくれます。
次に、compose.yamlの解説
```yaml
services:
  app:
```
コンテナの名前をappに指定
```yaml
build: .
```
現在いるディレクトリにあるDockerfileを使用してbuild
```yaml
ports:
      - "3000:3000"
```
ホストの3000番をコンテナの3000番に関連付ける。
```yaml
volumes:
      - .:/app
      - /app/node_modules
```
`.:/app`はvite-projectフォルダの中身を、コンテナのappフォルダにマウントさせる。これにより、ホスト上の変更がリアルタイムでコンテナ内に反映される。
`/app/node_modules`はホストとコンテナないの競合を防ぐことができる。


あとはvite-projectフォルダ内のvite.config.jsを以下のように編集してください。
3000番ポートを使用するように記述しています。
```js:vite-project/vite.config.js
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のコマンド
ここでは必要最低限のコマンドを紹介します。
```bash
#主に初回のコンテナ起動時、すでにあるイメージを使用してコンテナを起動する時に使用
$ docker compose up -d

#Dockerfileやcompose.yamlを編集した時に使用
$ docker compose up -d --build

#コンテナに入る時に使用 appはcompose.yamlのservicesの名前
$ docker compose exec app bash

#コンテナを修了する時に使用
$ docker compose down
```
その他のコマンドなどは、以下などを参考にしてみてください。

https://docs.docker.jp/engine/reference/commandline/index.html

### コンテナに入る
それでは実際に以下のコマンドで、コンテナを起動してみましょう。
```bash
$ docker compose up -d
[+] Running 2/2
 ✔ Network vite-project_default  Created                                
 ✔ Container vite-project-app-1  Started
```
最初の起動には時間が少しかかると思います。
起動が完了したらコンテナに入ります。
```bash
$ docker compose exec app bash
root@e894f2bbde51:/app#
```
このような表示になれば成功です。

`http://localhost:3000/`にアクセスをしてみてください。
先ほどと同じ画面が表示されればDockerを使った環境構築の完成です。
![Screenshot 2024-08-20 at 16.15.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3815234/3233e72c-1dc8-cff2-fdfd-4fa27454f773.png)

コンテナから抜ける時は`exit`で抜けられます。
```bash
root@e894f2bbde51:/app# exit
```
作業終了する時は、
```bash
$ docker compose down
```
このコマンドを忘れずにしましょう。

## おわりに
長めな内容となってしまいましたが、いかがだったでしょうか。
私自身Dockerを触ったのが、入社してからだったので良いアウトプットの経験となりました。
わかりにくい部分、うまくできない部分などありましたらコメントお願いします。