[AWS][ubuntu] 스프링부트 SpringBoot + 리액트 React 배포하기

AWS서버에 프로젝트 배포하는 방법 기록하기!

백은 스프링부트, 프론트는 리액트를 사용해서 프로젝트를 진행하였당

 

1. 백은 스프링부트에서 jar 파일 업로드하기 (FileZilla 사용)

[STS] Window - Show View

프로젝트\build\libs 경로에 jar파일 생성

 

2. 프론트는 yarn build해서 build 폴더 업로드하기 (FileZilla 사용)

(난 서버에 처음에 git으로 pull해왔어서, jar파일과 build폴더는 원래 로컬에 있던 경로와 동일하게 설정해주었다!!)

 

3. nginx 설정하기!!!

/etc/nginx/sites-available 경로의 default 파일에 사용할 포트랑 build 폴더 경로 적어주기!!!

server {
    listen 8090 default_server;
    listen [::]:8090 default_server;

    root /home/ubuntu/catchJob/frontend/build; # React 앱의 build 폴더 위치
    index index.html index.htm index.nginx-debian.html;

    server_name _;

    location / {
        try_files $uri $uri/ /index.html;

        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Range';
        add_header 'Access-Control-Expose-Headers' 'Content-Length,Content-Range';
     }
}

그리고 cors..이놈의 cors 문제가 엄청나게 발생하였다..^^...후

백에서 cors 다 허용하게 설정해주었는데 nginx에도 설정해줘야한다는 얘기를 들어서 설정을 추가해주었다

 

설정 후에 nginx 서비스 재시작하기

$sudo systemctl restart nginx

 

4. aws 보안그룹 인바운드 규칙에 8090포트도 추가해기

ip4와 ip6 모두 접근 가능하게 설정해줌

 

 

배포 후에는 aws서버ip:8090 이렇게 nginx에서 설정한 포트로 접속 가능하다!!

+ 현재 백엔드는 8089로 설정해주었는데, nginx로 8090포트를 사용하게 설정해주어서 오픈api는 8090포트로 다시 신청해주었다..!!!

 

 

참고 사이트 : https://enable-cors.org/server_nginx.html

enable cross-origin resource sharing