#angular #docker #nginx #docker-networking
#angular #docker #nginx #docker-сеть
Вопрос:
Я пытаюсь настроить и запустить приложение 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
Где я делаю неправильно?
Комментарии:
1. если вы можете работать без docker, проверьте, правильно ли указано имя вашего приложения или нет («login-UI»). Также предоставьте вывод: docker logs <containerid>
Ответ №1:
Вы помещаете свои статические файлы 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), чтобы избежать путаницы и разрешить запуск локального сервера разработки рядом с контейнерным.