🐙

Vite + React環境をDockerで構築する

2022/10/04に公開

Docker

React

Vite

tech

はじめに

この記事はvite + react環境を構築するための手順を残したものです
完成版のDockerfileやdocker-compose.ymlに至るまでが地味にめんどくさいので一から作る際の参考になれば幸いです
DockerおよびDockerComposeが動く環境があることが前提です

Dockefileの作成〜docker-compose.ymlの作成

任意のディレクトリにDockerfile及びdocker-comopse.ymlを作成します。

Dockerfile

ARG NODE_VER
FROM node:${NODE_VER}

USER node
WORKDIR /home/node/app

docker-compose.yml

version: '3.7'
services:
  react:
    build:
      args:
        - NODE_VER=16.17.1-slim
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - ./:/home/node/app

nodeのバージョンはLTSの16.17.1を指定しています。
docker-composeよりビルド時の引数としてnodeのバージョンを渡しています。
これによってLTSが変更された場合もdocker-compose.ymlを修正するだけで対応が可能です。
作業用のディレクトリとして/home/node/appを作成し、ホスト側のファイルをマウントしています。

各ファイルの作成完了後、docker-composeのbuildを実施します。

docker-comopse build

ちなみに、私はdocker-composeと長く打ち込みたくないので、.bashrcにaliasを設定しています。
また、Buildkitを有効にしてビルドの高速化などを行いたいため、環境変数を設定しています。

.bashrc

alias dc='docker-compose'
export DOCKER_BUILDKIT=1

この設定を行うことでdc buildのコマンドですむようになります。

コンテナ起動〜viteプロジェクト作成

ビルドまで完了したら、コンテナを起動しコマンドを実行します。

docker-compose run --rm react yarn create vite

実行するとプロジェクト名とフレームワークなどを聞かれるため、それぞれ任意のものを選択します。
私は以下を入力および選択しました。

✔ Project name: … frontend
✔ Select a framework: › React
✔ Select a variant: › TypeScript

処理が終わるとプロジェクト名に指定したディレクトリが作成されています。
コンテナ内で見ると以下のような構成になります。

app
├─ frontend
│ └── publicなど
├─ docker-compose.yml
└─ Dockerfile

私はいずれバックエンドもここで管理する予定なのでこの構成で問題ないのですが、もしプロジェクト名のディレクトリでDockerfileなども管理したいという方はファイルの移動などを実施してください。

コンテナ内でviteを起動する場合はhostを指定する必要があるため、package.jsonを変更します。

frontend/package.json

  "scripts": {
    "dev": "vite --host", //--hostを追記
    "build": "tsc && vite build",
    "preview": "vite preview"
  },

コンテナ起動

コンテナを起動する前にyarn installを実施する必要があります。
ただ、このまま実施するとホストにnode_modulesが作成されます。
このあたりは好みもあるとは思いますが、ホスト側にnode_modulesのファイル群がずらりと並ぶのが好きではないので、DataVolumeを利用します。

docker-compose.ymlを以下の通り修正します。

docker-compose.yml

version: '3.9'
services:
  react:
    build:
      args:
        - NODE_VER=16.17.1-slim
      context: .
      dockerfile: Dockerfile
    tty: true
    volumes:
      - ./frontend:/home/node/app
      - node_modules:/home/node/app/node_modules
    ports:
      - 5173:5173

volumes:
  node_modules:

volumesにnode_modulesを追加しました。
また、マウントするvolumeをfrontendに変更しました。
ついでにvite起動時に5173ポートが利用されるため、ポートの指定も追加しました。
ホストもコンテナも同じポート番号を利用します。

次にこのまま起動するとfrontend/node_modulesがroot権限で作成されてしまうので、私はnode_modulesを事前に作成します。
このままGitでも管理します。このあたりは賛否あると思うので、好きなやり方で管理したら良いと思います。

mkdir ./frontend/node_modules
touch ./frontend/node_modules/.keep

frontend/.gitignore

!node_modules/.keep # node_modulesを左記に変更

次にDockerfileを修正します。

Dockerfile

ARG NODE_VER
FROM node:${NODE_VER}

USER node
WORKDIR /home/node/app
RUN mkdir node_modules

CMD ["/bin/bash", "-c", "yarn install && yarn dev"]

node_modulesのディレクトリ作成とCMDを追加しました。
node_modulesのディレクトリを作成しないと、コンテナ内でroot権限のnode_modulesが作成されます。
ENTRYPOINTを利用するのが正しいとは思いますが、開発環境でデバッグする際にyarn installとyarn devを動かさずにコンテナ内でごにょごにょしたいときなど、CMDを上書きするだけでコンテナ内に入れるのでこの方式にしています。

ここまで終わったら、ビルドとアップを行います。

docker-compose build
docker-compose up

yarn installとyarn devまで終了したら、http://localhost:5173へアクセスするとviteのデフォルトページが表示されます。

最後に

node.jsの環境を作成して、その後viteのインストールなどを実施するため、適宜Dockerfileやdocker-compose.ymlを修正する必要がありました。
Dockerを利用する際にこのあたりのディレクトリ構成などで悩むことが多々あります。
また、今回はnode.jsのイメージを利用したため、UIDやGIDがホスト側のユーザーと一致する(WSLなどは)ので、権限周りはそこまで大変ではありませんが、その他のイメージで権限がrootになるものは更に考慮が必要となります。
権限周りはバックエンドの環境を用意する際に説明したいと思います。
どなたかのお役に立てば幸いです。

はじめに

Dockefileの作成〜docker-compose.ymlの作成

コンテナ起動〜viteプロジェクト作成

コンテナ起動

最後に

Discussion