0

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  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
JSneathThompson
  • 33
  • 1
  • 7
  • "I still need to check the local version of the website created" & "it isn't possible to expose localhost from a docker container" explain that please what that means. A docker container gets a new NIC, when you use "127.0.0.1" in your http server, of course its starts only on the loopback interface. If you want to access the http server from outside of the container, use "0.0.0.0" instead to bind the network socket on all network interface inside the container. – Marc Feb 01 '23 at 09:44
  • @Marc - I am not very familiar with yarn as I inherited this project from an outgoing software engineer, and I have never previously worked with website creation/hosting. My understanding is that `yarn dev` makes a local build of the website that I can view at localhost so that I can check if the changes I have made have had the desired effect. – JSneathThompson Feb 01 '23 at 09:57
  • @Marc- When I said it isn't possible to expose localhost from within the docker container, I was referring to this comment from DazWilkin in the stackoverflow question I linked above: "If the process inside your container is bound to localhost, localhost uses a special loopback interface that is distinct from regular networking. You will be able to access the service from within the container (host) but you won't be able to route its traffic externally." – JSneathThompson Feb 01 '23 at 09:59
  • That what you mean with "checking". Got it. Please add your package.json. I need to know what command "yarn dev" is. But you have bascily to tell the dev server (http server) to listen on all network interfaces, this can mostly be done with the argument `--host 0.0.0.0`. But in need to know the exact command to say more. – Marc Feb 01 '23 at 09:59
  • @Marc I have added the package.json code and the output of `yarn dev` to my question. – JSneathThompson Feb 01 '23 at 10:05
  • See: https://nuxtjs.org/docs/features/configuration/#edit-host-and-port Just edit your npm "dev" script and add the "--hostname" option. `nuxt --hostname 0` – Marc Feb 01 '23 at 10:26
  • @Marc I added a new script to the package.json `"devdocker": "nuxt --hostname 0",` and now when I run `yarn devdocker` I can see the result on my browser. Thanks for your help. – JSneathThompson Feb 01 '23 at 14:04

2 Answers2

0

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.

Aakash Jha
  • 42
  • 4
  • That does not work when the http server inside the docker container has its network socket only bind to the looback interface. You need to thell your app "bind on all network interfaces". In node `.listen(3001, "0.0.0.0")` does the trick. – Marc Feb 01 '23 at 09:51
  • I am using `-p 3000:3000` in my docker run command without success – JSneathThompson Feb 01 '23 at 09:52
0

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"
  }
}
JSneathThompson
  • 33
  • 1
  • 7