本記事の対象
- 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-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サービスの起動
$ 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をインストールした後に作成されます。
コンテナの構成
今回は下記コンテナのみ作成しています。
- nextコンテナ – Node.js: 14.15.4をインストールしているコンテナ
nextコンテナ
そのため./src配下のファイルを編集すると実際にNextを動かしている/workspace配下のソースにも反映されるということになります。
編集する場合は./src配下を修正してももちろん良いですがおすすめはVS codeを使用してコンテナ側の/workspace配下を修正する方法です。
詳細は下記ブログに記載していますので興味がある方は御覧ください。
おまけ
下記記事にNextと同じくらい人気のNuxt.jsの環境構築方法を紹介している記事がありますので興味のある方はあわせてどうぞ！
コメント