angular - 无响应:无法通过dockerize和运行angular app

Question

我正在尝试dockerize和运行一个 Angular 应用程序。能够成功构建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

我在哪里做错了？

Answer 1

您将静态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)以避免混淆，并允许在容器化的服务器旁边运行本地dev服务器。