Angular-CLIプロキシがDocker内で機能しない

イリンドゥル

プロジェクトに必要なものがすべて含まれたdocker-composeファイルがあります。

このdocker-composeには、nginxサーバー、mysql、phpmyadmin、phpがあります。その上に、最近角のあるコンテナを追加しました。localhost:4200に移動すると、Angularアプリを使用し、localhost:80に移動すると、Laravelバックエンドを使用してすべてが正常に機能しています。

次に、バックエンドAPIに単純な古典的なリクエストを行う必要があります。私はこのように見える角度のプロキシを設定しました:

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

これは、このトピックに基づいてコピーした構成ですしかし、電話をかけようとすると、Chromeはhttp:// localhost:4200 / api / testが存在しない(エラー404)と言っていますが、これは正常です。一方、Angularサーバーは
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

角度:

#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"
  }
}
イリンドゥル

DockerからAngularを削除し、単純なを使用して手動で実行することで、問題を修正しましたnpm start

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]

編集
0

コメントを追加

0

関連記事

分類Dev

Angular-CLIプロキシが機能しない

分類Dev

リバースプロキシがAngularアプリで機能しない

分類Dev

Angularプロキシが機能しない

分類Dev

バックエンドへのAngular-CLIプロキシが機能しない

分類Dev

バックエンドへのAngular-CLIプロキシが機能しない

分類Dev

バックエンドへのAngular-CLIプロキシが機能しない

分類Dev

Angular:時計がループ内で機能しない

分類Dev

ngx-toastrがAngular5サービスのアップロード機能内で機能しない

分類Dev

stylePreprocessorOptionsが@Angular / cli7で機能しない

分類Dev

Angular2CLIの「ngserve」がWindowsで機能しない

分類Dev

Angular 2 [(ngModal)]がBootstrapポップアップ内で機能しない

分類Dev

Angularテンプレートキャッシュが機能しない

分類Dev

Angularアプリのulタグオーバーレイ内で垂直スクロールが機能しない

分類Dev

IE11がAngular2(TS)でAngular CLIプロジェクトを発行し、ポリフィルが機能しない

分類Dev

Angular $ resourceキャッシュが機能しない

分類Dev

Kendo-ui-angular2 コントロールが .NET 4.5 アプリケーションで機能しない

分類Dev

Angular CLI 1.0.0によってビルドされたAngular 4.0.0アプリがIE11で機能しない

分類Dev

Angular CLI + Angular 4 = IE10が機能しない

分類Dev

.detectChanges()がAngularテスト内で機能しない

分類Dev

Toastr通知が成功関数内で機能しない(Angular JS 1.6.6)

分類Dev

属性html内でAngularが機能しない

分類Dev

Expressdelete-routeがAngularアプリケーションで機能しない

分類Dev

Angular JSng-model-オプションが入力で機能しない

分類Dev

HashLocationstrategyがAngular6アプリケーションで機能しない

分類Dev

ng-showがAngularプロジェクトで機能しない

分類Dev

プロパティがngModel(Angular 2)で機能しない、エラー

分類Dev

画像アップローダーFileReaderがAngular6で機能しない

分類Dev

npmリンクがangular-cliで作成されたプロジェクトで機能していません

分類Dev

Angular:stopImmediatePropagation()がキーダウンで機能しない

Related 関連記事

  1. 1

    Angular-CLIプロキシが機能しない

  2. 2

    リバースプロキシがAngularアプリで機能しない

  3. 3

    Angularプロキシが機能しない

  4. 4

    バックエンドへのAngular-CLIプロキシが機能しない

  5. 5

    バックエンドへのAngular-CLIプロキシが機能しない

  6. 6

    バックエンドへのAngular-CLIプロキシが機能しない

  7. 7

    Angular:時計がループ内で機能しない

  8. 8

    ngx-toastrがAngular5サービスのアップロード機能内で機能しない

  9. 9

    stylePreprocessorOptionsが@Angular / cli7で機能しない

  10. 10

    Angular2CLIの「ngserve」がWindowsで機能しない

  11. 11

    Angular 2 [(ngModal)]がBootstrapポップアップ内で機能しない

  12. 12

    Angularテンプレートキャッシュが機能しない

  13. 13

    Angularアプリのulタグオーバーレイ内で垂直スクロールが機能しない

  14. 14

    IE11がAngular2(TS)でAngular CLIプロジェクトを発行し、ポリフィルが機能しない

  15. 15

    Angular $ resourceキャッシュが機能しない

  16. 16

    Kendo-ui-angular2 コントロールが .NET 4.5 アプリケーションで機能しない

  17. 17

    Angular CLI 1.0.0によってビルドされたAngular 4.0.0アプリがIE11で機能しない

  18. 18

    Angular CLI + Angular 4 = IE10が機能しない

  19. 19

    .detectChanges()がAngularテスト内で機能しない

  20. 20

    Toastr通知が成功関数内で機能しない(Angular JS 1.6.6)

  21. 21

    属性html内でAngularが機能しない

  22. 22

    Expressdelete-routeがAngularアプリケーションで機能しない

  23. 23

    Angular JSng-model-オプションが入力で機能しない

  24. 24

    HashLocationstrategyがAngular6アプリケーションで機能しない

  25. 25

    ng-showがAngularプロジェクトで機能しない

  26. 26

    プロパティがngModel(Angular 2)で機能しない、エラー

  27. 27

    画像アップローダーFileReaderがAngular6で機能しない

  28. 28

    npmリンクがangular-cliで作成されたプロジェクトで機能していません

  29. 29

    Angular:stopImmediatePropagation()がキーダウンで機能しない

ホットタグ

アーカイブ