在 Docker 容器中訪問 Angular 應用程序

Question

I'm trying to run an Angular app inside a docker container but i can't access it when I go to http://localhost:4200 . 當我運行應用程序時，我可以看到通常的 angular 日志，但我無法從瀏覽器訪問它。

我嘗試公開端口 4200，在運行應用程序“docker run -p 4200:4200 angular-example”時指定端口，並在 ng serve 命令中指定主機和端口，但這些操作均無效。

我的 Dockerfile

# base image
FROM node:12.2.0

# install chrome for protractor tests
RUN wget -q -O - https://dl-ssl.google.com/linux/linux_signing_key.pub | apt-key add -
RUN sh -c 'echo "deb [arch=amd64] http://dl.google.com/linux/chrome/deb/ stable main" >> /etc/apt/sources.list.d/google.list'
RUN apt-get update && apt-get install -yq google-chrome-stable

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install node-sass
RUN npm install
RUN npm install -g @angular/cli@7.3.9

# add app
COPY . /app

EXPOSE 4200

# start app
CMD ng serve --host 0.0.0.0 --port 4200

我用來運行圖像的命令

docker run -p 4200:4200  angular-example

以及我在運行應用程序時得到的日志

WARNING: This is a simple server for use in testing or debugging Angular applications
locally. It hasn't been reviewed for security issues.

Binding this server to an open connection can result in compromising your application or
computer. Using a different host than the one passed to the "--host" flag might result in
websocket connection issues. You might need to use "--disableHostCheck" if that's the
case.
** Angular Live Development Server is listening on 0.0.0.0:4200, open your browser on http://localhost:4200/ **

Date: 2019-10-13T04:08:51.354Z
Hash: 518bf687971012e084e7
Time: 89920ms
chunk {main} main.js, main.js.map (main) 304 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 237 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 178 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 7.82 MB [initial] [rendered]
ℹ ｢wdm｣: Compiled successfully.

當我啟動應用程序而不是到達實際應用程序時，我得到一個 ERR_CONNECTION_REFUSED。

Answer 1

我最近參與了一個 Angular 項目，該項目將其部署在 Docker 容器上。 這是 Dockerfile 的示例。

Docker 命令：

docker build -t your-app-name .
docker run -itd -p 4200:80 --name=your-app-name your-app-name

在 Dockerfile 中：

### STAGE 1: Build ###

FROM node:10-alpine as builder

COPY package.json package-lock.json ./

RUN npm set progress=false && npm config set depth 0 && npm cache clean --force

## Storing node modules on a separate layer will prevent unnecessary npm installs at each build
RUN npm i && mkdir /ng-app && cp -R ./node_modules ./ng-app

WORKDIR /ng-app

COPY . .

## Build the angular app in production mode and store the artifacts in dist folder
RUN $(npm bin)/ng build --prod --build-optimizer

### STAGE 2: Setup ###

FROM nginx:1.17.0-alpine

## Copy our default nginx config
COPY nginx/default.conf /etc/nginx/conf.d/

## Remove default nginx website
RUN rm -rf /usr/share/nginx/html/*

## From 'builder' stage copy over the artifacts in dist folder to default nginx public folder
COPY --from=builder /ng-app/dist/your-app-name /usr/share/nginx/html

CMD ["nginx", "-g", "daemon off;"]

Answer 2

我發現了為什么我無法使用 localhost 訪問我的容器。 原因是我使用的是 Docker 快速入門，它將我的容器映射到 192.168.99.100。 然后我就可以訪問我的應用程序了。

謝謝你的幫助