[React] React 앱 빌드와 배포

1️⃣  React 앱 배포 Overview

 

인터넷에서 내가 만든 앱에 접근할 수 있어야 한다.

지속적으로 앱을 수정하고 배포해야 한다.

Public IP 주소로 직접 접근할 수 있도록 해야 한다.

 

 

IP를 부여받은 서버에 React 앱을 배포

→  앱을 서빙하는 웹서버를 통해 사용자에게 앱을 전달

→  사용자는 IP를 통해 앱에 접근

 

 

이미지출처 : 엘리스 React 심화 Ⅱ - 05 React 앱 빌드와 배포

 

 

▶  React 앱 배포 프로세스

 

1)  IP를 부여받은 서버(VM)에 React 앱을 배포

2)  앱을 빌드하고, 웹서버를 세팅

3)  앱을 서빙하는 웹서버를 통해 사용자에게 앱을 전달

4)  사용자는 필요한 데이터를 받아 앱을 로딩

 

 

 

 

💡  프론트엔드 앱 배포 시 유의할 점

 

-  서버와 통신 시, CORS가 허용되었는지 점검해야 한다.

-  브라우저, 디바이스별로 앱이 정상적으로 동작하는지 점검해야 한다.

-  앱의 로딩 속도, 각 동작 시 성능, 버그 등을 점검해야 한다.

 

 

 

 

 

 

 

2️⃣  배포를 위한 React  앱 준비

 

▶  React 앱 준비

 

-  yarn.lock, package-lock.json이 동시에 존재하지 않는지 점검

-  로컬에서 npm run build를 실행하여 빌드 시 에러가 발생하지 않는지 점검

-  로컬에서 배포하여 production build가 제대로 실행되는지 점검

 

 

 

 

▶  Gitlab 연동

 

-  작성한 프로젝트 코드를 Gitlab에 배포

-  프로젝트가 Gitlab에 잘 올라갔는지 점검

-  last commit까지 적용되었는지 점검

git remote add origin https://gitlab.com/{gitlab_id}/{project_name}
git push --set-upstream origin master

 

 

 

 

 

 

 

 

3️⃣  Azure를 사용한 VM 배포

 

0)  Azure 계정을 만들기 (필수)

 

 

1)  portal.azure.com에 접속하기

 

 

2)  Virtual Machine을 검색  →  Virtual machine 리소스 페이지에 접속

 

 

 

 

3)  Create > Virtual machine 버튼을 클릭

 

 

 

 

4) VM 설정하기

 

-  Resource group은 필요하다면 새로 만들어 설정

-  Virtual machine name을 설정

-  Ubuntu Server 20.04 LTS로 생성

-  그 외 세팅은 default로 유지

-  포트 접근은 모두 허용

 

 

 

❗  주의할 점

-  SSH public key로 설정하는 것을 추천 (key pair는 다운받기)

-  유저 이름은 azureuser로 유지

 

 

 

 

5)  마지막으로 점검한 뒤, Review & Create 버튼을 눌러 생성

 

 

6)  다운받은 private key를 .ssh 밑으로 옮기기

mv {다운받은경로}/{private_key} ~/.ssh

 

 

7)  ssh 커맨드로 VM 서버에 접근

ssh -i ./{private_key} azureuser@{ip_address}
# 나갈 때는 exit

 

 

8)  ssh 커맨드로 정상적으로 접근되는지 테스트

 

-  위 명령어 입력 시 정상적으로 접근되면 아래와 같은 텍스트 나옴

 

 

 

 

 

 

 

 

4️⃣  React 앱 배포를 위한 Azure VM 세팅

 

1)  VM에서 nodejs, npm 설치

sudo apt update
sudo apt install nodejs
sudo apt install npm

 

 

 

2)  앱을 빌드하는데 필요한 npm package 설치

 

-  프로젝트 코드를 git clone으로 다운

-  npm i로 빌드에 필요한 패키지를 설치

git clone https://gitlab.com/{gitlab_id}/{project_name}
cd {project_name}
npm i

 

 

 

3)  serve를 이용해 앱을 배포

 

-  serve 라이브러리 설치

-  프로젝트를 빌드

-  serve 웹서버를 사용해 프로젝트를 80번 포트에서 서빙

sudo npm i -g serve
npm run build
sudo serve -s -p 80 build

 

 

 

4)  브라우저로 IP 주소에 접근해 앱이 서빙되는지 테스트

 

 

 

 

 

 

 

---

 이 글은 엘리스의 AI트랙 5기 강의를 들으며 정리한 내용입니다.