[AWS] EC2 배포할 때 팁과 유의사항

EC2 배포 팁

인스턴스 생성 후 running되기까지 5분, 아파치 display보이기까지 10분 정도 걸림
502 Bad Gateway: 80번 포트로 접속, 3000으로 포워딩해줬는데, 3000이 아무것도 반환하지 않고 있었음;

Nginx를 이용한 React 배포시

index.html을 랜더링 하고, static에 있는 bundling 되어있는 js와 css를 import하지 못하는 404 오류가 발생했다.

nginx conf 값 두 군데 모두 바꿔주자.

/etc/nginx/sites-available/default

server {
  listen 80;
  location / {
    root   /home/{user}/myapp/build;
    # root는 React build로 만든 build파일들의 경로
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

React router 404

react router를 사용하는 경우 다른 페이지로 넘어가거나 새로고침을 할 때 404를 볼 수 있다.

react는 SPA형식으로 index.html만을 사용하지만 nginx의 경우는 URL에 맞는 html파일을 찾으려고 하는 문제가 원인이다. 이는 아래와 같이 nginx 설정을 변경해주시면 해결하면 된다.

/etc/nginx/sites-available/default

server {
  listen 80;
  location / {
    root   /home/{user}/myapp/build;
    index  index.html index.htm;
    server_name $uri;
    try_files $uri $uri/ /index.html;
  }
}