리액트 우분투 서버에 가장 쉽게 배포하기

서버

서버는 AWS 라이트쉘 우분투 20.04 기준으로 한다.

 

유저 : ubuntu

홈 디렉토리 경로 : /home/ubuntu

 

 

 

 

사전 준비작업 - 빌드 스크립트 작성

프로젝트 폴더 루트에 deploy.sh 파일을 생성한다

 

vi deploy.sh

 

#!/bin/sh

echo "------------------------------"
echo "------------------------------"
echo "--- 1. yarn build"
echo "------------------------------"
echo "------------------------------"
yarn build




echo "------------------------------"
echo "------------------------------"
echo "--- 2. copy production"
echo "------------------------------"
echo "------------------------------"
rm -rf production
\cp -r build production

 

npm을 사용할 경우 yarn을 npm으로 적절히 바꿔주면 된다. 

해당 파일은 리액트 빌드 후 build 폴더를 production 폴더로 복사해 준다. 이렇게 하면 빌드하는동안 서비스가 안나오는 문제를 해결 할 수 있다.

 

 

 

---

 

 

1. nginx 설치

sudo apt-get update
sudo apt-get upgrade
sudo apt-get install nginx

 

구동 확인 sudo service nginx status

 

 

2. node 설치

curl -sL https://deb.nodesource.com/setup_18.x | sudo bash -E -
sudo apt install -y nodejs

 

혹 yarn이 필요한 경우 설치

sudo npm install -g yarn

 

 

 

3. 프로젝트 폴더 생성

/home/ubuntu/app 폴더를 생성 한다.

 

mkdir app

 

 

 

4. 코드 깃에서 클론

여러 방법을 해봤지만 이 방법이 가장 단순하고 편리하다. 서버와 깃허브를 연결해서 깃허브에서 서버로 pull 받는 방식이다.

 

서버 .ssh 폴더에 ssh 키를 생성 하고 깃허브에 가서 등록한다

 

https://velog.io/@skyepodium/Github-SSH-Key-%EB%93%B1%EB%A1%9D%ED%95%98%EA%B8%B0

 

 

 

등록이 완료 되었으면 app 폴더로 이동 후 클론한다

 

코드의 위치 : /home/ubuntu/app

git clone [깃허브 레포지토리 주소] .

레포 주소 입력 후 한칸 띄고 쩜 을 찍는 것을 주의

이렇게 하면 현재 폴더에 코드를 받는다

 

 

코드를 받았으면 패키지를 인스톨해본다

 

yarn install

 

 

5. nginx 유저 설정

sudo vi /etc/nginx/nginx.conf

 

user ubuntu; <---------- 이 부분을 ubuntu로 설정
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;
 
events {
        worker_connections 768;
        # multi_accept on;
}
 
http {
 
        ##
        # Basic Settings
        ##
.... 중략

6. nginx 설정

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

 

server {
  listen 80;
  location / {
    root   /home/ubuntu/app/production;
    index  index.html index.htm;
    try_files $uri /index.html;
  }
}

 

server {
    listen 80;
    server_name your.domain.com;

    location / {
        root   /home/ubuntu/app/production;
        index  index.html index.htm;
        try_files $uri /index.html;
    }
}

7. nginx 재시작

sudo service nginx restart

 

 

 

8. 배포하기

배포 방법은 깃허브로 배포할 코드를 push > 서버로 접속 후 해당 코드를 pull > 아래 명령어를 실행

 

 

sh deploy.sh

 

---

ERROR - 포트 설정 방법

우분투 20.04 이용시 포트가 안열리면 해결 방법

https://www.vultr.com/docs/how-to-configure-uncomplicated-firewall-ufw-on-ubuntu-20-04/
 

sudo apt-get install ufw
sudo ufw enable

sudo ufw allow 80/tcp
sudo ufw allow 443/tcp
sudo ufw allow 22/tcp
sudo ufw allow mysql

 

현재 포트 상태 확인

 

sudo ufw status