无法在主机上访问Dockerized Vue的localhost:8080(尽管使用EXPOSE-ing端口) [英] Can't access Dockerized Vue's localhost:8080 on host machine (despite EXPOSE-ing port)
问题描述
在对应用程序进行Docker化之后,我无法再在 localhost:8080
上访问我的Vue应用程序.
I can't access my Vue app on localhost:8080
anymore after Dockerizing the app.
我有一个 Dockerfile
,内容如下:
# Base the image off of the NodeJS image
FROM node
# Set the working directory to be the HOME directory
WORKDIR /root
# Install NPM dependencies early in the build process
COPY ./package.json /root
COPY ./package-lock.json /root
RUN npm install
# Specify what port will be available - necessary for VPC network
EXPOSE 8080
# Copy our application files to the image
COPY ./.browserslistrc /root
COPY ./.eslintrc.js /root
COPY ./.env /root
COPY ./babel.config.js /root
COPY ./README.md /root
COPY ./vue.config.js /root
COPY ./public /root/public
COPY ./src /root/src
# Start the container running our Node app
CMD ["npm", "run", "serve"]
(在进行Dockerizing之前, npm run serve
允许我通过Web浏览器访问Vue应用.)
(Before Dockerizing, npm run serve
allowed me to access the Vue app through my web browser.)
然后我运行PS命令 docker build
:
PS C:\Users\User\mealSocial-dev> docker build -t finalvue app
Sending build context to Docker daemon 126.8MB
Step 1/15 : FROM node
---> 448d0873ea84
[...]
Step 15/15 : CMD ["npm", "run", "serve", "--port", "\"8080\""]
---> Running in c4840f98e5dc
Removing intermediate container c4840f98e5dc
---> 904928fa859c
Successfully built 904928fa859c
Successfully tagged finalvue:latest
SECURITY WARNING: You are building a Docker image from Windows against a non-Windows Docker host. All files and directories added to build context will have '-rwxr-xr-x' permissions. It is recommended to double check and reset permissions for sensitive files and directories.
...然后 docker run -p 8080:8080
:
PS C:\Users\User\mealSocial-dev> docker run -p 8080:8080 finalvue
> meal-app@0.1.0 serve /root
> vue-cli-service serve
INFO Starting development server...
<s> [webpack.Progress] 0% compiling
[...]
DONE Compiled successfully in 8147ms11:39:59 AM
<s> [webpack.Progress] 100%
App running at:
- Local: http://localhost:8080/
It seems you are running Vue CLI inside a container.
Access the dev server via http://localhost:<your container's external mapped port>/
Note that the development build is not optimized.
To create a production build, run npm run build.
尽管它说似乎您正在容器内运行Vue CLI.通过http://localhost:<您的容器的外部映射端口>/
访问开发服务器,我得到此页面无法正常工作.本地主机未发送任何数据.ERR_EMPTY_RESPONSE
:
Despite it saying It seems you are running Vue CLI inside a container. Access the dev server via http://localhost:<your container's external mapped port>/
, I get This page isn’t working. localhost didn’t send any data. ERR_EMPTY_RESPONSE
:
我正在 EXPOSE
-在 Dockerfile
中的端口并在运行时添加
.我想念什么? -p 8080:8080
标记docker run
I'm EXPOSE
-ing the port in the Dockerfile
and adding the -p 8080:8080
tag when I run docker run
. What am I missing?
推荐答案
(来自注释部分):
将-host 0.0.0.0
添加到 npm run serve
或
将 host:0.0.0.0
添加到配置( ./vue.config.js
)
这篇关于无法在主机上访问Dockerized Vue的localhost:8080(尽管使用EXPOSE-ing端口)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!