Nginx 로컬 개발 환경 프록시 설정

문제 상황

로컬에서 프론트엔드 개발할 때 localhost:8080으로 실행되는데,

백엔드 API가 특정 서브 도메인(예를 들어 test.kr)에서만 호출을 허용하는 경우가 있음

// localhost:8080에서 호출 시 CORS 에러 또는 거부됨
fetch('https://api.test.kr/users')

// hjkang.test.kr에서 호출해야 함
fetch('https://api.test.kr/users')

 

따라서 Nginx를 이용하여 localhost:8080 -> 일치하는 서브도메인으로 설정한 후 api를 호출하도록 설정 필요

 

 

설치

1. Nginx 설치 (Mac 기준)

# 설치
brew install nginx

# 설치 확인
nginx -v

 

 

2. /etc/hosts 에 서브도메인 등록

sudo vi /etc/hosts

# /etc/hosts

127.0.0.1 ${SUB_DOMAIN}.test.kr
ex) 127.0.0.1 hjkang.test.kr

 

 

3. HTTP/HTTPS 설정

 

a. 설정 파일 위치 확인

- 일반적으로 /opt/homebrew/etc/nginx/nginx.conf 또는 /usr/local/etc/nginx/nginx.conf에 위치

brew info nginx

 

b. Self-Signed 인증서 생성 (HTTPS 용)

mkdir -p ~/ssl/${FOLDER_NAME}
cd ~/ssl/${FOLDER_NAME}

openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
  -keyout ${FILE_NAME}.key -out ${FILE_NAME}.crt \
  -subj "/C=KR/ST=Seoul/L=Seoul/O=Dev/OU=Local/CN=${DOMAIN}"

ex)
openssl req -x509 -nodes -days 365 -newkey rsa:2048 \
  -keyout cloud.key -out cloud.crt \
  -subj "/C=KR/ST=Seoul/L=Seoul/O=Dev/OU=Local/CN=hjkang.test.kr

 

c. Nginx 설정 파일 수정

# HTTP
server {
    listen 80;
    server_name ${DOMAIN};

    location / {
        proxy_pass http://localhost:8080;
    }
}

# HTTPS
server {
  listen 443 ssl;
  server_name ${DOMAIN};

  # b에서 생성한 crt, key 파일 경로
  ssl_certificate     /Users/yourname/ssl/${FOLDER_NAME}/${FILE_NAME}.crt;
  ssl_certificate_key /Users/yourname/ssl/${FOLDER_NAME}/${FILE_NAME}.key;

  location / {
    proxy_pass http://localhost:8080;
  }
}

 

4. 설정 적용

nginx -s reload
nginx -t // 설정 적용 테스트
brew services start nginx // 실행