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

토이 프로젝트에 프론트엔드로 참여하고 있던 중 작업중인 내용을 백엔드 개발자분들이 확인할 수 있다면 좋을 것 같다는 생각이 들었습니다. github page를 이용하면 빠르고 손쉽게 올릴 수 있었지만, 기왕 올리는거 여러가지를 많이 경험해 볼 수 있도록 GCP를 이용해 구성하기로 하였습니다. 아직 한 번도 사용해 본 적이 없어 하나씩 검색해보며 첫 삽을 떴기 때문에 다소 헤매는 감이 있을수도 있습니다. ㅎㅎ

 

 

가장 먼저 구글 클라우드 플랫폼에 가입하여 무료 크레딧을 받았습니다.

 

첫 크레딧을 받고 gcp에 접속한 화면

 

 

처음보는 이름의 메뉴도 많고 다양한 작업을 할 수 있을 것 같이 보이지만... 오늘 제 목적은 서버를 올려 웹 페이지를 띄워주는것이기 때문에 새 VM(가상머신) 인스턴스 만들기를 클릭하여 새 공간을 구성합니다.

 

vm 인스턴스 생성화면

 

 

몇 가지 설정을 상황에 맞게 바꾸어주고 (지역 설정, 접근 권한 등) 생성을 완료합니다.

 

새 vm 인스턴스가 생성된 모습

 

 

생성된 인스턴스를 눌러 세부정보 페이지로 들어가고, 원격 액세스 메뉴의 SSH(기본값) 버튼을 눌러 콘솔창으로 진입합니다.

 

 

드롭다운 메뉴의 SSH를 클릭

 

 

새창이 열리면서 콘솔창이 실행되었지만 SSH 인증에 약간 시간이 걸렸습니다. OS에서 직접 인증하는 방법을 사용하면 단축된다는 안내문이 있었는데 아직 해보진 못했습니다.

 

익숙한 console

 

 

이제 nginx를 설치해야 하는데, yum 명령어를 사용해서 설치하려고 했으나 yum을 찾을 수 없다는 메시지만 출력되었습니다.

 

"패키지 매니저가 없는건가?" 라는 생각이 들어서 검색해보니 설치된 OS가 debian 계열의 linux여서 apt-get 을 사용해야 된다고... 기억을 떠올려보니 ubuntu 를 사용했었던 구름 IDE에서도 apt-get을 사용했던 것 같네요.

 

다행히도 nginx 공식 문서에 가니 debian 기반의 운영체제에 nginx를 설치하는 방법을 찾을 수 있었습니다.

공식 홈페이지 바로가기

nginx docs에 나와있는 설치 방법

 

 

문서에 나온 가이드를 따라 콘솔창에 명령어를 입력해줍니다.

$ sudo apt-get update

$ sudo apt-get install nginx

$ sudo nginx -v

 

 

nginx 설치 완료!

 

 

nginx가 설치되었으니 이제 정상적으로 동작하는지 한 번 확인해보겠습니다.

vm 인스턴스 상세정보에서 확인할 수 있는 외부 IP를 통해 접속했을때 다음과 같은 화면이 보인다면 성공입니다.

 

Welcome to nginx!

 

 

우여곡절 끝에 성공했습니다!

이제 빌드과정만 남았네요... ㅎㅎㅎㅎ