네이버클라우드에서 Nginx적용 후, 리액트 배포하기

기존 AWS의 EC2서버로 배포를 하는 것과 네이버클라우드에서 배포를 하는 것이 큰 차이가 없다. 

 

 

 

큰 흐름은 다음과 같다.

 

• 네이버클라우드에서 일단 서버를 연다. (필자는 ubuntu를 사용했다.)
• 서버에서 nginx를 설치하고, nginx의 default설정을 살짝 바꿔주자.
• git에서 파일을 받아오든, 서버에 프로젝트파일을 가져와 빌드해서 nginx에 연결시켜주면 된다.
• 추가적으로, 보안인증서를 nginx와 letsencrypt를 사용하여 https도 연결해주자.

 

 

 

 

 

 

---

 

 

 

 

네이버클라우드에서 일단 서버를 연다. (필자는 ubuntu를 사용했다.)

 

이번 프로젝트에서는 회사에서 사용하고있던 기존 서버를 받아서, 이에 대한 자료가 거의 없다.

근데 서버를 설정하는 방법은 AWS와 크게 다르지 않을 것 같다. 가장 실수하는 곳은 보안규칙에서 포트를 열어주는 것인데, 나중에 https도 설정해줄 것이니 443(https 기본 포트),80 (http 기본 포트), 22 (ssh) 모두 열어주도록 하자.

 

 

 

---

 

 

 

 

각자 선호하는 리눅스를 통해, 방금 열어둔 가상서버와 연결시키자. 

필자는 윈도우환경에서 gitBash를 사용했다.  

 

 

위와 같이, ssh root@[IP주소]를 작성하면 비밀번호를 치는 칸이 나올 것이다. 그렇게 비밀번호까지 치면 가상컴퓨터에 접속했다고 볼 수 있다!

 

 

 이제 여기서 프로젝트파일을 설치하고, nginx도 설치한다. 그냥 기존 컴퓨터처럼 다운받고 실행시켜준다고 생각하면 된다.

 

 

 

 

---

 

 

 

 

가상 서버에서 이제 새롭게 설치해줄 것들 설치해주자.

 

 

처음으로 서버에 접속하면 아래와 같은 명령어를 차례대로 입력해주어야 한다.

 

우분투의 패키지 관리자 툴을 설치해주고, nodejs를 설치해주는 명령어이다.

apt-get update 
sudo apt-get update
sudo apt-get install nodejs

 

이제 원하는 경로에 git clone을 통해서, 프로젝트 파일을 다운받고 npm install을 통해 프로젝트에 필요한 패키지들을 설치해주자. 여기서 추가적으로, 배포를 위해서는 build된 파일이 필요하므로 npm run build 등의 명령어를 통해서 빌드파일까지 만들어주자.

 

 

여기까지하면, 프로젝트 파일세팅은 끝이다. 이제 웹서버를 설치하고, 실행시켜주면 배포 끝이다!

 

 

 

 

---

 

 

 

 

 

Nginx 웹서버를 설치하고, 설정을 바꿔주자.

nginx는 웹서버로 , 동시접속과 정적사이트에 최적화되었다고 하는 데 자세한 내용은 따로 적어두려고 한다.

 

 

 

아래 명령어를 통해, nginx를 설치하자.

sudo apt update
sudo apt install nginx

nginx를 설치했으면, default설정에서 파일을 여는 경로를 아까 git clone에서 설치한 파일의 경로로 바꿔주면 된다.

 

 

 

 

아래의 명령어로 nginx의 default파일이 있는 위치로 간다음, vi 명령어를 통해 파일을 수정해주자.

cd /etc/nginx/sites-available
vi default

 

 

빨간색으로 밑줄그은 부분에 git clone받은 파일의 경로를 적어주면 된다. (경로를 잘 살펴보아야 한다. 여기서 많이들 실수가 나온다.)

 

* 주황색으로 밑줄그은 부분은 파일경로를 찾지 못했을 때, 시도해볼 경로이다. 

 

아래와 같이 작성하면, index.html에서 먼저 찾고 그래도없으면 404페이지를 띄운다는 의미이다.

리액트와 같은 SPA에서는 navigate로 페이지를 이동하기 때문에, 아래와 같은 설정을 하지 않으면 새로고침을 하면 404페이지가 뜬다. 

 try_files $uri $uri/ /index.html =404;

 

 

 

 

아래는 nginx를 끄고 켜는 명령어이다. (reload는 서버가 종료되지않고 파일의 수정사항을 적용시킴) 

sudo service nginx start
sudo service nginx stop
sudo service nginx restart
sudo service nginx reload

 

 

 

 

nginx를 실행하고, 퍼블릭 아이피주소로 들어가보았을 때 기존 프로젝트가 잘 나타나면 배포 성공이다!

 

 

 

 

 

 

---

 

 

 

 

 

 

 

이왕 nginx 설치한 김에, https설정도 해주자.

[블로그 링크]