앵귤러 튜토리얼(Angular tutorial) - 35 : 프록시(proxy)

이번 시간에는 개발과 관련된 프록시(proxy)라는 주제로 살펴보려 합니다.

프록시의 기본 의미는 간접, 대신 의 의미로 무언가 대신하여 주는 기능을 의미 합니다.

이번에 소개할 앵귤러에서의 프록시는 프로젝트 개발 중 에서 다른 서버와의 연동을 의미 합니다.

 

앵귤러 프로젝트는 순수 클라이언트 언어로 구성되어 있습니다.

* 조금 더 상세한 구성을 알고 싶으면 아래 링크를 통해 확인하여 주세요.

lts0606.tistory.com/329

앵귤러 튜토리얼(Angular tutorial) - 2 : 구성

 

개발 간 앵귤러에서 데이터 베이스에 접속 가능한 방법은 2가지가 있습니다.

첫번째로는 데이터베이스에 접속 가능한 서버에서 교차 출처를(cross-origin) 모두 허용한 다음에 서로 Rest-Api 형식으로 데이터를 주고 받는 방법 입니다.

이렇게 되면 앵귤러에서는 단순하게 호출하는 방법으로 데이터베이스에 연결 할 수 있습니다.

첫번째 방법을 선호하는 편이긴 하나, 서버에서의 보안과 앵귤러에서의 요청하는 주소값의 하드코딩이라는 문제가 발생 합니다.

아래 코드처럼 연동하는 주소가 하드코딩 되어야 합니다.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  constructor(private http: HttpClient){
    this.http.post('http://연동서버주소/data/',{param : 'request param'}).subscribe( arg=>{
      console.log(arg);
    })
  }
}

 

틀린 방법은 아니나 결국에는 빌드(build) 하기 전에 하드코딩된 부분을 제거해야 되는 불편함이 존재 합니다.

 

두번째 방법으로는 앵귤러 프로젝트에서 프록시(proxy) 설정을 통해서 특정 url을 확인 한 뒤 해당 주소를 변경하여 연동을 해야되는 서버로 요청을 보내는 것 입니다.

위 코드를 조금 변경하겠습니다.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  
  constructor(private http: HttpClient){
    this.http.post('/data/',{param : 'request param'}).subscribe( arg=>{
      console.log(arg);
    })
  }
}

 

자세히 보면, 기존 함수와 다르게 앞에 http로 시작하는 주소가 엎어진 것을 볼 수 있습니다.

단순하게 이런식으로 호출 한 다면 http://localhost:4200/data/ 를 호출하게 되므로 404오류가 나타나게 됩니다.

* 본인의 앵귤러 테스트용 포트가 4200인 경우 입니다.

 

여기서 prox.conf.json 파일을 만들어 보겠습니다.

{
    "/data/*": {
        "target": "http://연동할서버주소",
        "secure": false,
        "logLevel": "debug",
        "changeOrigin": true
    }
}

 

위 설정 파일의 내용은 data라는 요청이 들어오면 target 주소로 포워딩 하라는 설정 파일 입니다.

이 상태에서 angular.json 파일을 열어 serve 항목을 찾아봅니다.

요 부분을 의미합니다!

 

해당 serve에서 options 항목에 프록시 설정을 해 주도록 합니다.

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "frontPj:build",
            "proxyConfig": "프록시파일경로/proxy.conf.json"
          },
          "configurations": {
            "production": {
              "browserTarget": "frontPj:build:production"
            }
          }
        },

 

그리고 나서 프로젝트를 실행하여 해당 주소로 어떻게 데이터가 전달 되는지 확인하여 봅니다.

콘솔에 요청한 주소가 변경되어 전달되는 것을 볼 수 있습니다!

 

만약 프록시(proxy) 설정이 되어있지 않다면 아래처럼 404오류를 만나게 됩니다.

브라우저에서 이처럼 404오류가 나타납니다!

 

ng serve 명령어에 해당 옵션이 들어갔으므로 프로젝트를 빌드(build)하는 경우에는 아무런 문제가 없습니다.

또한 소스코드에서도 따로 하드코딩된 부분이 없으므로 좀 더 효율적 입니다. ^^

 

이상으로 앵귤러에서 교차출처(크로스-오리진)대비 다른 서버와의 연동방법에 대해서 살펴 보았습니다.

궁금한점이나 틀린점은 언제든 연락 주세요! ^^