スポンサーリンク

Docker×docker-composeでReact/Next(TypeScript)開発環境を最速で構築する方法

Docker
スポンサーリンク

本記事の対象

  • React.js環境をDockerで構築したい方
  • Next.js環境をDockerで構築したい方

※本記事はNext.js環境構築の記事になります!Nuxt.jsの環境構築が知りたい方は下記をご覧ください。

ローカルで用意する環境

  • Docker 20.10
  • docker-compose 1.27.4
  • git 2.25

Macの方

ダウンロードした後下記コマンドでバージョンが確認できればOKです。

$ docker -v
Docker version 20.10.1, build 831ebea
$ docker-compose -v
docker-compose version 1.27.4, build 40524192

※gitについてはMacは最初から入っていると思いますが最新版にしたい場合は各自でお願いいたします。

Windowsの方

MacよりDocker環境の構築がややこしいので記事にまとめております。
下記を御覧ください。下記記事はWSL2上にDocker環境を構築する記事になっています。

Docker Desktop Windowsを使用されている方はそちらでも可能です。

docker-composeで構築する環境

  • Node.js: 14.15.4(現在のLTSバージョン)

Dockerfileリポジトリをクローン

Next.js環境構築用のDockerfileなどをgithubにあげていますのでそれをまずはCloneします。
下記がgithubのリポジトリです。

ターミナルを起動し、下記コマンドを実行します。

$ git clone https://github.com/E-handson/docker-next.git

cloneに成功したら「docker-next」ディレクトリが作成されます。
作成されたディレクトリに移動しましょう。下記コマンドを実行します。

$ cd docker-next

docker-next配下にはdocker-compose.ymlがあると思います。
docker-composeコマンドはdocker-compose.ymlがあるディレクトリ直下で実行できます。

Dockerサービスの立ち上げ

まずはDockerサービスを構築するために下記コマンドを実行します。

$ docker-compose build

Nextアプリケーションを作成

下記コマンドを実行します。「–typescript」はオプションです。指定せずにコマンド実行することも可能です。

$ docker-compose run --rm next yarn create next-app . --typescript

上記コマンドを実行するとsrcディレクトリが作成されます。
開発の際はsrc直下にnextのファイル群が設置されますのでそちらを修正してください。

Dockerサービスの起動

次にDockerサービスを起動するために下記コマンドを実行します。
$ docker-compose up

docker-compose.ymlで「command: yarn dev」と設定しているのでdocker-compose upをすればブラウザで確認できます。
下記リンクをクリックしてウェルカムページが表示されればOKです。
http://localhost:9001/

以上でNextの環境構築完了です。

Reactアプリケーションを作成する場合

下記コマンドを実行します。「–typescript」はオプションです。指定せずにコマンド実行することも可能です。

$ docker-compose run --rm next npx create-react-app . --template typescript

上記コマンドを実行するとこちらも同様にsrcディレクトリが作成されます。
開発の際はsrc直下にReactのファイル群が設置されますのでそちらを修正してください。

docker-compose.ymlの修正

10行目に「command: yarn dev」と記述していますので「command: yarn start」 に修正してください。

Dockerサービスの起動

Nextの際と同様に下記コマンドを実行します
$ docker-compose up

下記リンクをクリックしてウェルカムページが表示されればOKです。
http://localhost:9001/

以上でReact環境構築完了です。

Docker構成の説明

ここからはDocker構成の説明になります。興味のある方だけ御覧いただければと思います

リポジトリ構成

まずは今回使用したリポジトリ構成を紹介します。
docker-next
├── docker-compose.yml
├── docker
│    └── next
│         └── Dockerfile
└── src(next.jsのソースコード)

./srcディレクトリはgit cloneした段階では存在していません。
Next.jsもしくはReact.jsをインストールした後に作成されます。

コンテナの構成

今回は下記コンテナのみ作成しています。

  1. nextコンテナ – Node.js: 14.15.4をインストールしているコンテナ
nextコンテナ
実際にNext.jsをインストールしているコンテナです。
nextコンテナの/workspace配下にインストールしたNext.jsのソースはローカルの./src配下にマウントされています。マウントとは同期しているという解釈でほぼほぼ問題ありません。

そのため./src配下のファイルを編集すると実際にNextを動かしている/workspace配下のソースにも反映されるということになります。
編集する場合は./src配下を修正してももちろん良いですがおすすめはVS codeを使用してコンテナ側の/workspace配下を修正する方法です。
詳細は下記ブログに記載していますので興味がある方は御覧ください。

おまけ

下記記事にNextと同じくらい人気のNuxt.jsの環境構築方法を紹介している記事がありますので興味のある方はあわせてどうぞ!

コメント