Docker+Next.jsの開発環境構築②

前回の記事

設定の追加

以下の記事を参考に、Next.jsのPJに設定を追加していきます。

https://qiita.com/tksst/items/bf62d50b25af69505e8e

コンテナ上での設定の追加

ローカル環境にnodeをインストールしていないため、コンテナにログインしないとnpmコマンドが使えません。私の場合はVS Codeのリモートエクスプローラーを使ってコンテナ上で上記設定の作業をしました。(household-managerという名前で作業しています）

ローカルでの変更の反映を確認

以下のGet Stared by editing src/app/page.tsxを編集してみます。前回の記事でホスト側の編集がコンテナに反映されるようにバインドマウントの記述、ホットモジュールリロードをONにする記述をcompose.ymlにしたため、ホスト側での変更が即座に反映されます。

Fix Me!!!に変更してみました。

ブラウザをロードすると以下のように変更が反映されていることが確認できます。これでコンテナ上でNext.jsのアプリを編集できるようになりました。

コンテナ上でもコンパイルのログが出力されています。

.gitignoreに登録したファイルが消える問題

上記までを一度gitにpushし、別のホストでリポジトリからPJをcloneしたところ.envファイルなどgitに登録していないファイルが見つからないためコンテナの起動に失敗しました。

こちらは開発者間で.envファイルを手作業でやり取りするなどの対応になるかと思います。私はホストの別ディレクトリに.envファイルをコピーして保存しておき、コンテナ起動時に.envファイルを所定の場所に配置するようにしました。

アプリの実行に失敗する問題(node_modules)

.envファイルを所定の場所に配置した後に以下のコマンドを実行すると写真のようなエラーになります。node_modulesがコンテナに含まれていないことが原因です。


docker compose up frontend --build

VSCode&Docker Volumeにおけるnode_modules問題を解決する

Dockerでnodejs環境を構築するとき、node_modulesの扱いにはいくつかの嵌りポイントがあったので、それらの対抗策を考えてみました🐚

https://zenn.dev/yumemi_inc/articles/3d327557af3554

compose.ymlに下記の設定を入れます。

node_modulesディレクトリは名前付きボリュームに保存され、ホストマシンには保存されません。また、docker-compose downやdocker-compose rmを実行してコンテナを削除した場合、名前付きボリュームは削除されません。そのため、名前付きボリュームを削除するには、docker volume rmコマンドを使用する必要があります。


frontend:
    build:
      context: ./frontend/
      dockerfile: Dockerfile
    volumes:
      - frontend_modules:/app/node_modules # node_modulesディレクトリをホストには保存しない設定
      - ./frontend:/app # バインドマウントの設定
    ports:
      - 3010:3000
    environment:
      - WATCHPACK_POLLING=true
    env_file:
      - ./frontend/.env
volumes:
  frontend_modules: # frontend_modules ボリュームを定義

アプリの実行に失敗する問題(node_modules)

上記のように修正してもコンテナのビルドに失敗するようになります。.nextフォルダが見つからないとのエラーが。。。根本的な原因がわからずで、荒技ですがbuildとコンテナの起動を同時に行うようにしました。（buildに失敗してもコンテナ自体は起動してしまうので直したい。。）

最終的に以下のようなDockerfileになりました。


# ベースイメージを指定
FROM node:21-alpine

# 作業ディレクトリを設定
WORKDIR /app

# キャッシュ利用で効率化するために別でコピー
COPY package.json package-lock.json ./

# ソースコードをコピー
COPY . .

# 依存関係をインストール
RUN npm install

# # アプリケーションをビルド
# RUN npm run build

# ポート番号を指定
EXPOSE 3010

# アプリケーションをビルド&起動
CMD /bin/sh -c "npm run build && npm run start"

Gitのレポジトリ

household-manager

ryo-endo-develop • Updated Jan 4, 2024