codestates/section4

프론트엔드 배포 & 백엔드 배포

나아눙 2023. 4. 1. 11:46

백엔드 배포 

EC2 인스터스 상에서 서버 실행

인스턴스 연결 - Session Manager 연결

Windows에서 터미널 bash 실행이 안돼서 

가상 우분투로 연결을 하였다.

 

인스턴스 개발환경

nvm 설치

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
또는
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.3/install.sh | bash
 sudo apt update
nvm install node
sudo apt install npm

git을 통해 서버 코드 클론

clone하기전에 SSH등록을 한다.

SSH 등록 방법

SSH 키 생성

ssh-keygen

ssh 출력 - 공개키 복사

cat ~/.ssh/id_rsa.pub

Github에 공개키 등록

프로필 이미지 클릭 - Setttings - SSH and GPG keys  - New SSH Key 클릭 -  Title와 Key - Add SSH Key 버튼 클릭 

공개키가 잘 등록되었으면 code 버튼을 클릭하고 SSH탭을 선택한다.

그다음 서버코드를 클론한다.

cd ~
 git clone ......

Server로 이동 

npm install - npm start

서버가 실행되었음을 알수 있다.

 

프론트엔드 배포

client를 클론해서 .env를 고쳐서 프론트엔드를 배포하였다.

REAT_APP_API_URL = ....

서버 주소를 넣으면 된다.

 

npm install - npm run build

create - react - app은 바로 번들링이 가능하며 빠른 배포가 가능하다.

 

build 자체를 넣지말고 build안에 있는 것을 모두 넣는다.

속성탭에 들어사 정적 웹사이트 호스팅 섹션 확인한다.

 

로그인 화면이 보이고 로그인을 누르면 로그인이 된다.