[英]Expose yarn dev app running on localhost:3000 within docker container
I have a website project that I have inherited which is built with Nuxt, Vue.js and Vuetify.我有一个我继承的网站项目,它是用 Nuxt、Vue.js 和 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.当运行
yarn install
来安装网站的各种依赖项时,我在解决相互冲突的依赖项方面遇到了很多困难,最终我决定创建一个预加载所有依赖项的 docker 图像会更容易。
It worked great, I can now run the docker image and successfully run yarn install
, yarn dev
, and yarn generate
without any errors.效果很好,我现在可以运行 docker 图像并成功运行
yarn install
、 yarn dev
和yarn generate
,没有任何错误。 The Dockerfile I created the image with is shown below:我创建图像的 Dockerfile 如下所示:
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.我的问题是,在将
yarn generate
的结果推送到生产环境之前,我仍然需要检查yarn dev
在 localhost:3000 创建的网站的本地版本,以确保没有问题。 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.但是,我无法在 docker 容器中正确公开正确的端口,以便能够在我的浏览器上查看结果。
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
我知道 output 的
yarn dev
运行成功,因为我在运行docker exec [container_id] curl localhost:3000
时得到正确的 output
I've checked How to expose app running on localhost inside docker?我已经检查了如何公开在 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.
DazWilkin 的最后一条评论表明不可能从 docker 容器公开本地主机,但我想确认这一点。 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.如果有任何方法可以从 docker 容器中查看
yarn dev
命令的 output,那将是我的最佳解决方案。
EDIT: Here is the package.json编辑:这是 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 dev
命令的 output
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
If you want to access your app running inside Docker container on, let's say, PORT 3001, then you will need to do something calledContainer Port Mapping .如果你想访问运行在 Docker 容器内的应用程序,比方说,端口 3001,那么你需要做一些叫做Container Port Mapping的事情。
Simply add -p 3001:3000
in a docker run
command.只需在
docker run
命令中添加-p 3001:3000
。 Check thedocs 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.
这意味着到达计算机端口 3001 的所有流量都将通过 docker 路由到运行应用程序的端口 3000。
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
.根据@Marc 的上述评论,我能够在 package.json 中创建一个新的 yarn 命令,其中使用标志
--hostname 0
调用 nuxt。 I kept the EXPOSE 3000
command in the docker image, and when I run a docker container, I also use -p 3000:3000
.我在 docker 图像中保留了
EXPOSE 3000
命令,当我运行 docker 容器时,我也使用-p 3000:3000
。
With this change, I can now access the local version of the website outside of the docker container on my browser.通过此更改,我现在可以在浏览器的 docker 容器之外访问网站的本地版本。
The update package.json file is now as follows:更新package.json文件现在如下:
{
"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"
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.