概要
Windows 環境上(WSL2)で Docker を使って、Next.js を環境を作ります。
試しに Next.js を動かしてみたい場合、動かしながら Next.js の勉強をしたい場合などに便利ですね。
環境
- Windows10
- WSL2(Ubuntu 20.04)
- Docker 20.10.12
- docker-compose 2.2.3
Windows 環境で WSL2 を未セットアップの方は、よろしければ以下を参照してください。
WSL2+Docker 環境構築手順
構成
WSL2 上のディレクトリパスは以下とします。
/home/[ユーザ名]/next-sample
next-sample フォルダ配下の構成（最終的に作成する構成）は以下の通りとします。
.
├ src ：Nextプロジェクトソース用フォルダ
├ Dockerfile
└ docker-compose.yml
手順
プロジェクトフォルダの作成
まず最初に、今回のプロジェクトを格納するためのフォルダを作成しておきます。
cd ~
mkdir next-sample
※自身のホームディレクトリ（/home/[ユーザ名]配下）にプロジェクトフォルダを作成します。
コード格納用フォルダの作成
続いて、コード格納用のフォルダを作成しておきます。
cd next-sample
mkdir src
Dockerfile の作成
プロジェクトフォルダの直下に、Dockerfile を作成します。
vi Dockerfile
FROM node:17-alpine
WORKDIR /usr/app
使用する Docker の node のバージョンは以下で確認します。（今回は 17 を指定）
ちなみに、node:17 の後ろの alpine というのは、OS の種類で、alpine はコンテナで使用することを想定した軽量イメージです。
軽量化しているために OS のつくりがだいぶ違い、制約がいろいろあるようですが、とりあえず Next.js を動かしたいだけなので問題ないでしょう。
以下参考にさせて頂きました。
docker-compose.yml の作成
プロジェクトフォルダの直下に、docker-compose.yml ファイルを作成します。
vi docker-compose.yml
version: '3'
services:
app:
build: ./
volumes:
- ./src:/usr/app
command: sh -c "yarn dev"
ports:
- "3000:3000"
React アプリを構築する
プロジェクトフォルダ直下で以下のコマンドを実行して、create next-app を実行します。
docker-compose run --rm app yarn create next-app .
もし、TypeScript を合わせて導入する場合--tsオプションを付けます。
docker-compose run --rm app yarn create next-app . --ts
Docker コンテナを起動する
プロジェクトフォルダ直下で以下のコマンドを実行します。
docker-compose up -d
ブラウザで動作を確認する。
ブラウザで以下の URL にアクセスします。
http://localhost:3000/
以下のような画面が表示されたら OK です。
あとは、
~/src
配下で Next.js コードを作成して動かしてみましょう。
本番用にビルドする
docker run -v $(pwd)/src:/usr/app --rm next-sample_app yarn build
本番用ビルドで動作確認する
docker run --name='prodtest' -d -v $(pwd)/src:/usr/app -p 3000:3000 next-sample_app yarn start
動作確認を終了する
docker stop prodtest
注意事項 1
WSL2 で Docker を動作させた状態で、Docker コンテナ側からファイルを作成すると、ファイルの所有者がrootになります。
一方で、WSL 上の操作ユーザはデフォルトで root 以外のユーザとなっており、また、VSCode などでファイルを開いた場合も root 以外のユーザとなるため、ファイル更新しようとするとPermission deniedエラーが発生します。
対応としては、VSCode のエクステンションを用いて、WSL2→VSCode 用コンテナ → 対象のフォルダという形で接続して作業を行う必要があります。
以下を参考としていただければと思います。
注意事項 2
WSL2 を起動させたまま長時間使用していると、メモリがひっ迫していくる場合があります。その場合は PC を再起動することをお勧めします。
トッカシステムズは、受託開発や自社製品・サービス開発を行うエンジニアリング企業です。Webサービスやアプリ、電子マネー、認証機能などの開発や、CMSによるWebサイト構築などを行っています。 Java,PHP,React,Nextでの開発や、AWSを用いた基盤構築・運用等を行っています。
Discussion