无响应：无法 dockerize 和 运行 angular 应用程序
No Response : Unable to dockerize and run angular app
我正在尝试 docker 化和 运行 一个 angular 应用程序。能够成功构建 docker 图像。但是容器可能不是 运行ning，因此无法在浏览器中访问应用程序。
Docker文件
# 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 运行 :
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，但我建议使用不同的 url（如 80）以避免混淆并允许 运行 接下来使用本地开发服务器到集装箱的。
我正在尝试 docker 化和 运行 一个 angular 应用程序。能够成功构建 docker 图像。但是容器可能不是 运行ning，因此无法在浏览器中访问应用程序。
Docker文件
# 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 运行 :
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，但我建议使用不同的 url（如 80）以避免混淆并允许 运行 接下来使用本地开发服务器到集装箱的。