[Docker+Next.js]Dockerfileの”WORKDIR”が原因でコンテナが起動しつづけなかった

プログラミング
スポンサーリンク

現在学習のためにDocker上にNext.jsとLaravelでWebアプリの個人開発を進めています。

Next.jsとLaravelは少し触ったことがある程度で、Dockerについてはまったくの初心者という状態からスタートしています。

今回はフロントエンドとして作成したNext.jsのコンテナが起動しない問題で少しハマったため、共有します。

スポンサーリンク

フロントエンドのコンテナが起動し続けない

docker-compose.ymlとDockerfile作成後にビルドし、コンテナを起動させてみました。

WebサーバーやバックエンドのLaravelのコンテナは起動するのですが、フロントエンドのコンテナのみがExitedとなり起動し続けませんでした。

ファイル構成

- front #フロントエンドのアプリケーション
 | - frontapp
 | - Dockerfile
- server 
 | - app
   | - Dockerfile
 | - db
   | - Dockerfile
 | - web
   | - Dockerfile
- src #バックエンドのアプリケーションのソースファイル
- docker-compose-yml

/front下でのDockerfileは以下のようにしてました。

FROM node:lts-buster-slim
WORKDIR /app

CMD [ "yarn", "build" ]

WORKDIRのパスが問題だった

Docker Desktopのコンテナ詳細を確認してみると、

error Couldn't find a package.json file in "/app"

とのことで、作業ディレクトリ内にpackage.jsonファイルが無いことでエラーが起きていました。

そもそもWORKDIRでは作業ディレクトリのパスを設定します。

Dockerfile リファレンス — Docker-docs-ja 24.0 ドキュメント

今回の場合は、WORKDIRで/appと指定しているが、/app/my-app(Next.jsのプロジェクト名)としてNext.jsのアプリを展開していることが問題でした。

DockerfileのWORKDIRの項目を/app/my-appに直してlocalhost:3000に接続すると、Next.jsのデフォルト画面が表示されました。

WORKDIRはコンテナごとのもの(当然)

当初の勘違いとして、バックエンド(Laravel)のWORKDIRのパスも/appだったので、フロントと被って大丈夫なのか?などと的外れなことを考えていました。

シェルに入ってみて改めて理解しましたが、起動しているコンテナがそもそも違うので特に気にすることではありませんでした。

ただ、今回のエラーのように対応するディレクトリを指定するので意識する必要はあります。

まとめ

Dockerfileで指定している作業ディレクトリと、アプリを展開するディレクトリが異なることが今回の問題の原因でした。

そもそもDockerのエラーがどこに表示されるのか、というところから理解する必要があったため、解決に時間がかかってしまいました。