如何解决无响应:无法通过dockerize和运行angular app
我正在尝试docker化并运行一个有角度的应用程序。能够成功构建docker镜像。但是容器可能没有运行,因此无法在浏览器中访问应用程序。
Dockerfile
# Stage 1
FROM node:12.16-alpine as build-step
RUN mkdir -p /app
WORKDIR /app
COPY package.json /app
RUN npm install
COPY . /app
RUN npm run build
# Stage 2
FROM nginx:1.17.1-alpine
COPY --from=build-step /app/dist/login-UI /usr/share/nginx/html
Docker映像日志:
docker build -t loginui .
Sending build context to Docker daemon 929.3kB
Step 1/9 : FROM node:12.16-alpine as build-step
---> 7a48db49edbf
Step 2/9 : RUN mkdir -p /app
---> Using cache
---> 009b1d8e341c
Step 3/9 : WORKDIR /app
---> Using cache
---> 22cca832d730
Step 4/9 : COPY package.json /app
---> Using cache
---> e493d0d6beae
Step 5/9 : RUN npm install
---> Using cache
---> 2d940671484f
Step 6/9 : COPY . /app
---> ffd600d0f204
Step 7/9 : RUN npm run build
---> Running in 234158b54741
> login-ui@0.0.0 build /app
> ng build
Browserslist: caniuse-lite is outdated. Please run next command `npm update`
chunk {main} main-es2015.js,main-es2015.js.map (main) 64.6 kB [initial] [rendered]
chunk {polyfills} polyfills-es2015.js,polyfills-es2015.js.map (polyfills) 251 kB [initial] [rendered]
chunk {runtime} runtime-es2015.js,runtime-es2015.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles-es2015.js,styles-es2015.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor-es2015.js,vendor-es2015.js.map (vendor) 4.09 MB [initial] [rendered]
Date: 2020-09-28T18:02:46.647Z - Hash: e180e2f26c569d07323a - Time: 14143ms
chunk {main} main-es5.js,main-es5.js.map (main) 67.2 kB [initial] [rendered]
chunk {polyfills} polyfills-es5.js,polyfills-es5.js.map (polyfills) 558 kB [initial] [rendered]
chunk {runtime} runtime-es5.js,runtime-es5.js.map (runtime) 6.09 kB [entry] [rendered]
chunk {styles} styles-es5.js,styles-es5.js.map (styles) 16.3 kB [initial] [rendered]
chunk {vendor} vendor-es5.js,vendor-es5.js.map (vendor) 4.18 MB [initial] [rendered]
Date: 2020-09-28T18:02:58.006Z - Hash: 75ab165574f3ffc6ffd6 - Time: 11236ms
Removing intermediate container 234158b54741
---> 2d10426b40cc
Step 8/9 : FROM nginx:1.17.1-alpine
---> ea1193fd3dde
Step 9/9 : COPY --from=build-step /app/dist/login-UI /usr/share/nginx/html
---> Using cache
---> 3a0472e79b29
Successfully built 3a0472e79b29
Successfully tagged loginui: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:
docker run -p 4200:4200 --name login-UI loginui:latest
在此步骤中,没有生成容器ID。
docker ps
CONTAINER ID IMAGE COMMAND CREATED STATUS PORTS NAMES
2273b2f03df7 loginui:latest "nginx -g 'daemon of" 3 minutes ago Up 4 minutes 80/tcp,0.0.0.0:4200->4200/tcp login-UI
我在哪里做错了?
解决方法
您正在将静态html / javascript文件放入nginx图像中,但是在运行容器时在4200上设置了端口映射。运行开发服务器时(例如,使用angular-cli)使用端口4200,但不使用nginx。使用nginx提供文件时,需要映射端口80并浏览到所选的端口。
docker run -p 80:80 --name login-UI loginui:latest
,然后使用http://localhost
代替http://localhost:4200
。
从技术上讲,您也可以像以前一样映射4200:80
来保留url,但是我建议您使用另一个(如80)以避免混淆,并允许在容器化的URL旁边运行本地dev服务器。 / p>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。