웹사이트나 API를 운영하고 있다면, 도메인, 서브도메인, 그리고 귀찮은 CORS 문제를 다뤄야 할 가능성이 높습니다. 단계별로 나누어 보면서 모든 설정을 매끄럽게 진행해봅시다.

Nginx에서 도메인 및 서브도메인 설정하기

Nginx는 여러 도메인과 서브도메인을 설정하는 것을 아주 쉽게 만들어 줍니다. Nginx에게 어떤 도메인이 어디를 가리켜야 하는지 알려주기 위해 서버 블록(가상 호스트라고도 함)을 설정하면 됩니다.

Nginx를 리버스 프록시로 사용하기

이 경우, Nginx를 리버스 프록시로 사용하고 있습니다. 이는 Nginx가 들어오는 요청을 받아서 서브도메인에 따라 적절한 백엔드 서버로 전달한다는 의미입니다. 이 설정은 로드 밸런싱, 보안, 요청 처리를 중앙 집중화하는 데 유용합니다.

HTTP를 HTTPS로 리다이렉트하기

모든 트래픽이 HTTPS를 통해 안전하게 라우팅되도록 하려면, 포트 80에서 443으로 리다이렉트를 설정하세요:

server {
    listen 80;
    server_name example.com *.example.com;
    return 301 https://$host$request_uri;
}

동적 프록시 패스를 사용하여 도메인 및 여러 서브도메인 처리하기

주 도메인(example.com)과 여러 서브도메인(api.example.com, blog.example.com 등)을 동적으로 처리하고 싶다면, 서브도메인을 추출하고 요청을 그에 맞게 프록시할 수 있습니다:

server {
    listen 443 ssl;
    server_name *.example.com;

    ssl_certificate /etc/nginx/ssl/example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/example.com.key;

    set $subdomain "default";
    if ($host ~* ^(.+?)\.example\.com$) {
        set $subdomain $1;
    }

    location / {
        proxy_pass http://backend.$subdomain.example.com;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header Connection "upgrade";
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Authorization $http_authorization;
    }
}

이 구성은 요청에서 서브도메인을 동적으로 추출하고, 해당 백엔드 서버(backend.<subdomain>.example.com)로 요청을 프록시합니다. 또한, 모든 필요한 헤더가 제대로 전달되도록 보장합니다.

이제 구성을 활성화하고 Nginx를 재시작하세요:

sudo ln -s /etc/nginx/sites-available/example.com /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl reload nginx

좋아요! 이제 도메인과 모든 서브도메인이 HTTPS와 동적 프록시로 잘 작동해야 합니다.

Nginx에서 CORS (교차 출처 리소스 공유) 처리하기

CORS가 뭐죠?

CORS는 프론트엔드가 다른 도메인에 호스팅된 API를 호출하는 것을 차단하는 것입니다. 만약 프론트엔드가 app.example.com 에 있고, API가 api.example.com에 있다면, 교차 출처 요청을 허용해야 합니다.

Nginx에서 CORS 활성화하기

API가 다른 도메인에서 요청을 수락하도록 하려면, Nginx에 올바른 헤더를 추가해야 합니다.

모든 출처 허용하기 (항상 권장되지는 않음) 

server {
    listen 443 ssl;
    server_name api.example.com;

    ssl_certificate /etc/nginx/ssl/api.example.com.crt;
    ssl_certificate_key /etc/nginx/ssl/api.example.com.key;

    location / {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';

        if ($request_method = OPTIONS) {
            return 204;
        }
    }
}

이 설정은 누구나 API에 접근할 수 있게 해줍니다. 공용 API에는 괜찮지만, 개인 API에는 위험할 수 있습니다.

특정 도메인만 허용하기

접근을 app.example.com으로 제한하고 싶다면, 대신 이렇게 하세요:

add_header 'Access-Control-Allow-Origin' 'https://app.example.com';

프리플라이트 요청 처리하기

브라우저는 실제 API 호출을 하기 전에 가끔 OPTIONS 요청을 보냅니다. 이를 처리하지 않으면 문제가 발생할 수 있습니다. 프리플라이트 요청을 허용하는 방법은 다음과 같습니다:

location / {
    if ($request_method = OPTIONS) {
        add_header 'Access-Control-Allow-Origin' 'https://app.example.com';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
        return 204;
    }
}

마무리

Nginx에서 도메인, 서브도메인, CORS를 제대로 설정하는 것은 무엇을 조정해야 할지 알면 그렇게 어렵지 않습니다. 올바른 설정을 통해 머리 아픈 문제를 피하고 앱이 원활하게 작동하도록 할 수 있습니다. 코딩 즐기세요!