반응형
이전 포스팅에서 Docker와 AWS EC2를 활용하여 http 배포에 성공하였다.
그런데 만약 코드에서 수정사항을 배포된 주소에 반영하려면 다시 재배포 해야하는데, 이를 수동으로 하려면 생각만하도 너무 귀찮다.
이런 상황을 위해 Github Actions를 활용하여 CI/CD를 적용해보자.
최종 배포될 브랜치는 main 브랜치이므로 main 브랜치에 push가 감지되면 실행할 작업(Workflow)를 설정해야 한다.
github 레포로 가서 루트 경로의 .github/workflows 위치에 yml 파일을 생성해준다. 나는 prod.yml 파일을 해당 경로에 생성해 주었다.
name: Docker
on:
push:
branches: [main]
jobs:
build:
runs-on: ubuntu-latest
steps:
- name: Checkout
uses: actions/checkout@v2
# 도커 이미지에 env 파일 포함
- name: Create .env file
run: |
echo "REACT_APP_BASE_URL=${{ secrets.REACT_APP_BASE_URL }}" >> ./.env
# 도커 메타
- name: Docker meta
id: docker_meta
uses: crazy-max/ghaction-docker-meta@v1
with:
images: brian990614/graduation-project-front
tag-semver: |
{{version}}
{{major}}.{{minor}}
# 도커 빌드 관련 셋업
- name: Set up Docker Buildx
uses: docker/setup-buildx-action@v1
# 내 도커허브 로그인
- name: Login to DockerHub
uses: docker/login-action@v1
with:
username: ${{ secrets.DOCKERHUB_USERNAME }}
password: ${{ secrets.DOCKERHUB_TOKEN }}
# 도커이미지 빌드하고 허브로 푸쉬
- name: Build and push
uses: docker/build-push-action@v2
with:
context: .
file: ./Dockerfile.prod
platforms: linux/amd64
push: true
tags: ${{ steps.docker_meta.outputs.tags }}
labels: ${{ steps.docker_meta.outputs.labels }}
# EC2에 Docker 이미지 배포
- name: Deploy to EC2
uses: appleboy/ssh-action@master
with:
host: ${{ secrets.EC2_HOST }} # EC2 인스턴스의 호스트 주소
username: ${{ secrets.EC2_USERNAME }} # EC2 인스턴스의 사용자 이름
key: ${{ secrets.EC2_SSH_KEY }} # EC2 인스턴스에 접속하기 위한 SSH 키
script: |
# Docker 이미지 가져오기
sudo docker pull brian990614/graduation-project-front:main
sudo docker stop no18-project-front || true
sudo docker rm no18-project-front || true
sudo docker run -d --name no18-project-front -p 3000:3000 brian990614/graduation-project-front:main
맨 위에 main 브랜치의 push 감지 시 workflow가 실행될 수 있도록 설정해주었다. 이제 name별로 각 단계를 파헤쳐보자.
Checkout
- 우리가 특정 브랜치로 이동 시 checkout 명령어를 사용하는 것처럼, Github Actions 에서도 CI서버로 우리 코드를 내려받은 후 특정 브랜치로 전환하는 과정이 필수적이다.
- 이런 checkout 과정을 수동으로 매번 하기 번거롭기 때문에 사람들이 일련의 과정을 묶어 action으로 제공하고 있다.
- uses를 통해 해당 action을 사용할 수 있다.
Create .env file
- env 파일은 보통 .gitignore 파일에 포함되어 github레포에 올라오지 않으므로 리눅스 환경에 직접 환경변수를 설정해주어야 한다.
- github secrets를 통해 값을 숨기고, 숨긴 값을 secrets. 로 불러와서 .env파일에 적용해주는 방식이다.
- 레포의 settings -> Secrets and variables -> Actions 에서 github secrets를 설정할 수 있다.
Docker meta
- action을 사용하여 도커 이미지의 메타 데이터를 생성한다.
- 생성된 메타 데이터는 Build and Push 에서 사용된다.
Set up Docker Buildx
- action을 사용하여 도커에 로그인을 한다
- 도커 아이디와 비밀번호는 중요한 정보이므로 github secrets로 설정해주고 사용한다.
Build and push
- action을 사용하여 도커 이미지를 빌드하고 Docker hub에 push 한다.
- 이전에 만들어 둔 도커 파일을 사용하여 이미지를 빌드해야 한다. 해당 파일을 지정해주자.
- 이 과정에서 위에서 생성한 메타 데이터를 사용하여 tag와 label를 사용한다. tag는 해당 workflow가 실행되는 브랜치 명으로 생성되는 것 같다.
백과 프론트가 같이 배포된다면 프론트는 이 과정까지만 자동화해주면 해당 이미지를 가져다가 docker-compose 로 여러 이미지를 한번에 묶어 컨테이너로 실행시키는 과정을 거치게 된다. 하지만 우리는 따로 배포를 진행하므로 인스턴스에 접근하여 컨테이너를 실행하기까지 과정도 자동화 시켜줘야한다.
Deploy to EC2
- action을 사용하여 인스턴스에 SSH로 접속한다.
- host에 해당 인스턴스의 public IP, username에 인스턴스의 사용자 이름(디폴트로 ec2-user), key에는 만들어준 ppk 형식의 키 파일을 pem 형식으로 바꾸어 준 값을 넣어준다(https://iamrealizer.tistory.com/52). 해당 값들은 github secrets로 설정해준다.
- 도커 이미지를 pull -> 현재 돌아가고 있는 컨테이너 중지 -> 돌아가고 있던 컨테이너 삭제 -> 새로운 컨테이너 실행의 과정을 script를 통해 지정해준다.
이렇게 Github Actions를 통해 yml 파일을 만들어주고 변경된 코드를 main 브랜치에 병합하게 되면 설정해준 workflow가 실행되면서 자동으로 재배포되게 된다!!!
레포지토리의 Actions 탭에서 해당 workflow 실행 과정을 확인할 수 있다.
반응형
'FrontEnd > React' 카테고리의 다른 글
Vite + Yarn Berry 구축기 - 1 (4) | 2023.12.06 |
---|---|
AWS EC2에 HTTPS 적용하기 (4) | 2023.11.28 |
Docker + AWS EC2 로 프론트 배포하기(2) (4) | 2023.11.26 |
Docker + AWS EC2 로 프론트 배포하기(1) (2) | 2023.11.26 |
Throttle & Debounce 란? (0) | 2023.08.31 |