Блог

Я пытаюсь настроить и запустить приложение 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 :

 docker run -p 4200:4200 --name login-UI loginui:latest
  

На этом шаге идентификатор контейнера не генерируется.

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. Порт 4200 используется при запуске сервера разработки (например, с angular-cli), но не с nginx. Когда вы обслуживаете файлы с помощью nginx, вам необходимо сопоставить порт 80 и перейти к выбранному порту.

docker run -p 80:80 --name login-UI loginui:latest

а затем использовать http://localhost вместо http://localhost:4200 .

Технически вы также можете сопоставить 4200:80 URL-адреса, как и раньше, но я бы посоветовал использовать другой (например, 80), чтобы избежать путаницы и разрешить запуск локального сервера разработки рядом с контейнерным.