[AWS] ec2 React 배포

ec2 생성과 pem key 설명은 생략.

우선 처음 배포하면서 만났던 문제점

1. 새로고침 404

새로고침 했을때 페이지 중앙 쪽에 nginx 404가 출력되거나,
왼쪽 위에 그냥 Not Found 라고 뜨거나.
nginx 404는 build 파일에 index.html 경로를 인식 못해서 발생하고,
Not Found는 그냥 nginx로 배포하지 않아서!!! 그런거였음..

2. 용량 문제

아으!! 그냥 처음에 ec2 에다가 git clone해서 그런거지뭐..
지금 생각해보면 용량 부족할만해.

그러면 결국 제가 찾은 ec2 배포 방법 시작합니다. 피드백 언제나 환영합니다.

지금 사용하고 있는 React 프로젝트에서 npm run build 해줍니다.
그리고 그 build 파일 찾아 압축!!

scp -i key.pem C:\front\build.zip ec2-user@
ec2-11-111-11-111.ap-northeast-2.compute.amazonaws.com:/home/ec2-user

pem key와, build.zip 위치 랑 ec2 접속 경로 바꿔서 넣어주세요. 이게 build.zip 파일 ec2에 전송하는 겁니다.

ec2에 접속해주세요

unzip build.zip

빌드파일 압축 풀어주시고,

sudo yum update
sudo yum install nginx

설치한다고 누르고, sudo amazon-linux-extra install nginx1 이런 문구가 나오면
아마존 관련 nginx 설치해주셔야 합니다!!

curl -o- -L https://yarnpkg.com/install.sh | bash
source ~/.bashrc
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash. ~/.nvm/nvm.sh
nvm install node

위에 명령어들을 차례대로 입력해주세요.
지금 이 위에 적힌 명령어가 nginx를 설치 후 기본적인 구조를 잡아주는거 같아요.

sudo vi /etc/nginx/nginx.conf 

파일 설정을 바꿔야 합니다.

include /etc/nginx/conf.d/*.conf;
include /etc/nginx/sites-enabled/*.conf;   << 이 부분 추가하기
#server {
#    listen       80 default_server;
#    listen       [::]:80 default_server;
#    server_name  _;
#    root         /usr/share/nginx/html;
    # Load configuration files for the default server block.
#    include /etc/nginx/default.d/*.conf;
#    location / {
#    }
#    error_page 404 /404.html;
#        location = /40x.html {
#    }
#    error_page 500 502 503 504 /50x.html;
#        location = /50x.html {
#    }
#}

주석과 include 내용을 변경 및 추가해주세요.

sudo mkdir /etc/nginx/sites-available
sudo mkdir /etc/nginx/sites-enabled

그리고 build 파일 경로를 잡기 위해 sites 관련 파일을 삭제 해주시고,
새로운 세팅을 하는 파일을 만들겁니다.

sudo vi /etc/nginx/sites-available/setting.conf

i 를 누르고

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

해당 부분을 입력 후에 esc 그리고 :wq! 저장을 해줍니다.

sudo ln -s /etc/nginx/sites-available/setting.conf /etc/nginx/sites-enabled/setting.conf
sudo nginx -t

sudo nginx -t 입력시 ok랑 successful 뜨면 성공
그리고 nginx 시작하기

sudo systemctl start nginx

이렇게 배포 후에 500에러가 발생한다면?

chmod 711 /home/ec2-user

권한 설정 완료.