Question 84773 in Docker Question posted in
The official documentation can be found here.

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

I’m quite new to Docker but I need it on my Nuxt project. Docker is installed on Windows and it uses WSL 2 based engine. When I’m trying to build docker-compose up --build Docker works correctly and console, after server and client compilation, prints Listening on: http://localhost:8000/ , but I can’t see my application running on the selected host. This page is just unreachable. What could it be?

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

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 log:

enter image description here

Tags:

2

Answers


  1. 0

    The log says that it’s listening on http://localhost:8000/ which means that it’s only accepting connections from localhost. In a container context, localhost is the container itself. You need to make it listen for connections from anywhere. You do that by setting the ‘host’ part of the server config to ‘0.0.0.0’ like this

      server: {
    port: 8000,
    host: '0.0.0.0',
  },
    Login or Signup to reply.
  2. 0

    You need to add the environment variable, NUXT_HOST, and set it to 0.0.0.0.

    So

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

    becomes

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

    This tells nuxt (and other node based apps) where you’re hosting. This is needed for node based apps, but I can’t remember the reason why.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search