본 문서는 Framer를 배우는 국내 사용자들이 한글 자료의 부족으로 겪는 어려움을 해결하고자, 공식 블로그의 내용을 한국어로 번역하고 실무에 유용한 정보를 추가했습니다. 프레이머를 사용하는 여러분께 작게나마 도움이 되길 바랍니다.

기본 설정

먼저 /etc/nginx/sites-available/default 파일에 있는 서버 블록을 아래와 같이 업데이트 해주세요.

server {
    listen 80;
    server_name example.com www.example.com;

    resolver 8.8.8.8;

    location / {
        set $backend <https://example.framer.website>;
        proxy_pass $backend$request_uri;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;

        proxy_ssl_server_name on

이 설정을 적용하면 들어오는 요청이 Framer 사이트로 전달되며, 사용자는 브라우저 주소창에서 여러분의 도메인(example.com)을 그대로 보게 돼요.

특정 슬러그만 프록시하기

사이트 전체가 아닌 특정 슬러그만(예 :/blog 또는 /pricing) 프록시하려면 특정 위치 블록을 추가하거나 수정하면 됩니다.

location /my-path {
    set $backend <https://example.framer.website>;
    proxy_pass $backend;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;

    proxy_ssl_server_name on

이렇게 하면 /my-path로 들어오는 요청만 Framer 사이트로 전달돼요. 이 덕분에 어떤 트래픽을 Framer로 보낼지 더 세밀하게 제어할 수 있어요.

‘proxy_ssl_server_name on’이 필요한 이유

이 지시어는 NGINX가 요청을 전달할 때 올바른 호스트 이름을 SNI(Server Name Indication) 방식으로 보내도록 해줘요. 만약 이 설정을 하지 않으면, 커스텀 도메인으로 요청을 보낼 때 400 Bad Request: Invalid hostname 오류가 발생할 수 있어요.

SSL로 프록시 보안하기

사용자를 보호하고 트래픽을 암호화하려면 HTTPS 설정이 필요해요.

Certbot으로 Let's Encrypt 사용

• 무료이며, NGINX와 잘 연동돼서 SSL 인증서 생성 및 갱신을 자동으로 처리해요.

• 단계별 가이드는 Certbot 문서를 참고하시길 바래요.

기존 인증서 사용

• DigiCert, Sectigo 등의 공급업체에서 이미 발급받은 인증서가 있다면, ssl_certificate와 ssl_certificate_key 같은 지시어를 사용하여 NGINX를 인증서와 키 파일에 설정하면 돼요.

자체 서명 인증서

• 테스트나 내부 용도로는 괜찮지만, 브라우저에서 보안 경고가 표시되기 때문에 실제 운영 사이트에는 권장하지 않아요.

마무리

여러분이라면 어떤 경로를 리버스 프록시로 연결해두고 싶으신가요? 이 설정만으로도 Framer 사이트를 여러분의 도메인에서 안정적이고 안전하게 운영할 수 있어요. 처음에는 기본 서버 블록으로 전체를 프록시해보고, 나중에는 필요한 경로만 지정해 유연하게 운영해보는 것을 추천해요.

본 글은 Framer 공식 블로그의 ‘Proxying with NGINX’를 번역·각색한 콘텐츠입니다.