[Eric's Web] NGINX 설치 및 CORS 설정 방법

안녕하세요!
Eric입니다!
오늘 알아볼 내용은
얼마전에 회사에서 CORS를 세팅하려는데,
Server에서 세팅하기 어려운 상황이었어서,
NGINX에 CORS를 세팅해서 CORS 세팅을 해보고자 시도했던 방법입니다!

이번기회에 NGINX 가 무엇인지 알아보고 저와 같이 NGINX 에 대해서 알아보시죠!

NGINX 설치 및 CORS 설정 방법

소개

웹 애플리케이션을 개발할 때 CORS(Cross-Origin Resource Sharing)는 중요한 요소입니다. CORS는 웹 브라우저에서 다른 출처의 리소스를 요청할 때 발생하는 보안 기능으로, 이를 적절히 설정하지 않으면 API 요청이 차단될 수 있습니다. 이 글에서는 Ubuntu 환경에서 NGINX를 설치하고 CORS 설정을 하는 방법을 단계별로 설명하겠습니다.

1. NGINX 설치

먼저 NGINX를 설치합니다. 아래의 명령어를 통해 NGINX를 설치할 수 있습니다.

sudo apt update
sudo apt install nginx -y

설치가 완료되면 NGINX가 자동으로 시작됩니다. 상태를 확인하려면 다음 명령어를 사용합니다.

sudo systemctl status nginx

NGINX가 정상적으로 실행 중이라면, 웹 브라우저에서 서버의 IP 주소를 입력하여 NGINX 환영 페이지를 볼 수 있습니다.

2. NGINX 설정 파일 위치

NGINX 설정 파일은 일반적으로 /etc/nginx/nginx.conf에 있습니다. 개별 서버 블록 설정은 /etc/nginx/sites-available/ 디렉토리에 있습니다. 여기에서 설정 파일을 생성하고 심볼릭 링크를 통해 활성화할 수 있습니다.

3. CORS 설정

이제 NGINX를 통해 CORS를 설정하는 방법을 알아보겠습니다. CORS 설정은 NGINX의 http, server, 또는 location 블록에 추가할 수 있습니다. 여기서는 /etc/nginx/sites-available/default 파일을 수정하여 기본 설정에 추가하겠습니다.

설정 파일 열기

sudo nano /etc/nginx/sites-available/default

설정 추가

다음은 CORS 설정 예제입니다. 이 설정을 server 블록 안에 추가합니다.

server {
    listen 80;
    server_name example.com;

    location / {
        if ($request_method = 'OPTIONS') {
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
            add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
            add_header 'Access-Control-Max-Age' 86400;
            add_header 'Content-Type' 'text/plain charset=UTF-8';
            add_header 'Content-Length' 0;
            return 204;
        }

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';

        proxy_pass http://your_backend_server;
    }
}

설정 설명

• if ($request_method = 'OPTIONS'): 프리플라이트(preflight) 요청을 처리합니다.
• add_header 'Access-Control-Allow-Origin' '*': 모든 도메인에서의 요청을 허용합니다. 특정 도메인만 허용하려면 '*' 대신 해당 도메인을 입력합니다.
• add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS': 허용할 HTTP 메서드를 지정합니다.
• add_header 'Access-Control-Allow-Headers' ...: 클라이언트가 요청 시 사용할 수 있는 헤더를 지정합니다.
• add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range': 응답 시 노출할 헤더를 지정합니다.
• add_header 'Access-Control-Max-Age' 86400: 프리플라이트 요청의 캐시 유효기간을 지정합니다.
• proxy_pass http://your_backend_server: 요청을 백엔드 서버로 프록시합니다.

4. NGINX 설정 적용

NGINX 설정 파일을 수정한 후에는 NGINX를 재시작하거나 설정을 다시 로드해야 합니다.

sudo nginx -t # 설정 파일 문법 검사
sudo systemctl restart nginx # NGINX 재시작

또는

sudo nginx -s reload # 설정 다시 로드

결론

이 글에서는 Ubuntu 환경에서 NGINX를 설치하고 CORS 설정을 하는 방법을 단계별로 알아보았습니다.
CORS 설정을 통해 다양한 도메인의 요청을 처리할 수 있습니다.
프로젝트의 요구사항에 맞게 설정을 조정하여 사용하면 됩니다.
NGINX의 유연한 설정을 활용하여 보안과 기능을 모두 만족하는 웹 서비스를 구축해보세요.

---

오늘 알아볼 내용은 여기까지!
다음에 더 좋은 글로 찾아뵙죠!