Dockerized Angular/nginx应用程序未与Rest API对话 [英] Dockerized Angular/nginx app not talking to rest api

问题描述

我有一个用于前端的Angluar应用程序，并且我有一个REST API监听端口3001(码头化的Rails后端).

I have an angluar app for my frontend and I have a rest api listening on port 3001 (dockerized rails backend).

我正在使用以下命令运行我的角度应用程序:

I was running my angular app with following command:

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

并带有以下proxy.conf.json文件:

And with following proxy.conf.json file:

{
   "/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
   }
}

这工作得很好-我的角度应用程序在端口4200上运行，并且可以与我的dockerized后端正常通信.

This works perfectly fine - my angular app runs on port 4200 and talks properly to my dockerized backend.

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

I now wanted to dockerize my front end too using nginx.

这是我的dockerfile:

This is my dockerfile:

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看起来像这样:

And my nginx-custom.conf looks like this:

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;
  }
}

我通过以下应用程序进行构建:

I build by app with:

docker build -t client:prod .

然后我以以下方式启动我的应用程序:

And I start my app with:

docker run -p 80:80 client:prod

我的Angular应用程序正在端口80上启动，并且可以看到我的第一个屏幕.但这与我的其余api无关.在我的浏览器中，我看到我的有角度的应用程序将html请求发送到4200.我不确定这是正确的，并且根本原因是什么?由于我在端口80上使用了nginx-我的角度应用程序的请求现在不应该转到端口80吗?

My Angular app is coming up on port 80 and I see my first screen as expected. But it doesnt talk to my rest api. In my browser I see my angular app sending html requests to 4200. I am not sure this is correct and the root cause? Since I am using nginx on port 80 - shouldnt the request from my angular app go to port 80 now?

我将nginx配置更改为侦听端口4200，并使用端口4200:4200启动了dockerized应用程序，但这都不起作用.

I changed my nginx configuration to listen on port 4200 and started my dockerized app with port 4200:4200 but this doesnt work neither.

任何想法在这里有什么问题吗?

Any idea what could be wrong here?

谢谢， 迈克尔

推荐答案

制作一个docker-compose文件.这样会自动为您创建网络.同一网络上的容器可以互相访问.

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

也可以代替localhost:3001在您的Nginx配置中.使用api:3001. "api"是在docker-compose文件中定义的名称. Docker会将其解析为容器IP地址.

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.

这篇关于Dockerized Angular/nginx应用程序未与Rest API对话的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！