Angular-CLI-Proxy funktioniert nicht in Docker

Question

Ich habe eine Docker-komponieren-Datei mit allem, was ich für mein Projekt brauche.

Dieses docker-compose hat einen nginx-Server, mysql, phpmyadmin und php. Oben habe ich kürzlich einen eckigen Behälter hinzugefügt. Alles funktioniert gut, wenn ich localhost: 4200 gehe, bin ich auf der eckigen App, und wenn ich zu localhost gehe: 80, bin ich auf dem Laravel-Backend.

Jetzt muss ich eine einfache klassische Anfrage an meine Backend-API stellen. ich einen Proxy für Winkel aussehen wie auf den Punkt:

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

Dies ist die Config-I auf this Thema basiert kopiert. Aber wenn ich versuche, den Anruf zu tätigen, sagt Chrome, dass http://localhost:4200/api/test nicht existiert (Fehler 404), was normal ist. Auf der anderen Seite, sagt der Winkel Server
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)

Ich vermute, es von Docker kommt, aber ich kann nicht herausfinden, wie diese zu lösen.

[EDIT]

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" 

Und hier sind die Dockerfiles für PHP und Eckig:

PHP:

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

Eckig:

#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

werden nachgeschlagen ich das Problem behoben, indem aus dem Docker Angular entfernt und manuell mit einem einfachen npm start läuft.

Answer 2

Ihr Problem ist, dass Ihr nicht package.json kopieren und npm installieren lässt nichts tun, wenn kein package.json dort

Ändern Sie Ihre Winkel Datei unter

#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"] 

Dieser Wille Installieren Sie Ihre Knotenknoten in $NODE_PATH Das ist /usr/src/node_modules

Ändern Sie Ihren eckigen Service in komponieren wie unten

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

Ein zusätzlicher Eintrag für package.json ist nicht erforderlich. Nun, obwohl würden Sie /usr/src/app/node_modules von Ihrem lokalen Ordner montieren überschreiben, aber die haben wir die Knotenmodule geändert bei /usr/src/node_modules