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

https://r4bb1t.tistory.com/54

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

 

 

구글 클라우드 플랫폼에서 새 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 설정을 달아줘야 한다. 나는 클라우드 플레어로 간단하게 설정했다. 적당히 가입하고 도메인 구입처에서 네임서버를 클플로 바꿔주면 된다. 프리 플랜으로 무료로 설정했다. 그러면 잘 된다. 끝

 

http://blog.devari.kr/2018/linux/gcp-node-server-setting

Google Cloud Platform 에서 node.js 서버 세팅하기 :: Dev Ari

Google Cloud Platform 에서 node.js 서버 세팅하기

사실 어느정도 세팅이 되어있는 상태에서 쓰기때문에 양해 부탁드려요.

1. 준비작업

Google Cloud Platform 에 가입하셔서 프로젝트를 만들어주세요.

서버가 있어야 진행이 되니까요 …?

아래와 같은 URL 로 들어가시면 VM인스턴스를 만들 수 있습니다.

https://console.cloud.google.com/compute/instances?project=[프로젝트명]

2. 인스턴스 만들기

이름은 자유롭게 지어주세요.

영역 부분입니다. 저는 서버를 미국에 뒀는데요, Facebook chatbot 작업을 할 거라서 그쪽에 뒀어요.

영역 참고자료 에 가시면 자세히 볼 수 있어요.

한국과 제일 가까운 서버를 선택하시려면 일본에 있는 asia-northeast1 를 선택하시면 됩니다.

머신 유형에서는 제일 작은 초소형을 선택했어요.

그렇게 많은 서비스를 돌릴것도 아니고 공부용이거든요 ㅎㅎ

부팅 디스크는 Ubuntu 로 사용하려고 Ubuntu 를 선택했습니다.

기타 설정들은 물음표를 눌러서 참고하시면 됩니다.

컴퓨터에 대한 어느정도 지식이 있으면 선택하기 쉬우실거에요 !

3. 인스턴스 접속

인스턴스 메인화면으로 나와서 연결 부분에 SSH 접속을 할 수 있어요.

다른방법으로 저는 맥에서 nodejs.command 라는 파일을 만들어서 사용합니다.

#!/bin/sh
gcloud compute --project "[프로젝트명]" ssh --zone "[영역]" "[계정]@[인스턴스 이름]"

으로 저장하면 바로 접속이 가능해요 !

4. 서버세팅

작업을 좀 쉽게하기 위해 슈퍼관리자로 변신합니다.

# sudo su

업그레이드

아래 두 작업은 시간이 좀 걸립니다.

그래도 업그레이드는 필수 !

# apt update
# apt dist-upgrade

nginX 설치

서버 작업을 위해 nginx 를 설치합니다.

# apt install nginx

node 설치

# apt install npm

n 은 node 의 버전을 쉽게 할 수 있는 프로그램입니다. n help 로 사용법을 볼 수 있습니다.

# npm install -g n

n ls 로 설치된 버전을 확인할 수 있습니다.

n lts 를 설치하고 안정버전을 설치합니다.

# n lts
->  install : node-v8.9.4
    mkdir : /usr/local/n/versions/node/8.9.4
    fetch : https://nodejs.org/dist/v8.9.4/node-v8.9.4-linux-x64.tar.gz
######################################################################## 100.0%
    installed : v8.9.4

# n stable
->  install : node-v9.4.0
    mkdir : /usr/local/n/versions/node/9.4.0
    fetch : https://nodejs.org/dist/v9.4.0/node-v9.4.0-linux-x64.tar.gz
######################################################################## 100.0%
    installed : v9.4.0

node -v 로 현재 설정된 버전을 확인할 수 있습니다.

# node -v
-> v9.4.0

5. nodejs 테스트

node 설치까지 완료되었으니 이제 테스트를 해볼까요 ?

node 입력 후 엔터를 치면 바로 사용할 수 있어요.

root@nodejs:/home/ubuntu# node
> console.log('test'); // 입력
test // 결과
undefined
> // 멈추고 싶을 땐 control + C 를 2번 입력합니다.
(To exit, press ^C again or type .exit)
> 
root@ari-node:/home/ubuntu# 

파일을 만들어 사용도 가능합니다.

# cd /home/ubuntu
# mkdir nodejs
# cd nodejs
# vi test.js
# i // vi 의 입력모드
# console.log('node.js');
# esc + :wq // 입력모드 종료 후 파일을 저장
# node test.js

root@ari-node:/home/ubuntu/nodejs# node test.js
node.js // 결과

여기까지 입니다 :)