在 docker 容器中暴露在 localhost:3000 上運行的 yarn dev 應用程序

Question

我有一個我繼承的網站項目，它是用 Nuxt、Vue.js 和 Vuetify 構建的。

當運行yarn install來安裝網站的各種依賴項時，我在解決相互沖突的依賴項方面遇到了很多困難，最終我決定創建一個預加載所有依賴項的 docker 圖像會更容易。

效果很好，我現在可以運行 docker 圖像並成功運行yarn install 、 yarn dev和yarn generate ，沒有任何錯誤。 我創建圖像的 Dockerfile 如下所示：

FROM ubuntu:22.04

RUN apt update && apt install nodejs npm -y

RUN npm install --global yarn webpack

EXPOSE 3000

我的問題是，在將yarn generate的結果推送到生產環境之前，我仍然需要檢查yarn dev在 localhost:3000 創建的網站的本地版本，以確保沒有問題。 但是，我無法在 docker 容器中正確公開正確的端口，以便能夠在我的瀏覽器上查看結果。

我知道 output 的yarn dev運行成功，因為我在運行docker exec [container_id] curl localhost:3000時得到正確的 output

我已經檢查了如何公開在 docker 內的本地主機上運行的應用程序？ DazWilkin 的最后一條評論表明不可能從 docker 容器公開本地主機，但我想確認這一點。 如果有任何方法可以從 docker 容器中查看yarn dev命令的 output，那將是我的最佳解決方案。

編輯：這是 package.json

{
  "name": "XXXXX-website",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.11.2"
  }
}

這是yarn dev命令的 output

yarn run v1.22.19
$ nuxt

 WARN  webpack@5.75.0 is installed but ^4.46.0 is expected                                                                                                                 10:05:57


 WARN  sass-loader@8.0.2 is installed but ^10.1.1 is expected                                                                                                              10:05:57


   ╭───────────────────────────────────────╮
   │                                       │
   │   Nuxt @ v2.15.8                      │
   │                                       │
   │   ▸ Environment: development          │
   │   ▸ Rendering:   client-side          │
   │   ▸ Target:      static               │
   │                                       │
   │   Listening: http://localhost:3000/   │
   │                                       │
   ╰───────────────────────────────────────╯

ℹ Preparing project for development                                                                                                                                        10:06:03
ℹ Initial build may take a while                                                                                                                                           10:06:03
ℹ Discovered Components: static-dist/components/readme.md                                                                                                                  10:06:03
✔ Builder initialized                                                                                                                                                      10:06:03
✔ Nuxt files generated                                                                                                                                                     10:06:03

✔ Client
  Compiled successfully in 4.00s

ℹ Waiting for file changes                                                                                                                                                 10:06:08
ℹ Memory usage: 991 MB (RSS: 1.12 GB)                                                                                                                                      10:06:08
ℹ Listening on: http://localhost:3000/                                                                                                                                     10:06:08

Answer 1

如果你想訪問運行在 Docker 容器內的應用程序，比方說，端口 3001，那么你需要做一些叫做Container Port Mapping的事情。

只需在docker run命令中添加-p 3001:3000 。 例如檢查文檔。 這意味着到達計算機端口 3001 的所有流量都將通過 docker 路由到運行應用程序的端口 3000。

Answer 2

根據@Marc 的上述評論，我能夠在 package.json 中創建一個新的 yarn 命令，其中使用標志--hostname 0調用 nuxt。 我在 docker 圖像中保留了EXPOSE 3000命令，當我運行 docker 容器時，我也使用-p 3000:3000 。

通過此更改，我現在可以在瀏覽器的 docker 容器之外訪問網站的本地版本。

更新package.json文件現在如下：

{
  "name": "XXXXX-website",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt",
    "devdocker": "nuxt --hostname 0",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "nuxt": "^2.14.6"
  },
  "devDependencies": {
    "@nuxtjs/vuetify": "^1.11.2"
  }
}