[TIL]EC 2上で動作するサーバとのクライアント通信中に405エラー(feat.nginx config)が発生
5110 ワード
解決策
問題の開始
私は配置の全過程をYoutube課程の一つに学びました.この課程では、Webサーバnginx、サーバ、クライアントがurlを共有しているため、ローカルコンピュータで開発する際、fetchのurlアドレスは「https://localhost:3000」と同じ形式ですが、配置時にはendpointだけで通信できると説明しました.
問題コード
解決策
EC 2ではサーバもlocalhost形式で動作する.http://localhost:port形式なので、自分がどんなポート番号を設定したかを確認し、nginxサーバにproxy passを設定する必要があります.
問題の開始
私は配置の全過程をYoutube課程の一つに学びました.この課程では、Webサーバnginx、サーバ、クライアントがurlを共有しているため、ローカルコンピュータで開発する際、fetchのurlアドレスは「https://localhost:3000」と同じ形式ですが、配置時にはendpointだけで通信できると説明しました.
問題コード
const submit = async () => {
const response = await fetch('/', {code for POST method})
if (!response.ok) {
// handle error
}
await alert(/** message to client */)
// other actions.....
}
この通信は引き続き405 errorを発行し、ローカルで問題がないため、通信コード自体よりも設定が間違っていることに気づき、NGINX設定の変更を開始する.解決策
EC 2ではサーバもlocalhost形式で動作する.http://localhost:port形式なので、自分がどんなポート番号を設定したかを確認し、nginxサーバにproxy passを設定する必要があります.
server {
listen 80;
listen [::]:80;
root // build된 client index.html이 있는 폴더 위치
index index.html index.htm index.nginx-debian.html;
server_name // 본인 도메인 설정
location / {
// 이 부분을 /index.html로 설정해주지 않으면 endpoint가 바뀐 상태에서
//refresh할 경우 404페이지가 나타나니 route 설정할 경우 필수!!
try_files $url /index.html;
}
// 여기가 오늘의 문제의 부분 설정
// '/api'부분은 client side에서 fetch시 사용하는 endpoint므로
// 다른 이름으로 설정 가능
location /api {
// EC2에서 서버는 동일하게 localhost형태로 운영되고 있다.
// 본인이 설정한 port를 적용해서 'localhost:port'로 설정해준다.
proxy_pass http://localhost:3000;
// 위의 proxy_pass만 설정해도 지금 당면한 문제는 해결 가능하지만
// 참고할만한 설정을 추가해본다.
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;
}
}
Reference
この問題について([TIL]EC 2上で動作するサーバとのクライアント通信中に405エラー(feat.nginx config)が発生), 我々は、より多くの情報をここで見つけました https://velog.io/@seonja/TIL-EC2에서-운영되는-서버와-클라이언트-통신에서-405에러-발생feat.-nginx-configテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol