배포 환경에서 OAuth2 소셜 로그인을 위한 Nginx 설정 문제 해결

문제 상황

• 배포 환경에서 OAuth2 소셜 로그인을 설정하는 과정에서 Nginx 설정 문제로 인해 인증이 제대로 이루어지지 않는 상황 발생
• OAuth2 인증 요청이 적절히 처리되지 않거나 리다이렉트되지 않는 문제

원인 분석

• Nginx 설정 파일에서 프록시 설정이나 리다이렉트 설정이 잘못되어 있음
• 현재 설정 코드

server {
    listen 80;
    server_name {my_domain};

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name {my_domain};

    ssl_certificate /etc/letsencrypt/live/{my_domain}/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/{my_domain}/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location / {
        proxy_pass http://localhost:3000;
        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 X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Port $server_port;
    }

    location /api {
        proxy_pass http://localhost:8080;
        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 X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Port $server_port;
    }
}

• 소셜 로그인시 해당 url이후에 넘어가지 않고, 404 페이지로 넘어감

해결 방법

1. location /oauth2/authorize {} 설정 추가

• 해당 코드 추가시 login/oauth2/...이후로 더이상 진행되지 않는 모습

location /oauth2/authorize {
    proxy_pass http://localhost:8080;
    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 X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;
}

2. location /login/oauth2 {} 설정 추가

• 해당 부분도 추가해주니 소셜 로그인 정상 작동

location /login/oauth2 {
    proxy_pass http://localhost:8080;
    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 X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;
}

결과

• 전체 Nginx 설정 코드

server {
    listen 80;
    server_name {my_domain};

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name {my_domain};

    ssl_certificate /etc/letsencrypt/live/{my_domain}/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/{my_domain}/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location / {
        proxy_pass http://localhost:3000;
        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 X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Port $server_port;
    }

    location /api {
        proxy_pass http://localhost:8080;
        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 X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Port $server_port;
    }

    location /oauth2/authorize {
       proxy_pass http://localhost:8080;
       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 X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Port $server_port;
    }

    location /login/oauth2 {
        proxy_pass http://localhost:8080;
        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 X-Forwarded-Host $host;
        proxy_set_header X-Forwarded-Port $server_port;
    }
}

server {
    listen 80;
    server_name www.{my_domain};

    location / {
        return 301 https://{my_domain}$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name www.{my_domain};

    ssl_certificate /etc/letsencrypt/live/{my_domain}/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/{my_domain}/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot

    location / {
        return 301 https://{my_domain}$request_uri;
    }
}

• 위와 같은 방법으로 Nginx 설정 파일을 수저하여 OAuth2 소셜 로그인을 위한 설정 문제를 해결

참고

• Linux환경에서 Nginx 설정 진입

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

• 설정 후 시스템 재시작(재시작하지 않으면 설정 적용 안됨)

  sudo systemctl restart nginx