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
2
Answers
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 theEXPOSE 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:
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 adocker 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.