[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
A sample application for tracking a list of favorite Heroes that uses React for the UI, Node.JS and Express for the API and Azure Cosmos DB for the database. - GitHub - Azure-Samples/react-cosmosdb...
github.com
(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 환경구축
우분투 20.04에 Node.js 를 설치하는 세 가지 방법, npm 환경 구축과 REPL 을 이용한 실행
velog.io
(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연결 환경 설정
(3) React 앱 구동
- Node.js 버전 및 모듈 확인
node, npm 업데이트 참고 https://velog.io/@-__-/ubun2
[ubuntu 20.04] Node.js 버전 업데이트 시 에러 해결 방법 (npm 버전 업데이트)
Node.js & npm 버전 업데이트 시 에러 해결 방법
velog.io
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 프락시 설정
/etc/nginx/sites-available 경로에 default.comf 생성 아래와 같이 작성
sites-enabled 디렉터리를 활용을 위해 기타 server 블록의 내용은 모두 주석(#) 처리
참고) 권한 문제 발생으로 소스코드 권한 수정 (chmod 777)
참고) nginx 서비스 관련 명령어
// nginx 서비스 중지
sudo systemctl stop nginx
// nginx 서비스 시작
sudo systemctl start nginx
// nginx 서비스 상태 확인
sudo systemctl status nginx
작업 전 우선 React 빌드 진행
참고 자료
ubuntu에서 nginx reverse-proxy 설정하기 (velog.io)
ubuntu에서 nginx reverse-proxy 설정하기
nginx 최신버전(1.14)을 사용하다보니 기존에 참고하던 책과 구조가 좀 달라진 것 같다. 그래서 새로 포스팅을한다. 참고문서1를 열심히 참고했다.다음 명령어를 차례로 실행한다. sudo apt update , sudo
velog.io
Ubuntu 18.04.5 LTS 서버에 React(리액트)를 Nginx에 배포하기
리액트는 로컬에서 실행이되면 이제 웹서버에 배포를 해보자. 여기서는 Nginx라는 웹서버에 배포를 해보기로 한다. 먼저 Nginx를 설치한다. 참조 : docs.nginx.com/nginx/admin-guide/installing-nginx/installing..
samtao.tistory.com