具有 Docker 和 Docker-compose 的 Nuxt 应用不会被托管

Question

我是 Docker 的新手，但我的 Nuxt 项目需要它。 Docker 安装在 Windows 上，它使用基于 WSL 2 的引擎。当我尝试构建 docker-compose up --build Docker 时可以正常工作并且控制台在服务器和客户端编译后打印 Listening on: http://localhost:8000/ ，但我看不到我的应用程序运行选定的主机。此页面无法访问。可能是什么？

Docker文件:

# develop stage

FROM node:16-alpine as develop-stage
WORKDIR /app
COPY package*.json ./

# To handle 'not get uid/gid'
RUN npm config set unsafe-perm true

# install Quasar cli 
# RUN npm install nuxt
COPY . .


# build stage
FROM develop-stage as build-stage
ARG GFC_BACKEND_API
WORKDIR /app
RUN yarn


# production stage
FROM nginx:1.15.7-alpine as production-stage
COPY --from=build-stage /app/dist/spa /usr/share/nginx/html
EXPOSE 8000
CMD ["nginx", "-g", "daemon off;"]

docker-compose.yml:

# for local development
version: "3.7"
services:
  nuxt:
    build:
      context: .
      target: "develop-stage"
    environment:
      GFC_BACKEND_API: "http://localhost:3000"
    ports:
      - "8000:8000"
    volumes:
      - ".:/app"
    command: /bin/sh -c "yarn run dev"

nuxt.config.js:

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "Nuxt-app",
    htmlAttrs: {
      lang: "en",
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" },
    ],
    link: [{ rel: "icon", type: "image/x-icon", href: "/favicon.ico" }],
  },

  server: {
    port: 8000,
    host: "0",
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    "@nuxtjs/eslint-module",
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: [
    // https://go.nuxtjs.dev/axios
    "@nuxtjs/axios",
  ],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    // Workaround to avoid enforcing hard-coded localhost:3000: https://github.com/nuxt-community/axios-module/issues/308
    baseURL: "/",
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {},
};

Docker 日志：

Answer 1

日志显示它正在侦听 http://localhost:8000/，这意味着它只接受来自本地主机的连接。在容器上下文中，localhost 是容器本身。您需要让它监听来自任何地方的连接。您可以通过将服务器配置的 'host' 部分设置为 '0.0.0.0' 来做到这一点

  server: {
    port: 8000,
    host: '0.0.0.0',
  },

具有 Docker 和 Docker-compose 的 Nuxt 应用不会被托管

Nuxt app with Docker & Docker-compose dosen't get hosted

docker

docker-compose

nuxt.js