[Next.js] 쉘 스크립트를 통한 배포 자동화

 

교수님의 서버에 배포한 서비스를 자동화 시키고 싶은데 깃허브 액션과 젠킨스 사용이 방화벽 이슈로 어려웠다.

그래서 생각한 방안이 배포 자동화 쉘 스크립트이다.

미리 작성한 쉘 스크립트를 실행 시키기만 하면 배포를 자동으로 해주는..

 

 

---

 

 

 

서버에 필요한 것

1. Node.js
2. pm2 (백 그라운드 실행)


이것만 있으면 됩니다.

 

 

 

쉘 스크립트 내용

 

중간 중간 ~/log/front-manager-deploy.log 파일에 로그를 찍습니다.

#!/bin/bash

# 마일리지 관리자 페이지 프론트앤드 pull -> build -> execute (pm2) 자동화

logFile="$HOME/log/front-manager-deploy.log"
SourceDir="SW-Milege-Front"


# 현재 날짜와 시간을 로그 파일에 기록
echo "Deployment 시작 시간: $(date)" > $logFile

cd ~


# 기존 레파지토리 삭제
echo "SW-Milege-Front 파일이 삭제됩니다..." && echo "SW-Milege-Front 파일이 삭제
됩니다..." >> $logFile
rm -rf $HOME/$SourceDir >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1


# 레파지토리 다시 clone
echo "새로운 깃레포를 가져옵니다..." && echo "새로운 깃레포를 가져옵니다..." >> $logFile
git clone https://github.com/HGU-WALAB/SW-Milege-Front.git >> $logFile 2>&1


# 미리 작성해둔 환경 변수 파일 복사
echo "환경 변수를 추가합니다..." && echo "환경 변수를 추가합니다..." >> $logFile
cp $HOME/secret/manager/.env $HOME/secret/manager/.env.local $HOME/secret/manager/.env.production $HOME/$SourceDir >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1


cd $HOME/$SourceDir


# clone해 온 레파지토리의 패키지 설치
echo "패키지를 설치합니다..." && echo "패키지를 설치합니다..." >> $logFile
npm install --force >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1


# 레파지토리 빌드
echo "빌드 합니다..." && echo "빌드 합니다..." >> $logFile
npm run build >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1


# 현재 돌아 가고 있는 서버 종료 (pm2 delete)
echo "기존 서버를 끕니다..."  && echo "기존 서버를 끕니다..." >> $logFile
pm2 delete "sw-mileage-admin" >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1


# pm2로 nextJS 백그라운드 실행
echo "새로운 서버를 시작합니다..." && echo "새로운 서버를 시작합니다..." >> $logFile
pm2 start "npm run start" --name "sw-mileage-admin" >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

pm2 ps && pm2 ps >> $logFile 2>&1

echo "마일리지 관리자 프론트앤드 배포 스크립트 완료..." && echo "마일리지 관리자
 프론트앤드 배포 스크립트 완료..." >> $logFile 2>&1

 

 

 

 

진행 순서

 

기존 레파지 토리 삭제
-> 레파지토리 클론
-> 미리 작성해둔 환경 변수 파일 복사
-> npm install (패키지 설치)
-> npm build (빌드)
-> pm2 delete (기존 서비스 종료)
-> pm2로 next.js 백그라운드 실행

 

 

 

 

이제 작성을 완료했으니 실행만 시키면 됩니다.

 

 

 

 

실행 방법

 

 

1) 서버의 Host , Username , Password 를 이용해 ssh로 접속

ssh username@host

-> password 입력

 

 

 

 

2) 스크립트 실행 권한 부여

 

먼저 실행할 스크립트로 이동합니다.

저는 ~/sw_mileage/sh-script 에 위치 시켜 두었습니다.

front-manager-deploy.sh가 위의 스크립트 입니다.

 

 

 

chmod 750 front-manager-deploy.sh

 

 

 

실행 권한이 생겼습니다.

 

 

 

 

 

3) 실행

 

./front-manager-deploy.sh

 

 

 

 

+ 추가로 리액트 배포를 위한 쉘 스크립트도 작성한 것이 있습니다.

 

리액트의 경우는 정적 배포를 진행 했기에 node.js, pm2가 필요하지 않습니다.

 

~/sh-script/front-student-deploy.sh

                                                                                              1,1          모두
#!/bin/bash

# 마일리지 학생 시스템 프론트앤드 배포 자동화 스크립트

logFile="$HOME/log/front-student-deploy.log"
SourceDir="SW-Mileage-Student-Front"

cd ~

# 현재 날짜와 시간을 로그 파일에 기록
echo "Deployment 시작 시간: $(date)" > $logFile

echo "SW-Mileage-Student-Front 폴더를 삭제합니다..." && echo "SW-Mileage-Student-Front 폴더를 삭제합니다..." >> $logFile 2>&1
rm -rf $HOME/$SourceDir >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

echo "새로운 깃레포를 가져옵니다..." && echo "새로운 깃레포를 가져옵니다..." >> $logFile 2>&1
git clone https://github.com/HGU-WALAB/SW-Mileage-Student-Front.git >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

echo "환경 변수를 가져옵니다..." && echo "환경 변수를 가져옵니다..." >> $logFile 2>&1
cp $HOME/secret/student/.env $HOME/$SourceDir >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

cd $HOME/$SourceDir

echo "패키지를 가져옵니다..." && echo "패키지를 가져옵니다..." >> $logFile 2>&1
npm install >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

echo "빌드를 진행합니다..." && echo "빌드를 진행합니다..." >> $logFile 2>&1
npm run build >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

echo "빌드 파일을 html 폴더로 옮깁니다..." && echo "빌드 파일을 html 폴더로 옮깁니다..." >> $logFile 2>&1
rm -rf $HOME/html/* >> $logFile 2>&1
cp -R $HOME/$SourceDir/build/* $HOME/html >> $logFile 2>&1
echo "" && echo "" >> $logFile 2>&1

echo "학생 시스템 스크립트 실행 완료..." && echo "학생 시스템 스크립트 실행 완료..." >> $logFile 2>&1

 

 

사용 방법은 Next.js와 같습니다.