[Azure 프로젝트] 주제 구상 & nginx-React연동 웹서버 구축

지금까지 배운 Azure서비스를 바탕으로 간단한 프로젝트를 진행한다.

● 서비스:  외국인 관광객을 위한 한국관광 신청 사이트

● 구상 의도: 한국관광을 신청하고자 하는 세계 각 지역의 트래픽에 대하여 Azure의 Cosmos DB의 전역 복제 기능을 활용한다. 주요 지역에 웹서버와 복제된 DB를 위치시키고 Traffic Manager를 활용하여 고객의 접속을 가장 가까운 지역으로 라우트 할 수 있다.

● 기대 효과: 전역적으로 발생하는 접속에 대하여 '짧은 대기시간'과 '고가용성'을 확보할 수 있다.

서비스 구상도

---

1. 웹서버 구축

고객들이 직접 접속되는 웹서버를 구축한다. MS공식 튜토리얼에서 제공하는 소스코드를 활용한다.

- 가상네트워크 + 가상 머신 생성

이번 프로젝트의 운영체제는 우분투(리눅스) 선택

참고) ubuntu ssh 암호로 접속

ssh -y username@ipaddr / 비밀번호 입력

- 앱구동환경세팅

앱소스 코드 및 관련 가이드 영상은 아래를 참고하였다.

[ MS 공식 가이드] https://docs.microsoft.com/en-us/azure/cosmos-db/mongodb/tutorial-develop-mongodb-react

[유튜버 실습] https://www.youtube.com/watch?v=SIKn241Hj6E 

[소스 코드] https://github.com/Azure-Samples/react-cosmosdb

GitHub - Azure-Samples/react-cosmosdb: A sample application for tracking a list of favorite Heroes that uses React for the UI, N

(1) Node.js설치

$ sudo apt-get install -y curl     // 커맨드 명령어 툴 설치
$ sudo apt update    // 패키지 업데이트
$ sudo apt install nodejs    //노드 js 설치
$ nodejs -v     //설치 완료 확인
$ sudo apt install npm    // 노드 패키지 매니저 npm 다운로드

 

[명령어 참고] 우분투 Node.js 설치 및 npm 환경 구축 (velog.io)

우분투 Node.js 설치및 npm 환경구축

 

(2) 소스코드 수정

$git clone https://github.com/Azure-Samples/react-cosmosdb.git

$cd react-cosmosdb

$npm install

참고) 소스코드 수정사항

경로 /react-cosmosdb/server/env

environment-change-me.js을 복사하여 environment.js 생성 [이름 변경]

sudo cp environment-change-me.js environment.js    // 이름 변경

sudo vi environment.js    //db연결 환경 설정

environment.js 수정: 노란색 - dbname, 초록색 - cosmosPort, 분홍색 - key

(3) React 앱 구동

- Node.js 버전 및 모듈 확인

node, npm 업데이트 참고 https://velog.io/@-__-/ubun2

[ubuntu 20.04] Node.js 버전 업데이트 시 에러 해결 방법 (npm 버전 업데이트)

npm install --save express mongoose body-parser cookie-parser mongodb debug    (관련 에러 발생 시 적용)

node server/server.js    // 백 서버 실행

npm start      // 다른 ssh창에서 앱 실행

 

- 포트가 이미 사용 중일 때

lsof -i tcp:3001        // 포트 확인

kill -9 PID        // 해당 포트 강제 종료

포트가 열려있을 때 해결

(4) nginx-React앱 연동

- nginx설치

sudo apt-get install nginx

sudo nginx -v

nginx 구동확인

- nginx 프락시 설정

/etc/nginx/sites-available 경로에 default.comf 생성 아래와 같이 작성

출처 - https://velog.io/@prayme/ubuntu에서-nginx-reverse-proxy-설정하기

sites-enabled 디렉터리를 활용을 위해 기타 server 블록의 내용은 모두 주석(#) 처리

참고) 권한 문제 발생으로 소스코드 권한 수정 (chmod 777)

 

참고) nginx 서비스 관련 명령어

// nginx 서비스 중지
sudo systemctl stop nginx
// nginx 서비스 시작
sudo systemctl start nginx
// nginx 서비스 상태 확인
sudo systemctl status nginx 

작업 전 우선 React 빌드 진행

nginx proxy패스 변경으로 웹접속 확인

---

참고 자료

ubuntu에서 nginx reverse-proxy 설정하기 (velog.io)

ubuntu에서 nginx reverse-proxy 설정하기

https://samtao.tistory.com/37

Ubuntu 18.04.5 LTS 서버에 React(리액트)를 Nginx에 배포하기