Build하는 이유?
React는 node.js 보다 많이 무겁다. 개발을 하다보면 금새 1GB, 2GB 넘는다.
그래서 최대한 빌드시켜서 실행파일만 남겨두고, 나머지 필요없는 코드들은 서버에 올리지 않고 가볍게 만들어서 서버에 올리기 위해서이다.
먼저, 서버에 무언가 처리를 하기전에 리액트 프로젝트를 켜서 package.json 파일을 확인해보면 script에 build라는 명령이 있다. 이 build라는 명령으로 프로젝트를 빌드 할수 있다.
npm run build배포할 파일들을 가볍게 만드는 과정이기 때문에 시간이 조금 소요된다.
build라는 파일이 만들어진것을 확인할수 있다.
이전파일과 build폴더와 비교했을때 용량이 가벼워진것을 한눈에 확인 할수 있다.
빌드 폴더를 만들었다면 리액트에서는 끝!!
Nginx
Putty로 돌아가서 서버로 키고,
리액트를 배포할때 서버에서 Nginx를 사용한다. Nginx는 웹을 구동시켜주는 웹서버 프로그램이다.
Node.js 나 리액트 같은 js 파일을 올릴 때 많이 사용하는 웹 서버이다.
// 서버에서 node 16버전 설치하는 방법
curl -sL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt-get install -y nodejs
node -v
npm -v
apt-get update를 통해서 서버에 무언가 설치하기 전 서버를 전체적으로 업데이트 한다.
apt-get update
apt-get install nginx
// sudo apt update
// sudo apt install nginx
설치가 완료 되었으면 파일질라에 접속해서 폴더를 만들고, (예시로 project2폴더를 생성)
project2 폴더안에 "프로젝트이름" 폴더를 생성한다. => /project2/momoa
react폴더 안에 build폴더를 업로드해준다. => /project/react/build 폴더 상태
Nginx 설정하기
Nginx를 처음 설치를 하면 /etc/nginx/sites-available 곳에 어떤 파일이 존재한다.
해당 파일은 Nginx 처음 설치 했을때, 기본적으로 존재하는 파일이다. 해당 파일을 무작정 삭제하는 것이 아니라 다른 곳에 복제를 해놓고 필요한 설정만 놔둘려고 한다.
아래 내용을 순서대로 진행한다.
// 원본 복원
sudo cp -r /etc/nginx/sites-available/ /etc/nginx/sites-available-origin
sudo cp -r /etc/nginx/sites-enabled/ /etc/nginx/sites-enabled-origin해당 설치가 잘 되었다면 cd /etc/nginx로 이동했을 때, 폴더에 origin이 붙은 두개의 폴더가 새롭게 생겨야 한다.
아래 두줄을 순서대로 입력한다. origin이라는 폴더에 복제해서 백업을 했으니 원래 파일을 삭제하는 명령어이다.
참고로 위에 복원 명령의 cp는 copy , 삭제 명령의 rm은 remove를 뜻한다.
// default 기본 설정 파일 삭제
sudo rm /etc/nginx/sites-available/default
sudo rm /etc/nginx/sites-enabled/default
// build 결과물을 배포할 설정 파일 생성
sudo vi /etc/nginx/sites-available/프로젝트명.conf
ex) sudo vi /etc/nginx/sites-available/react.conf
Nginx 설정 파일 수정하기
해당 빈 페이지가 나온다. 아래 내용은 메모장에 옮겨서 작성하도록한다.
listen 3000은 어떤 포트로 접속할지를 의미하고,
location는 접속했을때 어디로 먼저 이동할지를 의미하기 때문에 ( / )슬래시로 한다.
중괄호 안에 root는 위에서 업로드한 build 폴더를 의미한다. 현재 위의 경로는 /project2/momoa/build; 로 설정한다.
// slick.conf 파일 수정 ( 앞에서 만든 프로젝트명.conf )
server {
listen 3000;
location / {
root /react/slick/build;
index index.html index.htm;
try_files $uri /index.html;
}
}
-> root /react/slick/build 는 본인이 위에서 파일질라를 통해 build 폴더를 업로드한 경로로 변경할 것.
키보드에서 i 버튼을 누르면, 좌측하단에 INSERT가 나타난다. vi에서 INSERT 모드는 파일을 수정할 수 있는 상태이기 때문에 내용을 입력할수 있다. 해당 상태에서 마우스 우클릭하여 메모장에서 작성했던 내용을 복사붙여넣기한다.
수정하는 모드를 종료할때는 ESC누르면 INSERT가 사라진다.
해당 파일을 저장하고 나올때는 :wq! 엔터를 치면 된다. (vi 모드에서 수정한상태로 저장하고 종료한다는 뜻)
저장하지 않고 종료하기는 q! 엔터
sudo vi /etc/nginx/sites-available/momoa.conf 해당 명령어에 다시 들어가서 저장된 내용이 나타나야 저장 성공!
실행할 수 있도록 링크 파일 만들기
해당 명령어는 available에 만들어놓은 conf파일(설정한파일)을 실제로 실행할수 있도록 링크 파일을 만들도록 하는 명령이다. 아래 slick 이라고 작성된 부분은 위에서 만들었던 momoa 파일명으로 변경한다.
sudo ln -s /etc/nginx/sites-available/momoa.conf /etc/nginx/sites-enabled/momoa.conf
sudo ln -s /etc/nginx/sites-available/slick.conf /etc/nginx/sites-enabled/slick.conf
// sites-available 폴더에 가상호스트 설정을 끝낸 것이고, 그 후에 방금 생성한 설정파일을 sites-enabled 폴더로 symlink 해야 해당 서비스가 활성화되며 실제 서비스가 가능한 상태가 된다.
// 위의 명령어는 site-enabled 폴더에 심볼릭하는 링크
Nginx 재기동하고 동작 확인
sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl status nginxactive(running) 나오면 정상 작동된 것임!
.
.
.
리액트 빌드 파일도 업로드 ✔
서버 파일도 업로드 후 node_Modules 설치 ✔
aws 보안 인바운드규칙에서 포트가 열려있는지도 체크✔
nginx conf 파일의 경로도 build폴더가 있는 곳으로 설정 ✔ 했는데...
500 Internal Server Error 페이지를 만났다.. 😂 역시 쉽지 않구나아ㅏㅏ~
1,2,3 방법을 순서대로 실행하여 에러창을 해결 하였다 !
1. 방법
www-data는 뭔지 모르겠지만, 일단 이것저것 다 시도중..
sudo vi /etc/nginx/nginx.conf 에서 user root; 로 수정
2. 방법 - 에러 로그 확인하기
tail -f /var/log/nginx/error.log
Nginx에서 에러가 났을때 로그를 확인하기 위해서는 error_log.log 파일을 출력해야한다.
nginx.conf 파일에서 해당 내용 작성함. sudo vi /etc/nginx.conf
3. 방법 - conf 파일 build 경로 체크하기
2.방법으로 index파일에 문제가 있음을 확인하고, 링크파일의 경로를 수정하였다.
momoa.conf 파일을 열어서 /project2/momoa/build; 경로를 => /home/ubuntu/project2/momoa/bulid; 로 수정하니 잘작동한다 😊🌱