Angular-CLI代理在Docker内部不起作用

问题描述

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

I have a docker-compose file with everything I need for my project.

此docker-compose具有nginx服务器，mysql，phpmyadmin和php.在它的顶部，我最近添加了一个有角容器.如果我转到localhost:4200，则一切正常，如果我在Angular应用程序上，如果我转到localhost:80，则我在Laravel后端.

This docker-compose has a nginx server, mysql, phpmyadmin and php.At the top of it, I added recently an angular container. Everything is working fine if I go to localhost:4200, I'm on the angular app, and if I go to localhost:80, I'm on the Laravel backend.

现在，我需要向后端API发出一个简单的经典请求.我为如下所示的角度设置了代理:

Now I need to make a simple classical request to my backend API.I set up a proxy for angular looking like this :

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

这是我根据此主题复制的配置.但是当我尝试拨打电话时，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)

This is the config I copied based on this topic.But when I try to make the call, Chrome is saying that http://localhost:4200/api/test isn't existing (error 404) which is normal. On the other hand, the angular server says
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，但是我不知道如何解决这个问题.

I'm guessing it comes from docker but I can't figure out how to resolve this.

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的Dockerfile:

And here are the Dockerfiles for PHP and Angular :

PHP:

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

角度:

#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:

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

推荐答案

我通过从docker中删除Angular并使用简单的npm start手动运行它来解决了该问题.

I fixed the problem by removing Angular from the docker and running it manually with a simple npm start.

这篇关于Angular-CLI代理在Docker内部不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！