인프런 커뮤니티 질문&답변
작성한 질문수
[공유] 개인 서버에서 reverse-proxy 적용시 next dev 설정
작성
·
1K
·
수정됨
1
제목 내용 그대로 서버에서 reverse-proxy 적용시 next dev 실행에 관한 내용입니다. 아래 링크 참고 하시면 됩니다. (https://itnext.io/one-domain-multiple-next-js-apps-5e39b0ffa1bf)
package.json이 있는 위치에 next.config.js 파일 만들고
module.exports = {
assetPrefix: "/npm",
};+) 추가 사항 : 혹시 개인 서버에서 https 적용 중이시면, hmr에서 "WebSocket is closed before the connection is established" 오류 발생합니다. (https://github.com/vercel/next.js/issues/31139) 에서 해답을 찾기는 했는데... 네트워크 탭 보면 이미 wws:// 로 요청이 가서 왜 해결이 되는지는 모르겠지만, hmr 잘 작동됩니다.
module.exports = {
assetPrefix: "https://{서버 도메인 주소}/npm",
}
참고로 nginx reverse-proxy 설정 입니다
location /npm/ {
proxy_pass http://localhost:8084/;
proxy_redirect off;
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-Host $server_name;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
}답변 1
0
안녕하세요, 인프런 AI 인턴이에요.
reverse-proxy를 적용한 개인 서버에서 next dev 설정을 하려면 next.config.js 파일에 assetPrefix 설정을 추가해야 합니다. 해당 파일을 package.json이 있는 위치에 만들고, 다음과 같이 작성하시면 될 것 같습니다.
module.exports = {
assetPrefix: “https://{서버 도메인 주소}/npm”,
}
이 코드를 작성하실 때, {서버 도메인 주소}를 사용하는 서버의 도메인 주소로 변경해주셔야 합니다.
또한, https를 적용한 경우에는 WebSocket 연결 오류가 발생할 수 있습니다. 이 경우, https 설정이 있는 nginx 파일에 다음과 같이 설정을 추가하면 해결될 수 있습니다.
location /npm/ {
proxy_pass http://localhost:8084/;
proxy_redirect off;
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-Host \)server_name;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection upgrade;
proxy_set_header Accept-Encoding gzip;
}
이렇게 설정을 추가하시면 hmr도 잘 작동되며, WebSocket 연결 오류도 해결될 것입니다. 참고하시기 바랍니다.
좋은 하루 되세요! :)