[ec2 배포] 502 Bad Gateway (Next.js에서 nginx)

문제

내 서버로 접속하면 bad gateway 라고 뜬다 .
왤까?
nginx 기본 파일 설정을 잘못해주고 있다.

원인

• next.js 는 일반적으로 node.js 서버에서 실행되므로, nginx는 이 node.js 서버와 연결되어야 한다.

해결

애플리케이션을 빌드한다.

cd /path/to/your/nextjs/app
npm install
npm run build

nginx 설정 파일을 연다.

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

설정 파일에 다음을 추가합니다. 이 설정은 Next.js 애플리케이션을 포트 3000에서 실행 중인 Node.js 서버와 연결하는 것이다.

server {
    listen 80 default_server;
    listen [::]:80 default_server;

    root /var/www/html;
    index index.html;

    server_name _;

    location / {
        proxy_pass http://localhost:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

위의 설정에서 proxy_pass 부분은 실제로 Next.js 애플리케이션의 주소와 포트로 수정해야 한다.

Nginx 재시작:
설정이 완료되면 Nginx를 재시작하여 변경 사항을 적용한다.

sudo systemctl restart nginx

Next.js 애플리케이션 실행:
Next.js 애플리케이션을 실행합니다.

cd /path/to/your/nextjs/app
npm start

이제 웹 브라우저에서 서버의 IP 주소나 도메인을 입력하면 Nginx가 설정한 Next.js 애플리케이션이 표시될 것!