[react서버 올리기] 빌드 , 서버 올리기

기존에는 start 를 통해서 실행

 

빌드는 build를 통해서 한다!

 

리액트가 무거운걸 가볍게 하기 위해서 빌드를 하는 것이다. 

$ npm run build

 

빌드가 완료되면 이제 배포를 하면 된다.

 

---

 

서버를 켠다 

(NCP, putty)

https://www.chiark.greenend.org.uk/~sgtatham/putty/latest.html

리액트 배포할때 사용할 웹서버

1. 서버 업데이트 2. ngnix 설치

다 했으면 파일질라

(서버 연결하기)

 

최상단에 파일 만들기 (프로젝트 안에 react 파일 만들기) ,그 안에 아까만든 build 파일을 넣는다.

 

 

Nginx 사용 설정하기

 

푸티에서 입력하기 

입력한 다음

이거를 해봤을 때 파란색 origin파일이 있어야 잘 작동한 것

삭제하기

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

```jsx
// 원본 복원
sudo cp -r /etc/nginx/sites-available/ /etc/nginx/sites-available-origin
sudo cp -r /etc/nginx/sites-enabled/ /etc/nginx/sites-enabled-origin

// 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/slick.conf
```

 

이렇게 해서 

빈화면이 뜨면 (vi모드)

i를 써서 복사해넣자.

// slick.conf 파일 수정 ( 앞에서 만든 프로젝트명.conf )
server {
        listen 3000; //서버 
//접속시 어딜 먼저 갈지 
        location / {
                root /project/react/build; // 빌드 폴더의 위치 
                index index.html index.htm; //인덱스로 두개 다쓰겠다 
                try_files $uri /index.html; // nginx 본인 자체의 기본설정
        }
}

-> root /react/slick/build 는 본인이 위에서 파일질라를 통해 build 폴더를 업로드한 경로로 변경할 것.

나올때는 ESC

 

vi모드에서 저장후 종료

저장하지 않고 나갈때는 q! 

 

 

실행 링크파일 만들기 

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

// sites-available 폴더에 가상호스트 설정을 끝낸 것이고, 그 후에 방금 생성한 설정파일을 sites-enabled 폴더로 symlink 해야 해당 서비스ㅏ 활성화되며 실제 서비스가 가능한 상태가 된다.
// 위의 명령어는 site-enabled 폴더에 심볼릭하는 링크

 

Nginx 재기동, 동작확인

```jsx
sudo systemctl stop nginx
sudo systemctl start nginx
sudo systemctl status nginx
```

 

이제 port를 열고 접속하자

NCP로 가서 

ACG가서 3000번 열기