AWS 서버에서 NGINX 사용해서 REACT 배포하기

일단 node.js 와 npm이 깔려 있다는 전제로 시작하겠읍니다.

 

참고로 전 react 깃랩에서 git clone해서 땡겨왔읍니다.

 

 

1.  nginx 설치

sudo apt-get install nginx -y

 

 

기본적인 nginx 명령어

 

#nginx 시작
sudo service nginx start

#nginx 중지
sudo service nginx stop

#nginx 재시작
sudo service nginx restart

 

 

난 이렇게 했는데

sudo service nginx start 시 

실행이 안되는 에러가 발생했다.

 

이거 내가 예전에 아파치 깔면서 80포트를 아파치가 쓰고있더라

 

 

sudo /etc/init.d/Apache2 stop

 

 

해서 80 포트 사용 멈춰주기

 

이 에러는

https://jhb.kr/357

nginx 설치시 Failed to start A high performance web server and a reverse proxy server. 라고 뜨는 경우

감사합니다 감사합니다.

 

 

 

이제 nginx에 빌드파일을 연결해주어야한다.

 

React 프로젝트 폴더로 가서

 

npm run build

 

이거하고나면 build 폴더가 생성이 됩니다.

 

 

 

nginx의 설치가 끝나면

/etc/nginx/ 경로에 기본 화면으로 연결되는 nginx 설정파일을 지워줘야 합니다..!

 

 

sudo rm /etc/nginx/sites-availallbe/default
sudo rm /etc/nginx/sites-enalbed/default

 

 

지워준 후 저희 프로젝트에 대한 nginx 설정파일을 생성해주어야 합니다.

 

cd /etc/nginx/sites-available
sudo touch myapp.conf

 

 

해서 

myapp.conf 에 아래 내용 추가해주면 됩니다.

 

server {
  listen 80;
  location / {
    root  {리액트 프로젝트 build후 생성된 build 폴더 경로};
    index  index.html index.html;
    try_files $uri /index.html;
  }
}

 

 

root에  아까전에 리액트 프로젝트 build하고 생성된 폴더 경로 적어주면 됩니다.

 

후에 심볼릭 링크를 만들어주어야 합니다.

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

 

 

 

 

nginx 멈추고 다시 재시작 시

aws 서버 주소에  리액트 프로젝트 잘 나오는 거 확인할 수 있습니다,,!

 

 

sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl status nginx

 

 

 

 

<참고했던 블로그 링크>

 

https://velog.io/@mingtorr/AWS-EC2%EB%A1%9C-%ED%99%88%ED%8E%98%EC%9D%B4%EC%A7%80-%EB%B0%B0%ED%8F%AC%ED%95%98%EA%B8%B04-nginxreact-%EC%97%B0%EA%B2%B0%ED%95%98%EA%B8%B0

AWS EC2로 홈페이지 배포하기(4) nginx+react 연결하기

 

 

https://www.hanumoka.net/2019/12/29/react-20191229-react-nginx-deploy/

React를 Nginx웹 서버에 배포하기

 

 

https://velog.io/@kimkevin90/Nginx%EB%A1%9C-React-%EB%B0%B0%ED%8F%AC-%EB%B0%8F-express%EC%97%B0%EB%8F%99

Nginx로 React 배포 및 express연동