Question

我有一个docker-compose文件，包含我项目所需的一切。

这个docker-compose有一个nginx服务器，mysql，phpmyadmin和php。在它的顶部，我最近添加了一个角形容器。如果我去localhost：4200，我正在使用角度应用程序，如果我去localhost：80，我就在Laravel后端。

现在我需要向我的后端API发出一个简单的经典请求。我设置了一个像这样的角度代理：

{
   "/api/*": {
      "target":"http://localhost:80",
      "secure":false,
      "changeOrigin":true,
      "pathRewrite": {"^/api" : ""},
      "logLevel":"debug"
   }
}

这是我根据this主题复制的配置。但是当我尝试拨打电话时，Chrome会说http://localhost:4200/api/test不存在（错误404），这是正常的。另一方面，角度服务器说
HPM] Error occurred while trying to proxy request /test from localhost:4200 to http://localhost:80 (ECONNREFUSED) (https://nodejs.org/api/errors.html#errors_common_system_errors)

我猜它来自docker，但我无法弄清楚如何解决这个问题。

[编辑]

version: '2'

services:
  web_server:
    restart: always
    image: nginx:latest
    ports:
      - "80:80"
    volumes:
      - /projects/laravel/:/var/www/                                               
      - /docker/sites-enabled-nginx:/etc/nginx/sites-enabled/     
      - /docker/nginx.conf:/etc/nginx/nginx.conf
    links:
      - php:php

  php:
    restart: always
    build: /docker/php/
    container_name: "php"
    volumes:
      - /projects/laravel/:/var/www/       
      - db:db

  db:
    restart: always
    image: mysql
    volumes:
      - /Users/Irindul/mysql:/var/lib/mysql     
    ports:
      - "3306:3306"                                   
    container_name: "mysql"
    environment:
      - MYSQL_DATABASE=homestead
      - MYSQL_USER=homestead
      - MYSQL_PASSWORD=secret
      - MYSQL_ROOT_PASSWORD=root

  myadmin:
    restart: always
    image: phpmyadmin/phpmyadmin
    links:
      - db:db
    ports:
      - "8080:80"                                     



  angular:
    restart: always
    build: /docker/angular
    container_name: angular
    volumes:
      - /projects/angular/package.json:/usr/src/app/package.json
      - /projects/angular:/usr/src/app/
    ports:
      - "4200:4200"

以下是适用于PHP和Angular的Dockerfiles：

PHP：

FROM php:7-fpm
RUN docker-php-ext-install pdo pdo_mysql
WORKDIR /var/www

Angular：

#Latest Node
FROM node

#Creating working folder
RUN mkdir -p /usr/src/app

#Update pwd
WORKDIR /usr/src/app

#Run npm
RUN npm install
EXPOSE 4200
CMD ["npm", "start"]

package.json：

{
  "name": "client",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "ng serve -H 0.0.0.0 --proxy-config proxy.config.json",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  },
  "devDependencies": {
    "@angular/cli": "1.3.2",
    "@angular/compiler-cli": "^4.2.4",
    "@angular/language-service": "^4.2.4",
    "@types/jasmine": "~2.5.53",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.1.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-node": "~3.2.0",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

Answer 1

要解决此问题，我刚刚在docker compose文件中为我的api服务在前端/客户端服务中创建了一个链接：

客户

  # Frontend service
  client:
    build: client # specify the directory of the Dockerfile
    ports:
      - "4200:4200" # specify port forewarding
    links: 
      - api # link this service to the api service

API

  # API Service
  api: 
    build: api # specify the directory of the Dockerfile
    ports:
      - "5000:5000" #specify ports forewarding
    links:
      - database # link this service to the database service

此后，我更新了我在angular / client文件夹中的代理配置文件：

{
  "/api/*": {
    "target": "http://api:5000/",
    "secure": false,
    "changeOrigin": true
  }
}

注意：目标URL在docker composer文件： api 中相同，并且不要忘记暴露的端口，在我的情况下为5000。

Answer 2

您的问题是您没有复制package.json并且当没有package.json

时，npm install不会执行任何操作

将角度文件更改为

#Latest Node
FROM node

#Creating working folder
RUN mkdir -p /usr/src/app -p /usr/src/node_modules
ENV NODE_PATH=/usr/src/node_modules

WORKDIR /usr/src/app
COPY package.json ./package.json
RUN npm install
EXPOSE 4200
CMD ["npm", "start"]

这将在$NODE_PATH /usr/src/node_modules

中安装您的node_nodules

在下面的组成中更改角度服务

 angular:
    restart: always
    build: /docker/angular
    container_name: angular
    volumes:
      - /projects/angular:/usr/src/app/
    ports:
      - "4200:4200"

不需要package.json的额外条目。现在即使您要从本地文件夹挂载覆盖/usr/src/app/node_modules，但我们已经更改了要在/usr/src/node_modules

查找的节点模块

Answer 3

经过大量调试，我能够使它正常工作。

@MSLacerda解决方案可以工作，但是我想为docker网络添加一个答案，因为不赞成使用docker链接。

docker-compose.yaml

version: '3'

services: 
  client:
    # all other configurations...
    ports:
      - 4200:4200
    networks:
      - backend-net
  api:
    # all other configurations...
    networks:
      - backend-net

networks:
  backend-net:
    driver: bridge

proxy.config.json

{
  "/api/*": {
    "target": "http://api:3000",
    "secure": false,
    "changeOrigin": true
    "pathRewrite": {
      "^/api": ""
    }
  }
}

一个注意事项：确保proxy.config.json内的目标主机是您要连接的服务的名称。（在这种情况下，api服务就是您希望客户端连接到的服务）。 Docker将用容器的IP动态替换主机。并且不要忘记也为目标添加端口。

Answer 4

我通过从Docker中删除Angular并使用简单的require(['vis'], function(vis)) { ... }手动运行来修复此问题。

Angular-CLI代理无法在docker

4 个答案: