Expose yarn dev app running on localhost:3000 within docker container-CodePudding

I have a website project that I have inherited which is built with Nuxt, Vue.js and Vuetify.

When running yarn install to install the various dependencies of the website, I was having so much difficulty with conflicting dependencies that in the end I decided it would be easier to create a docker image with all the dependencies pre-loaded.

It worked great, I can now run the docker image and successfully run yarn install, yarn dev, and yarn generate without any errors. The Dockerfile I created the image with is shown below:

FROM ubuntu:22.04

RUN apt update && apt install nodejs npm -y

RUN npm install --global yarn webpack

EXPOSE 3000

My problem is that I still need to check the local version of the website created by yarn dev at localhost:3000 to make sure there are no issues before I push the results of yarn generate to production. However, I haven't been able to correctly expose the right port in the docker container to be able to view the results on my browser.

I know the output of yarn dev is running successfully as I get a correct output when running docker exec [container_id] curl localhost:3000

I've checked How to expose app running on localhost inside docker? and the last comment by DazWilkin suggests it isn't possible to expose localhost from a docker container, but I wanted to confirm this. If there's any way to see the output of the yarn dev command from within a docker container that would be the best solution for me.

EDIT: Here is the 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"
  }
}

and here is the output of the yarn dev command

yarn run v1.22.19
$ nuxt

 WARN  [email protected] is installed but ^4.46.0 is expected                                                                                                                 10:05:57


 WARN  [email protected] 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

CodePudding user response：

If you want to access your app running inside Docker container on, let's say, PORT 3001, then you will need to do something called Container Port Mapping.

Simply add -p 3001:3000 in a docker run command. Check the docs for example. This means all the traffic that reaches to your computer's port 3001 will be routed by docker, to port 3000, where your app is running.

CodePudding user response：

Following the comments above from @Marc, I was able to create a new yarn command in package.json where nuxt is called with the flag --hostname 0. I kept the EXPOSE 3000 command in the docker image, and when I run a docker container, I also use -p 3000:3000.

With this change, I can now access the local version of the website outside of the docker container on my browser.

The update package.json file is now as follows:

{
  "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"
  }
}