【Nuxt】Dockerでnpm run devが表示されない場合の解決法

• 作成日: 2021-12-14
• 更新日: 2023-12-24
• カテゴリ: Docker

Dockerでnpm run dev (Nuxt)が表示されない

Docker環境のNuxtで、npm run devコマンドを実行したところ、ブラウザにNuxtのページが表示されないという問題に遭遇しました。
この記事ではこの問題の解決方法を記述します。

結論から言うと↓の2点になります。

• ホスト名を0.0.0.0にしよう
• ポートを適切に設定しよう

Dockerのコンテナの設定

最初に走らせているDockerのコンテナの設定についてです。
対象のコンテナは↓のようなコマンドで走らせています。

$ docker run -it -p 7777:80 my-project-image /bin/bash  

注目して頂きたいのは-p 7777:80のオプション指定です。
このオプションの意味は「ホストのポート7777にコンテナ内のポート80を繋ぐ」という意味です。
つまり、コンテナ内でサーバーを80ポートで起動した場合、Dockerを実行したホスト側のブラウザでポート80にアクセスするとサーバーの出力結果が表示されるということになります。

このようにコンテナのポートがホストのどのポートに繋がっているか最初に確認してください。

npm run devを改造する

Nuxtの環境では↓のコマンドでプロジェクトの内容が開発サーバーで配信されます。

$ npm run dev  

しかし、このコマンドのデフォルトの設定では、Docker環境でコンテンツを配信することができません。
正確に言うと配信はできるんですが、ホスト側に表示されないという状態になります。

この問題を解決するにはpackage.json内のdevコマンドを改造します。

{  
  ...  
  "scripts": {  
    "dev": "nuxt",  
    ...  
  },  
  ...  
}  

↑のようにデフォルトのdevコマンドはnuxtを実行する設定になっています。
つまりnpm run devを実行するとnuxtが実行されるということになります。
このコマンドを↓のように改造します。

{  
  ...  
  "scripts": {  
    "dev": "nuxt -h",  
    ...  
  },  
  ...  
}  

nuxt -hはnuxtコマンドの使い方を表示する-hオプションを加えたものです。
これで最初にnuxtのオプションの一覧を確認します。
コマンドの改造後にnpm run devを実行すると↓のNuxtの使い方が表示されます。
オプションの一覧が表示されますので↓のオプションに注目してください。

    --port, -p         Port number on which to start the application  
    --hostname, -H     Hostname on which to start the application  

--portと-pオプションはポートを設定するオプションです。
--hostnameと-Hオプションはホスト名を設定します。
これらのオプションを使って、devコマンドを↓のように改造します。

{  
  ...  
  "scripts": {  
    "dev": "nuxt -H 0.0.0.0 -p 80",  
    ...  
  },  
  ...  
}  

↑のようにnuxt -H 0.0.0.0 -p 80とやって、ホスト名を「0.0.0.0」に、ポート番号を「80」に設定します。
このポート番号は、Dockerコンテナを走らせた時のコンテナ側のポート番号です。
ポート80はホスト側のポート7777に繋がっている状態です。

以上のようにdevコマンドを改造したらnpm run devを実行します。
するとコンテナのホストとポートにNuxtのプロジェクトが配信されます。
あとはホスト側のブラウザでhttp://localhost:7777にアクセスすればNuxtのページが表示されます。

おわりに

以上の設定でNuxtをブラウザで確認することができます。
あなたのNuxtライフに幸があることを。

🦝 < ネクストはNuxt

🐭 < 親父ギャグ