[TIL]EC 2上で動作するサーバとのクライアント通信中に405エラー(feat.nginx config)が発生

5110 ワード

解決策
問題の開始
私は配置の全過程を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;
        }
}