[Docker開発] Docker環境でAngular側からLaravel側のAPIが叩けない

Question

前提

初めまして、読んでいただきありがとうございます。
フロントエンドをAngular、バックエンドをLaravelで開発を行っております。
開発にはDockerを導入しております。

開発環境

環境

• windows 11
• Docker version 20.10.17
• Docker Compose version 2.7.0
• Angular CLI: 14.2.3
• typescript 4.7.4
• PHP 8.1.11
• Laravel Framework 9.31.0
• Laravel Sanctum

docker-compose container一覧

• php
• nginx
• mysql
• node.js(Angular14)

1. 番号リスト

実現したいこと

フロントエンドとバックエンドをつなげたい。(Laravel側のAPIを実行したい)

現在AngularとLaravelのアプリをdocker-composerにて開発をしております。
開発時は以下の工程を実行しております。

1. $docker-compose up -d 　を使用して、コンテナを起動
2. node.jsのコンテナで ng serve --proxy-config proxy.conf.json --host 0.0.0.0 --pollを実行
3. Angular側からLaravel側に対し、request※1を行う。
4. エラーメッセージが表示される

※1 requestのURLは(1)～(2)の方法で指定しております。
http://localhost:8080/api/login

(1) proxy.conf.jsonで http://localhost:8080/api までを指定
(2) login.service.tsで/api/loginを指定

→/apiを付けることで、先頭のurlを http://localhost:8080/api に変更する

3番のリクエストを正しく飛ばせるようにしたい。

フロントエンドURL
http://localhost:4200
バックエンドURL(nginxのURL)
http://localhost:8080

発生している問題・エラーメッセージ

下記エラーによって、Angular側からのリクエストが
Laravelに到達しておりません。

 [webpack-dev-server] [HPM] Error occurred while proxying request localhost:4200/api/login to http://localhost:8080/api [ECONNREFUSED] (https://nodejs.org/api/errors.html#errors_common_system_errors)

該当のソースコード

Docker-compose.yml

version: '3'

services:
 php:
    build: 
      context: .
      dockerfile: ./php/Dockerfile
    volumes: 
      - ./src/:/php
 web:
     build:
      context: .
      dockerfile: ./nginx/Dockerfile
     ports:
      - 8080:80
     depends_on:
      - php
     volumes:
      - ./src/:/php

 mysql:
     build:
        context: .
        dockerfile: ./mysql/Dockerfile
     ports:
       - 3307:3306
     env_file: .env.dev
     environment:
        TZ: 'Asia/Tokyo'
     volumes:
       - mysql-volume:/var/lib/mysql
 node:
      build:
        context: .
        dockerfile: ./node/Dockerfile
      working_dir: /frontend
      ports:
        - 4200:4200
      volumes:
        - ./frontend:/frontend
      tty: true

volumes:
   mysql-volume:
    name: database-volumes

proxy.conf.json

{
  "/api": {
    "target": "http://localhost:8080",
    "secure": false
  }
}

login.service.ts

import { catchError, Observable, of, tap } from 'rxjs';
import { ApiConst } from 'src/app/common/constants/api-const';

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';

import { LoginRequestDto } from '../models/dtos/requests/login-request-dto';
import { LoginResponseDto } from '../models/dtos/responses/login-response-dto';

@Injectable({
  providedIn: 'root'
})
export class LoginService {

  constructor(
    private http: HttpClient,
  ) { }

  public login(loginRequestDto:LoginRequestDto): Observable<LoginResponseDto> {
    return this.http.post<LoginResponseDto>(ApiConst.SLASH + ApiConst.API + ApiConst.SLASH + ApiConst.LOGIN, loginRequestDto)
      .pipe(
        catchError(() => {
          return of(null as unknown  as LoginResponseDto);
        })
      );
  }

}

cors.php

<?php

return [
    'paths' => [
        'api/*',
        'login',
        'logout',
        'sanctum/csrf-cookie'
    ],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

Route/api.php

<?php

use App\Http\Controllers\API\Auth\LoginController;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;

Route::middleware('auth:sanctum')->get('/user', function (Request $request) {
    return $request->user();
});

Route::post('/login', [LoginController::class, 'authenticate']);

<?php

namespace App\Providers;

use Illuminate\Cache\RateLimiting\Limit;
use Illuminate\Foundation\Support\Providers\RouteServiceProvider as ServiceProvider;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\RateLimiter;
use Illuminate\Support\Facades\Route;

class RouteServiceProvider extends ServiceProvider
{
    public function boot()
    {
        $this->configureRateLimiting();

        $this->routes(function () {
            Route::middleware('api')
                ->prefix('api')
                ->group(base_path('routes/api.php'));
        });
    }

試したこと

1. proxy.conf.jsonを "target": "http://web:8080" に書き換え実行→失敗

2. PostmanからLaravelのApiURLを実行→成功

参考にしたURL

• https://hsuzuki.hatenablog.com/entry/2019/10/25/170856
• https://zenn.dev/nagi125/articles/7d01336868c79654b4af
• https://pokuwagata.hatenablog.com/entry/2019/07/28/191649

コメント

現在、corsの知識やDockerのネットワークの知識を入れているのですが、
解決できずにいます。

わかる方がいましたらご回答よろしくお願いいたします。

※初投稿となります。至らない点がありましたら、コメントで教えていただけると助かります。

Answer 1

解決いたしました。

解決方法
proxy.conf.jsonを以下に書き換える

{
  "/api": {
    "target": "http://web:80"
  }
}

変更ポイント
➀今まではDockerホストのポート番号を指定していました。
しかし、Dockerのホストから実行しているわけではないので、ポート番号をDocker内部の物に変更
変更前→変更後
8080→80

➁
以下のサイトにも書いてあるようにlocalhostをサービス名に変更する
https://pokuwagata.hatenablog.com/entry/2019/07/28/191649
変更前→変更後
http://localhost→http://web