[GCP] 구글 클라우드 플랫폼에 Nginx로 리액트 프로젝트 배포하기

도메인을 산지 4달이 됐는데 아직 배포를 안 했다. 그래서 배포를 해보려고 한다.

 

 

구글 클라우드 플랫폼에서 새 VM 인스턴스를 만들어준다.

 

 

리전 / 영역은 적당히 서울로... HTTP / HTTPS 트래픽을 허용해준다.

 

 

눌러서 콘솔 들어간다.

 

sudo apt-get update
sudo apt-get upgrade

 

물어보면 그냥 Y 해준다.

설치 끝.

 

sudo apt-get install nginx
sudo systemctl enable nginx
sudo systemctl restart nginx
sudo systemctl status nginx

 

잘 설치가 됐다는 뜻인 것 같다.

 

sudo apt install git
git clone (깃 링크)

 

깃을 설치하고, 배포할 프로젝트를 클론해온다.

 

cd ./(폴더이름)
npm run build

 

프로젝트 폴더 내로 들어가서 빌드해준다.

 

cd /etc/nginx
sudo rm ./sites-available/default
sudo rm ./sites-enabled/default

 

sites-available과 sites-enabled의 default 폴더를 지워준다.

 

cd ./sites-available/
sudo vim myapp.conf

 

sites-available에 파일을 만들어주고

 

server {
  listen 80;
  location / {
    root   /home/(유저이름)/(폴더이름)/build;
    index  index.html index.htm;
    try_files $uri $uri/ /index.html;
  }
}

 

입력한다.

listen 80은 포트 80을 의미한다.

location의 root에는 아까 설치한 프로젝트의 빌드 폴더를 넣고 index는 빌드 폴더에서 접근할 index.html 파일을 써준다.

try_files 줄에는 요청한 uri를 무시하고 index.html을 제공해주도록 설정을 해놓는다. 리액트 프로젝트 내에서 react-router-dom으로 라우팅을 해주는데, nginx에서 라우팅을 먼저 처리해버리면 문제가 생기기 때문이다.요청요청한 주소의 uri를 무시하고 index.html 파일을 제공한다한 주소의 uri를 무시하고 index.html 파일을 제공한

 

cd  ../
sudo ln -s ./sites-available/myapp.conf ./sites-enabled/myapp.conf

 

sites-enabled 폴더에 symbolic link를 만들어준다. (윈도우로 치면 바로가기 같은 것)

 

service nginx restart

 

그러면 접속이

이렇게 잘 되면 좋겠는데

...

사실 안되고😅 도메인을 .dev로 사버려서 (얘는 https로만 접속되는 도메인임) https 설정을 달아줘야 한다. 나는 클라우드 플레어로 간단하게 설정했다. 적당히 가입하고 도메인 구입처에서 네임서버를 클플로 바꿔주면 된다. 프리 플랜으로 무료로 설정했다. 그러면 잘 된다. 끝.