在 Docker 容器中访问 Angular 应用程序

Posted 2023-02-25

【中文标题】在 Docker 容器中访问 Angular 应用程序

【英文标题】：Access Angular application in a Docker container

【发布时间】：2020-02-10 03:22:01

【问题描述】：

我正在尝试在 docker 容器中运行 Angular 应用程序，但是当我转到 http://localhost:4200 时无法访问它。当我运行应用程序时，我可以看到通常的角度日志，但我无法从浏览器访问它。

我尝试公开端口 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。

【问题讨论】：

会建议像CMD ["ng","serve","--host", "0.0.0.0","--port","4200","--disableHostCheck"]这样格式化cmd也可以docker exec -it <container_id> bash然后curl localhost:4200来检查它是否在本地主机上响应

您是否在运行 Docker Toolbox（通常在 Windows 7 上）？或者您是否有某种可能阻止端口的防火墙设置？ docker run -p 命令匹配服务器的启动日志，并且正在监听 0.0.0.0，两者都不错。

@DavidMaze 我在 Windows 10 上使用 Docker Quickstart。我不记得在我的机器上安装了任何防火墙

@Adiii 我可以在发出 curl 请求时看到响应，但无法使用浏览器访问它

然后看@DavidMaze 评论

【参考方案1】：

我发现了为什么我无法使用 localhost 访问我的容器。原因是我使用 Docker Quickstart 将我的容器映射到 192.168.99.100。然后我就可以访问我的应用程序了。

感谢您的帮助

【参考方案2】：

我最近参与了一个 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;"]