[React] 프로젝트 배포하기 (Nginx, aws EC2)

AWS EC2 상에 Nginx로 리액트 프로젝트를 배포했던 경험 정리를 위한 글.

이전에 서브 도메인에 SSL 인증까지 마쳤다. 그걸 그대로 사용할 예정이다.

 

[Nginx] 서브 도메인 설정, HTTPS 적용

 

React 파일 빌드, 서버 업로드

yarn 패키지 매니저를 쓰고 있었다. 프로젝트 파일을 빌드해준다.

yarn build

파일질라를 이용해 EC2에 빌드한 파일을 업로드했다. 경로는 /home/ubuntu/test/build

 

Nginx 설정

prod 서브도메인으로 요청을 보냈을때 해당 리액트 페이지가 렌더링될 수 있도록 설정 파일을 작성한다.

 

location / {
        root /home/ubuntu/test/build;
        index index.html;
        try_files $uri $uri/ /index.html;
}

• location : "/" 로 요청이 들어왔을 때
• root : 파일을 찾을 root 폴더를 지정
• index : 어떤 파일을 index로 할지 설정
• try_files : 도메인에 URI가 붙어서 요청이 들어올때 그 URI와 일치하는 파일을 찾는데, 해당하는 파일이 없으면 index.html을 보여준다. react-router-dom을 이용해서 페이지 라우팅을 하기 때문에!!

 

server {
    listen 80;
    listen [::]:80;

    server_name prod.xxx.shop;

    location / {
        root /home/ubuntu/test/build;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
    return 301 https://prod.xxx.shop$request_uri;
}

server {
    #listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot

    location / {
        root /home/ubuntu/test/build;
        index index.html;
        try_files $uri $uri/ /index.html;
    }

    server_name prod.xxx.shop;

    ssl_certificate /etc/letsencrypt/live/prod.xxx.shop/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/prod.xxx.shop/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
}

80번 포트로 들어왔을 때는 https 링크로 리다이렉트를 걸어준다.