오라클 클라우드 사용하기 - (2) 프로젝트 배포(React, Node.js)

Series

오라클 클라우드 사용하기 - (2) 프로젝트 배포(React, Node.js)

인스턴스 생성에 이어 프로젝트도 배포해보려고 한다.

프론트, 백엔드 배포는 각각 nginx와 pm2를 이용할 예정이다.

1. Linux 패키지 업데이트

아래 명령어로 linux 패키지를 최신버전으로 다운로드 받아준다.

sudo apt update -y && sudo apt upgrade -y

update 명령어는 패키지의 최신 버전이 있는지 확인해주는 명령어이고, upgrade는 해당 패키지들을 다운로드받아 설치하는 역할을 한다.

이 때 update 명령어로 최신 버전에 대한 정보를 가져와야 업그레이드가 되기 때문에 꼭 update 명령어를 먼저 써주어야 한다.

2. node 설치

먼저 nvm을 설치해준다. 아래 링크로 들어가면 nvm의 최신 버전 다운로드 링크를 볼 수 있다.

https://github.com/nvm-sh/nvm#installing-and-updating

글 작성 기준 현재 가장 최신 버전은 0.39.1이기 때문에 아래 명령어로 nvm을 다운로드 받아준다.

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

bash 설정을 바꾸고 나서는 아래 명령어를 써줘야한다고 한다.

source ~/.bashrc

그리고 바로 nvm 설치(이것도 현재 16.xx 버전이 최신인데 주버전만 입력하면 알아서 가장 최신 버전으로 설치해준다.)

nvm install 16

위의 명령어를 입력하면 설치하는 버전이 나오는데 그 버전을 use 해주면 된다.

nvm use 16.17.1

아래 명령어들을 각각 입력해서 설치가 잘 되었는지 확인해준다.

node

npm

yarn도 설치해주고 나면 기본적인 설치는 끝이다!

npm install --global yarn

3. 프론트 & 백엔드 실행

cd usr

git clone [repo 주소]

먼저 프로젝트를 올려놓았던 git repository에서 clone을 받는다.

맨 처음 putty로 접속을 하면 기본적으로 home/ubuntu 경로에 있게되는데, 이 안에 클론을 받으면 나중에 배포할 때 500 에러가 발생할 수 있다. 그러니 꼭 상위의 usr 폴더에 들어가서 clone을 받도록 한다.

clone이 완료된 후에는 front, back 폴더에서 각각 yarn install을 해서 패키지들을 설치해준다.

yarn install

yarn start

db 정보 등 기존에 env 파일로 관리하던 내용들도 .env 파일에 작성해준 뒤 실행을 확인해준다.

cd [.env 파일 만들 경로]

vi .env
// 파일 내용 작성 후 esc -> :wq

4. 프로젝트 배포

이제 대망의 프로젝트 배포 시간..!

pm2와 nginx를 설치해준다.

npm install --global pm2

sudo apt install nginx

서버 배포

먼저 백엔드 폴더에서 서버를 실행해준다. 이렇게 하면 서버는 끝이다.

pm2 --name back-server start yarn -- start

참고로 현재 pm2로 실행 중인 프로세스를 보려면 아래 명령어를 입력하면 확인 가능하다.

pm2 ps

pm2로 실행 중인 프로세스를 종료하려면 아래 명령어를 입력해주면 된다.

pm2 delete [id 번호]

프론트 배포

front 폴더로 이동한 후 build를 해준다.

yarn build

// or

npm run build

이상하게 build를 하는 데 굉장히 오래 걸려서 결국 로컬에서 따로 build를 해주고 그 빌드 파일을 vm 안으로 이동시켜줬다.

빌드가 완료되면 build 폴더로 이동한 뒤 현재 경로를 기록한다. (nginx 세팅을 할 때 필요하다.)

pwd 명령어로 나온 경로를 복사해서 따로 적어놓아야 한다.

cd build

pwd

아래 명령어를 입력하면 nginx 설정 파일을 수정할 수 있다.

sudo vi /etc/nginx/sites-available/default

root /var/www/html; 부분을 아까 기록한 폴더 위치로 바꿔주면 된다. 이 때 오타가 있거나 뒤에 세미콜론(;)을 붙이지 않으면 오류가 나기 때문에 주의해야 한다. (앞의 /도 지우면 안된다.)

ex) root /usr/KORrection/front/build;

root 위에서 기록한 build 폴더 위치;

이제 nginx를 재시작하면 배포는 끝이다.

sudo systemctl reload nginx

위의 명령어를 입력했을 때는 아래 명령어로 nginx를 시작해준 후 다시 입력해주면 된다.

sudo service nginx start

오라클 클라우드 사용하기 - (3) 도메인 연결, 구글 로그인

References

[nginx] nginx conf 설정 후 500 error

https://tired-overtime.tistory.com/m/159

https://javascript.plainenglish.io/deploying-a-node-js-app-to-oracle-cloud-c6f783cb98d7

'DevOps' 카테고리의 다른 글

Github Actions를 이용해 CI/CD를 구축해보자(ssh 연결) (0)	2023.02.15
오라클 클라우드 사용하기 - (3) 도메인 연결, 구글 로그인 (1)	2022.10.13
오라클 클라우드 사용하기 - (1) 인스턴스 생성, ssh 접속 (0)	2022.10.11