时间戳

首页 > 解决方案 > Dockerized Angular/nginx 应用程序不与 rest api 对话

angular - Dockerized Angular/nginx 应用程序不与 rest api 对话

问题描述

我的前端有一个角度应用程序，我有一个在端口 3001（dockerized rails 后端）上监听的 rest api。

我正在使用以下命令运行我的 Angular 应用程序：

ng serve --proxy-config proxy.conf.json

并使用以下 proxy.conf.json 文件：

{
   "/server": {
     "target": "http://localhost:3001",
     "secure": false,
     "pathRewrite": {"^/server" : ""}
   },
   "/api": {
      "target": "http://localhost:3001",
      "secure": false
   },
   "/base": {
      "target": "http://localhost:3001",
      "secure": false
   },
   "/users": {
      "target": "http://localhost:3001",
      "secure": false
   }
}

这工作得很好——我的 Angular 应用程序在端口 4200 上运行，并与我的 dockerized 后端正确通信。

我现在也想使用 nginx 对我的前端进行 docker 化。

这是我的码头文件：

FROM node:8.9 as node

WORKDIR /app

COPY package.json /app/

RUN npm install
COPY ./ /app/

ARG env=prod

RUN npm run build -- --prod --environment $env

FROM nginx:1.13

COPY --from=node /app/dist/ /usr/share/nginx/html

COPY ./nginx-custom.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

我的 nginx-custom.conf 看起来像这样：

server {
  listen 80;
  server_name  localhost;
  root   /usr/share/nginx/html;
  index  index.html index.htm;

  location /server {
      proxy_pass http://localhost:3001;
      proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
      proxy_buffering off;
      proxy_set_header Accept-Encoding "";
  }
  location /api {
      proxy_pass http://localhost:3001;
      proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
      proxy_buffering off;
      proxy_set_header Accept-Encoding "";
  }
  location /base {
      proxy_pass http://localhost:3001;
      proxy_next_upstream error timeout invalid_header http_500 http_502 http_503 http_504;
      proxy_buffering off;
      proxy_set_header Accept-Encoding "";
  }
  location / {
    try_files $uri $uri/ /index.html =404;
  }
}

我通过应用程序构建：

docker build -t client:prod .

我开始我的应用程序：

docker run -p 80:80 client:prod

我的 Angular 应用程序在端口 80 上出现，我看到了我的第一个屏幕，如预期的那样。但它不与我的休息 api 对话。在我的浏览器中，我看到我的 Angular 应用程序向 4200 发送 html 请求。我不确定这是正确的，根本原因是什么？由于我在端口 80 上使用 nginx - 我的 Angular 应用程序的请求现在不应该转到端口 80 吗？

我更改了我的 nginx 配置以侦听端口 4200，并使用端口 4200:4200 启动了我的 dockerized 应用程序，但这也不起作用。

知道这里可能有什么问题吗？

谢谢，迈克尔

标签： angulardockernginx

解决方案

Make one docker-compose file. That will automatically create network for you. Containers on same network can access each other.

Also instead of localhost:3001 In your Nginx config. Use api:3001. “api” is a name defined in to docker-compose file. Docker will resolve that to container IP address.

Let me know if that solves your problem or need more information.

推荐阅读