AWS 리액트 배포 자동화 쉘 스크립트 작성하기

AWS로 리액트 빌드 폴더를 전송해보자

윈도우 기준으로 보고 있기 때문에 쉘 스크립트를 사용할 수 있는 환경을 각자 셋팅을 하고 해야 한다. 필자는 git bash를 사용해서 쉘 스크립트를 실행하였다.

scp를 사용하자

• 우선 빌드 폴더를 scp를 사용하여 폴더를 전송하려고 한다.
• scp 를 사용할 때 단일 파일 전송 명령어는 아래와 같다.

scp [옵션] [파일명] [원격지_id]@[원격지_ip]:[받는 위치]

• 디렉토리를 전송할때는 -r 옵션을 사용한다.

scp [옵션] [디렉터리 이름] [원격지_id]@[원격지_ip]:[보낼 경로]
scp -r build id@ip:경로

scp로 aws로 전송이 되는지 확인하기

• aws 에 접속을 할때는 pem을 사용할것이므로 해당 명령어를 사용할 계획이다.
• -i 옵션 뒤에는 pem 개인키 경로를 넣어줘야한다.

scp -r -i [pem파일경로] [업로드할 폴더이름] [ec2-user계정명]@[ec2 instance의 public DNS]:~/[경로]

• 우선 민감정보와 변경되는 변수들은 env를 사용할것이다.
• 사용되는 env 파일이다.

AWS_PEM="PEM 주소"
AWS_USER="AWS 유저명"
AWS_DELETE_ROUTE="/home/ubuntu/~~/build"
AWS_ROUTE="/home/ubunt/~~경로"

env 파일 주의사항! AWS_PEM=”PEM 주소” 이렇게 선언할 때
AWS_PEM = “PEM 주소“ 이렇게 “=” 사이에 공백이 존재할경우 에러가 뜰수있다.
AWS_DELETE_ROUTE 값은 후에 폴더 삭제를 위한 경로 값이다.

scp 전송 쉘 스크립트

• env파일은 필자는 .deploy.env 파일로 사용할것이다.
• 그래서  " source .deploy.env "로 사용하였고
• .env 파일을 사용하려며 " source .env " 를 사용하면 된다.

#!/bin/bash

source .deploy.env

echo "> AWS로 build 폴더 전송 "
scp -r -i $(AWS_PEM) ./build $(AWS_USER)@$(AWS_IP):$(AWS_ROUTE)

• 해당 스크립트를 실행하게 될 경우 아래와 같이 파일들이 전송이 된다면 성공한것이다.

scp 전송 전 aws에 있는 폴더 제거하기

• scp를 통해 전송을 하면 파일과 디렉토리가 덮어씌워지지만 폴더가 삭제가 되는 것은 아니다.
• 그러므로 ssh 접속을 통해 원래 있는 폴더를 제거할 것이다.

폴더 삭제 쉘 스크립트

ssh -i $AWS_PEM $AWS_USER@$AWS_IP "rm -rf $AWS_ROUTE"

• 위 코드를 실행하면 깔끔하게 폴더가 삭제가 될것이다!

진짜 자동화

• 자동화 배포 스크립트의 순서는 아래와 같습니다.

1. 리액트 패키지 설치
2. 리액트 빌드
3. aws 에 존재하는 build폴더 삭제
4. 리액트 build 폴더 scp로 aws에 전송

• 필자는 yarn 을 쓸것이기 때문에 yarn 을 기준으로 코드를 짜겠다.
• echo 앞과 뒤에 있는  \033[32m 과 \033[0m 코드는 출력 색을 바꾸는 코드이다.

#!/bin/bash

source .deploy.env

echo "\\033[32m> env 파일 값 체크 \\033[0m"
echo $AWS_PEM
echo $AWS_USER
echo $AWS_IP
echo $AWS_ROUTE

echo -e "\\033[32m > 1. 패키지 업데이트 \\033[0m"
yarn install

echo -e "\\033[32m > 2. 리액트 빌드 \\033[0m"
yarn build

echo -e "\\033[32m > 3. AWS 폴더 삭제 \\033[0m"
ssh -i $AWS_PEM $AWS_USER@$AWS_IP "rm -rf $AWS_ROUTE"

echo -e "\\033[32m > 4. AWS로 build 폴더 전송 \\033[0m"
scp -r -i $AWS_PEM ./build $AWS_USER@$AWS_IP:$AWS_ROUTE