SCRAWLED TECH BLOG

当サイトは、アフィリエイト広告を利用しています

【Docker × React】VSCodeでReactのコンテナ開発を行う

作成日：2024月02月10日
更新日：2024年06月23日

Reactの開発環境をDockerを使って構築し
VSCodeからコンテナ開発を行う方法をまとめる

VSCodeとDockerを使ったReactの開発環境構築時の
Dockerコンテナの作成は

  • docker-composeを使ってコンテナ作成
  • VSCodeの拡張機能Dev Containersを使ってコンテナ作成

の2パターンで行うことができる。

また開発環境内のReactのプロジェクトを
dockerのどこで永続化するかについても

  • バインドマウント
  • 名前付きボリュームを使う

の2パターンがある

今回は、上記の方法のうち

  • コンテナ作成はdocker-compose
  • 永続化は名前付きボリュームを使う

で行っていく。

なぜコンテナでReact開発環境を作るのか？

コンテナで作った場合、ホストOSから分離されているため
ローカルマシンの設定に影響されずに開発することができる

またコンテナ化しておくことによって環境を統一できるので
コンテナを使えば、他の開発者が開発する時に同じ環境で開発ができるため。

開発したいときはコンテナ作って、いらなくなったらコンテナを
破棄すればいいだけなので、個人的にはローカル環境が汚れないのがありがたい。

なぜコンテナ作成はdocker-composeなのか？

VSCodeの拡張機能DevContainersからコンテナ作成するよりも
docker-composeコマンドで作った方が早いから。
後、慣れているのもあります。

つまり、docker-composeコマンドで作ったコンテナに
VScodeからアタッチする形になります。

正直、これはコンテナを作る方法をVScodeで作るか
dockerコマンド作るかだけの話なのでやりやすい方でいいです。

VSCodeの拡張機能DevContainersからコンテナ作成する
やり方については下記記事でまとめています。

なぜ永続化は名前付きボリュームを使うのか？

ホストのファイルとコンテナのファイルを同期する
バインドマウントで永続化すると、すごく遅くなるため。

コンテナの名前付きボリュームでプロジェクトを永続化できれば
問題ない考えました。
名前付きボリュームにあるプロジェクトはgitにあげるため
特にデータ消える心配もない。
※リモートリポジトリにプッシュする前にボリュームを
削除したらさすがに消えますが。。

名前付きボリュームを含めたdockerのボリュームついては
下記記事でまとめています。

環境

下記の環境で行う

  • Windows10
  • Docker version 24.0.2(Docker for Windows)
  • VScode
  • Remote Development(VScodeの拡張機能)
  • React 18.2.0
  • typescript 4.9.5

インストール方法については下記記事で 紹介しています

「docker-composeでコンテナ構築 + プロジェクトを名前付きボリュームで保存」で開発環境構築する

コンテナ構築をdocker-composeを使って構築し
プロジェクトを含むworkspaceを名前付きボリュームで永続化させる

名前付きボリュームでプロジェクトを永続化させる場合は

  • コンテナを作る && Reactプロジェクトを作る

の一つの手順でできる

ホスト側にプロジェクトはなく
コンテナ内だけにある状態になる。

注意としては、コンテナを削除してもDockerのボリュームがある限り
プロジェクトは消えないが、ボリュームを削除すると消える。

全体構造のイメージとしては下記のようになる 2024-02-10-18-25-38

構成

まずはreact環境コンテナを作成するため
下記のような構成にする

環境構築構成
.
|-- .env
|-- Dockerfile
|-- docker-compose.yml  
`-- vscode_ex_install.sh

React開発環境コンテナの設定

React開発環境コンテナの
設定をする

.env

環境変数を保持させるためのファイル
プロジェクト名を保持させる
※プロジェクト名は任意

.env
# .envファイル
PROJECT_NAME=sample-react-project

Dockerfile

React開発環境コンテナのimageを作るためのDockerfileを作成する

Dockerfile
# イメージ
FROM node:21-alpine


# パッケージ最新化とインストール
RUN apk update && apk add git curl


# docker-composeからの引数を受け取る
ARG PROJECT_NAME


# コンテナにフォルダ作成
RUN mkdir -p /workspace/docker


# workspaceディレクトリに移動
WORKDIR /workspace


# reactプロジェクト生成
RUN npx create-react-app@latest ${PROJECT_NAME} --template typescript


# reactプロジェクトに移動
WORKDIR /workspace/${PROJECT_NAME}


# reactプロジェクト内にdocker関連ファイルをコピー
RUN mkdir -p /workspace/${PROJECT_NAME}/docker
COPY ./ /workspace/${PROJECT_NAME}/docker


# git初期化
RUN git init
  • nodeのバージョン21のイメージを使用
  • ARGでdocker-composeから引数（プロジェクト名）を変数に設定する
  • create-react-appを実行する※今回はtypescriptにする

Reactプロジェクト内にdocker関連ファイルをコピーしているのは
docker関連ファイルをgithub等のリモートリポジトリに
退避させるため。

最後に「git　init」を実行して、Reactプロジェクトをgit管理する。

docker-compose.yml

コンテナはdocker-composeを使って作成する

docker-compose.yml
version: "3"
services:
  react:
    container_name: "react"
    # Dockerfileをビルド
    build:
      context: .
      dockerfile: Dockerfile
      # docekrfileに引数を渡す
      args:
        PROJECT_NAME: ${PROJECT_NAME}
    ports:
      - 3000:3000
    volumes:
      # 名前付きボリューム
      - react-volume:/workspace


    # 環境変数読み込み
    env_file:
      - .env
    tty: true


# 名前付きボリューム
volumes:
  react-volume:
  • env_fileで.envの環境変数を読み込む
  • argsで.envの環境変数をdockerfileに渡す
  • volumeでReactプロジェクトを含むworkspaceを名前付きボリュームで永続化する

vscode_ex_install.sh

コンテナにVScode拡張機能を一括インストールするための
スクリプトを作成する

vscode_ex_install.sh
#!/bin/bash


# 拡張機能のIDリスト
extensions=(
    "zhang-renyang.vscode-react"
    "mhutchie.git-graph"
)


# 各拡張機能をインストール
for extension in "${extensions[@]}"; do
    code --install-extension $extension
done

コンテナをdocker composeで作成した場合
VScodeから開いても、VScode拡張機能はインストールされないので
必要な拡張機能を一括でインストールできるスクリプトを作成しておく
詳しくは下記記事参照

またVScode拡張機能のDevContainersからコンテナを作る場合は
devcontainer.jsonにインストールしたい拡張機能を記載することで、コンテナ作成時に
自動でインストールさせることもできる
こちらに関しては下記で紹介してます。

どちらを使うかは好みで。。

React開発環境コンテナ作成

docker-compose.ymlがあるディレクトリに移動して
React開発環境コンテナ作成する

コンテナ作成
$ docker compose up -d

コンテナと名前付きボリュームが
作成できているか確認する

確認
$ docker ps
CONTAINER ID   IMAGE                      COMMAND                   CREATED         STATUS         PORTS                    NAMES
120f9dbc9966   react_container_dev-react   "docker-entrypoint.s…"   6 minutes ago   Up 5 minutes   0.0.0.0:3000->3000/tcp   react


$ docker volume ls
DRIVER    VOLUME NAME 
local     react-volume

VSCodeから作成したコンテナにアタッチする

コンテナ作成ができたので
VScodeからコンテナにアタッチする 2024-02-10-17-50-45

コンテナのウィンドウが開く
フォルダが開かれていないので作成したReactプロジェクトの
フォルダを開く 2024-02-10-17-54-08

コンテナ内にReactプロジェクトが作成されている
2024-02-10-17-57-13

Reactプロジェクトをリモートリポジトリにpushしておく

コンテナ構築後、Reactプロジェクトをgithubやgitlabのリモートリポジトリに
pushしておく。

そうしておけば、もし誤ってコンテナだけでなく、
名前付きボリュームを削除してしまったとしても
コンテナのworkspace配下にリモートリポジトリからReactプロジェクトをcloneすれば
復元できる。

Reactプロジェクトを起動する

コンテナにReactプロジェクトを作成できたので
動作確認する

VScodeのターミナルで「yarn start」を
実行する

start
$ yarn start


Compiled successfully!


You can now view sample-react-project in the browser.


  Local:            http://localhost:3000
  On Your Network:  http://172.18.0.2:3000


Note that the development build is not optimized.
To create a production build, use npm run build.


webpack compiled successfully
No issues found.

となるので、ホストのブラウザから 「http://localhost:3000」
にアクセスするとReactの画面がみれる
2024-02-10-18-02-54 ちゃんとホットリロードもされる。

ターミナルクリックではアクセスできない

上記の

access
You can now view sample-react-project in the browser.


  Local:            http://localhost:3000
  On Your Network:  http://172.18.0.2:3000


Note that the development build is not optimized.

の部分でVScodeのターミナル上でリンククリックで
アクセスしようとしても開けないので注意。
2024-02-10-18-05-17

これだと「http://0.0.0.0:3000/ 」にアクセスしてしまうことに
なるので開けない。

docker-compose.ymlのportでホストのlocalhost:3000とコンテナの3000の
ポートを紐づけているのでホストのブラウザからは
「http://localhost:3000」でアクセスしないと開けない。

コンテナを削除しても大丈夫なのか？

コンテナを削除しても、一緒にボリュームは削除されない。
そのため名前付きボリュームにプロジェクトが残っているので
問題ない。

削除後、コンテナを再作成した場合、初期化はされないのか？

docker-compose.ymlで指定している名前付きボリューム（react-volume）内に
データが存在する場合は、コンテナは名前付きボリュームの値で
上書きされるので、初期化はされない。

詳しくは下記記事でまとめています。

まとめ

Reactの開発環境をDockerコンテナで構築してみた。
コンテナ構築するのはローカル環境を汚さないし、
終わったら削除できるので便利だ。

以前にNext.jsのコンテナ環境を作ったでの
その知識を応用して今回はReactプロジェクトを作ってみた感じ. なので、基本的な流れは同じになる。

Next.jsのコンテナ開発環境構築については下記です。

また当環境でデバッグをするときの設定に関しては下記記事でまとめています

参考

書籍

Dockerについては下記書籍がかなり参考になりました

仕組みと使い方がわかるDocker＆Kubernetesのきほんのきほん [ 小笠原種高 ]

新着記事

目次
タグ別一覧
top