구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #2

이전 포스팅인 구글 클라우드 플랫폼을 이용하여 리액트 프로젝트 호스팅하기 (nginX) #1에 이어지는 내용입니다. 
지난 시간에 우리는 GCP에 우분투 인스턴스를 생성하고, nginx를 설치하여 서버를 가동시키는 과정까지 진행했습니다. 
그럼 이제 리액트 프로젝트를 가져와서 nginx에 연결하는 과정까지 해보겠습니다. 

이번 프로젝트를 진행하면서 많은 시간을 정보 검색에 할애했었는데, 원하는 내용을 찾지 못해서 이곳저곳에서 토막 지식을 붙여다가 겨우 성공했습니다... 삽질은 힘드네요. 

우리의 최종 목표는 빌드된 파일만을 서버에 업로드하고, 배포 과정을 단축시킬 수 있는 스크립트를 작성하는 것 까지입니다. 그럼 시작하겠습니다.

 

이전 포스팅에서의 nginx 실행 화면

 

 

 

 

nginx를 설치했다면 주어진 외부 IP주소를 통해 들어갔을때 기본 화면이 보입니다. 그러나 우리가 보여주고 싶은 것은 우리의 리액트 프로젝트 화면입니다. 이를 위해선 우선 빌드 파일을 만들어서 넣어줘야합니다.

 

리액트 프로젝트 하나를 열어줍시다. 기존에 만드셨던것도 좋고, 새로 하나 생성하셔도 괜찮습니다. 저는 제가 프론트를 담당하고 있는 토이 프로젝트를 사용하였습니다.

 

프로젝트 화면 (예시)

 

빌드 명령어를 사용하여 빌드 된 파일들을 생성해줍니다.

 

npm run build

 

빌드 명령이 작동하지 않는다면, package.json 파일에 들어가서 scripts 부분에 build 명령어가 선언되어 있는지 확인합니다. 

 

package.json 파일에 선언된 build 명령어

 

 

빌드에는 약간의 시간이 걸리니 잠시 기다려주세요. 빌드가 완료되면 아래와 같은 메시지가 출력되며 build 폴더가 생성됩니다.

 

빌드가 완료되었다는 메시지 (왼쪽) 와 생성된 빌드 파일 (오른쪽) 

 

 

빌드 파일은 준비되었습니다. 이제 서버에 접속하여 파일을 업로드 해보겠습니다.

로컬 파일을 서버로 보내려면, 외부에서 ssh 연결을 해야하기 때문에 인증과정이 필요합니다. 이때 필요한게 인증서 파일인데, linux 운영체제의 경우 터미널에서 ssh-keyzen 명령어를 통해 쉽게 키를 생성할 수 있지만 저는 윈도우 사용자이기 때문에 puttygen 을 통해 인증서를 생성하겠습니다.

 

구글에 puttygen을 검색하여 다운로드 하고, 실행시켜줍니다.

 

PuTTY Key Generator

Actions 탭에 있는 Generate를 눌러 키 생성을 시작합니다. Key 탭에서 마우스를 움직이는 것으로 진행할 수 있습니다.

 

키가 생성된 모습

 

열심히 마우스를 움직이고 나면 키가 생성되어있습니다. 화면에 보이는 ssh-rsa 로 시작하는 키를 Public key 라고 합니다. 이 파일을 서버쪽에 등록시켜주고, private key를 로컬에서 연결시켜주면 두 파일이 서로 인증과정을 거쳐 승인된 유저임을 확인합니다. 자세한 내용은 따로 정리하겠습니다.

 

Key comment 칸에 자신이 사용할 아이디를 입력해주고, Key passphrase 칸에는 비밀번호를 입력해줍니다.

Confirm passphrase 칸은 비밀번호 확인입니다. 위에 입력했던 비밀번호를 한 번 더 입력해주시면 됩니다.

 

 

이제 파일을 저장합니다. 상단 메뉴의 Conversations - Export OpenSSH key (force new file format) 을 클릭합니다.

파일 저장소를 기억해주시고, 파일 이름은 적당히 id_rsa 정도로 해줍니다. 이 파일은 로컬에서 사용할 private key가 되며, 외부에 공개해서는 안됩니다.

 

이제 하단 Actions 탭의 Save public key 버튼을 눌러 public key도 저장해줍니다. 파일 이름은 적당히 id_rsa.pub 로 해주겠습니다.

 

생성된 인증서 파일들

 

위 과정으로 인증서 생성이 완료되었습니다. 이제 서버에 등록해 줄 차례입니다.

아직 PuTTY Key Generator 창을 닫지 말아주세요!

 

 

해당 인스턴스 상세보기에 들어갑니다.

 

인스턴스 세부정보 페이지

 

 

상단바의 수정을 클릭해서 하단의 SSH 설정으로 들어갑니다.

 

SSH 키 추가하기

 

이곳에 아까전에 PuTTY Key Generator에서 Key 탭에 나왔던 키를 복사하여 넣어줍니다. 생성한 파일이 아닌, 푸티젠창에서 복사하시는 것이 좋습니다.

 

이 부분입니다

 

이 키를 복사해서 회색 칸에 넣어주시면, 유저 이름이 자동으로 표기됩니다. 빨간 글씨로 밑에 오류메시지가 뜬다면 무엇인가 잘못 되었다는 뜻이니 누락된 부분이 없는지 다시 한 번 확인해야합니다.

 

정상적으로 키 왼쪽에 유저 이름이 표시되었다면 맨 하단의 설정을 눌러 ssh키를 저장합니다.

 

이것으로 외부 접속을 위한 서버측의 준비는 끝났습니다. 이제 남은건 로컬 설정입니다.

 

 

아까 준비했던 인증서 파일들을 ssh 기본 경로로 옮겨줍니다.

보통은 아래와 같았습니다.

 

~/.ssh/

 

~/ 는 홈 디렉토리 입니다. 저의 경우 C:\Users\USER-PC 이었습니다.

 

기본 디렉토리로 옮겨준 모습

 

 

이제 로컬에서도 모든 준비가 끝났으니, 접속해볼까요?

다시 IDE로 돌아오겠습니다.

 

 

터미널(명령 프롬프트)에서 인스턴스에 접속하기

 

ssh -i ~/.ssh/id_rsa user_id@ip_address

ssh 명령어를 사용해 접속해줍니다. user_id는 인증서를 만들때 사용했던 Key_comment, ip_address는 인스턴스에서 확인할 수 있는 서버의 외부 ip 주소라고 생각하시면 될 것 같습니다.

 

접속 시도

 

key_load_public: invalid format은 왜 뜨는지 모르겠습니다. 아시는 분은 덧글 부탁드립니다 허허...

 

인증서를 만들때 암호를 설정했다면 위와 같이 passphrase 를 물어봅니다. 사전에 설정했던 비밀번호를 입력해줍니다.

 

접속 성공

 

드디어 접속에 성공했습니다! 이제 남은건 nginx 설정과 빌드 파일 업로드입니다.

글이 길어질 것 같아 다음 포스팅에서 이어가보도록 하겠습니다.