带有 Docker 和 Docker-compose 的 Nuxt 应用程序不会被托管答案

【问题标题】：Nuxt app with Docker & Docker-compose dosen't get hosted带有 Docker 和 Docker-compose 的 Nuxt 应用程序不会被托管
【发布时间】：2022-10-16 14:22:12
【问题描述】：

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

Dockerfile：

# 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;"]

码头工人-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: {},
};

码头工人日志：

【问题讨论】：

容器的日志说什么？
@HansKilian 我更新了最初的帖子。

标签： docker docker-compose nuxt.js

【解决方案1】：

日志说它正在监听http://localhost:8000/，这意味着它只接受来自本地主机的连接。在容器上下文中，localhost 是容器本身。你需要让它监听来自任何地方的连接。您可以像这样将服务器配置的“主机”部分设置为“0.0.0.0”

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

【讨论】：

不幸的是，没有为我工作。浏览器说该页面无法访问。
日志是否更改为Listening on: http://0.0.0.0:8000/？
它说Listening on: http://172.18.0.2:8000/
它奏效了，我的错。但前提是我去lhttp://localhost:8000，而不是http://172.18.0.2:8000/。谢谢！

【解决方案2】：

您需要添加环境变量NUXT_HOST，并将其设置为0.0.0.0。

所以

environment:
  GFC_BACKEND_API: "http://localhost:3000"

变成

environment:
  - GFC_BACKEND_API="http://localhost:3000"
  - NUXT_HOST="0.0.0.0"

这会告诉 nuxt（和其他基于节点的应用程序）您托管的位置。这是基于节点的应用程序所需要的，但我不记得原因。

【讨论】：