개요
vue3 를 AWS EC2 에 자동으로 빌드하고 배포하는 workflow 를 작성한다.
github actions 를 이용해 자동 배포하며, vue 는 nginx 를 통해 서비스되도록 구성한다.
이전 포스팅 참고
이전 포스팅
이전 포스팅은 Spring 을 EC2 에 배포하는 방법을 알아보았다.
이번 포스팅은 Vue 를 EC2 에 배포하는 방법을 알아볼건데 이전 포스팅과 중복되는 내용은 생략한다.
ec2 구성
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
sudo apt update
sudo apt install ruby-full
sudo apt install wget
cd /home/ubuntu
ls -l
wget https://aws-codedeploy-ap-northeast-2.s3.ap-northeast-2.amazonaws.com/latest/install
ls -l
ls -l 하면 이전에는 없던 install 디렉토리가 하나 있을겁니다.
chmod +x ./install
sudo ./install auto
systemctl status codedeploy-agent
위 명령어로 code deploy 가 정상적으로 설치되었는지 확인한다.
Vue 만 띄울 EC2 를 만들건데, 이전 포스팅과 동일한 방법으로 만든다.
CodeDeploy 생성
CodeDeploy 를 만든다.
- 애플리케이션 생성을 클릭
- 이름을 지어주고
- 컴퓨팅 유형은 EC2/온프레미스를 선택한다.
그럼 바로 만들어진다
- 배포 그룹 생성 버튼을 클릭
- 배포 그룹 이름: 작성
- 서비스 역할: 이전 포스팅에서 만들었던 EC2-Deploy-Role 을 선택한다.
- 환경구성 : Amazon EC2 인스턴스 선택, 키: Name, 값: 위에서 만든 EC2
- 로드 밸런싱 활성화: 체크 해제
애플리케이션 이름과 배포 그룹 이름을 따로 메모해두자.
배포 그룹 생성 버튼을 클릭하면 끝이다.
nginx 설치
1
2
3
4
sudo apt-get install nginx
sudo service nginx status
위 명령어로 nginx 가 정상적으로 설치되었는지 확인한다.
1
2
3
4
5
6
7
8
sudo vim /etc/nginx/sites-available/default
를 입력하여 nginx 설정을 편집한다.
root /var/www/html; 를
root /var/www/html/dist; 로 수정한다.
try_files $uri $uri/ =404; 를
try_files $uri $uri/ /index.html; 로 수정한다.
저장하고 나와서 sudo service nginx restart 로 재시작하여 설정을 적용한다.
workflow 작성
EC2, S3, CodeDeploy, nginx 전부 준비됐다.
남은건 workflow 와 code deploy 가 수행할 동작을 정의하면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
## 워크플로우 이름 작성
name: deploy-to-ec2
## on 은 어떤 이벤트가 발생했을 때 워크플로우를 수행할지 결정한다.
# main 브런치에 push 하면 실행
on:
push:
branches:
- main
## 환경변수 설정
# 환경변수 모르면 그냥 변수라고 생각하자..
# key : value 구조이다.
env:
# AWS S3 버킷을 생성하고 해당 버킷이름을 변수에 저장한다.
S3_BUCKET_NAME: 내 빌드 파일이 저장될 버킷 이름
# 애플리케이션 이름과 배포그룹 이름을 변수에 저장한다.
CODE_DEPLOY_APPLICATION_NAME: 위에서 작성한 CodeDeploy 애플리케이션 이름
CODE_DEPLOY_DEPLOYMENT_GROUP_NAME: 위에서 작성한 CodeDeploy 배포그룹 이름
## 실행 할 job 목록
jobs:
vue-deployment:
# ubuntu 최신 버전에서 실행
runs-on: ubuntu-latest
# 이 Job 에서 수행할 동작들 작성
steps:
- name: Checkout
uses: actions/checkout@v3
- uses: actions/setup-node@v3
with:
node-version: '22'
# 나의 프로젝트는 spring과 vue 가 별도로 분리되어 있지 않고 같은 리포지토리를 공유한다.
# 그리고 ./frontend 경로에 있기 때문에 명시해준다. 만약 그렇지 않다면 명시할 필요 없다.
- name: Install dependencies
run: npm install
working-directory: ./frontend
- name: Build
run: |
npm run build
working-directory: ./frontend
- name: Make zip file
run: |
cd frontend
zip -r ../${GITHUB_SHA}_frontend.zip ./appspec.yml ./dist
shell: bash
# Github action secret 에서 값을 가져온다.
- name: Configure AWS credentials
uses: aws-actions/configure-aws-credentials@v1
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }} # IAM User 엑세스 키
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }} # IAM User 시크릿 엑세스 키
aws-region: ap-northeast-2 # aws-region 없으면 오류나서 추가함..
# 압축한 빌드 파일은 S3 로 복사한다.
- name: Upload to S3
run: aws s3 cp --region ap-northeast-2 ./${GITHUB_SHA}_frontend.zip s3://${{ env.S3_BUCKET_NAME }}/${GITHUB_SHA}_frontend.zip
# Code Deploy 를 이용해 S3 에서 EC2 로 빌드 파일을 가져오고, 배포한다.
# 정확한 동작은 appspec.yml 에 작성된 로직을 수행하는 것이다.
- name: Code Deploy
run: |
aws deploy create-deployment \
--deployment-config-name CodeDeployDefault.AllAtOnce \
--file-exists-behavior OVERWRITE \
--application-name ${{ env.CODE_DEPLOY_APPLICATION_NAME }} \
--deployment-group-name ${{ env.CODE_DEPLOY_DEPLOYMENT_GROUP_NAME }} \
--s3-location bucket=${{ env.S3_BUCKET_NAME }},key=${GITHUB_SHA}_frontend.zip,bundleType=zip \
--region ap-northeast-2
IAM User 액세스 키와 시크릿 액세스 키도 이전 포스팅을 참고한다.
다른 부분은 spring 에서 했던것과 동일하고 핵심은 build 와 make zip file 부분이다.
build 를 하면 결과물이 /dist 경로에 생긴다.
/dist 를 압축해서 S3 로 넘길건데, /dist 에는 appspec.yml 이 포함되지 않으므로 같이 압축한다.
중요한 점은 현재경로가 /전체프로젝트 이므로 ./frontend/appspec.yml ./frontend/dist 를 압축해버리면 CodeDeploy 배포과정에서 압축해제시 다음과 같이 된다.
1
2
3
4
5
6
frontend/
├── appspec.yml
└── dist/
├── index.html
├── js/
└── css/
CodeDeploy 는 appspec.yml 파일을 배포단위의 root 경로에서 찾으므로 없다고 간주한다.
따라서 압축할 때 appspec.yml 이 root 경로에 올 수 있도록 잘 생각해야 한다. 나는 cd frontend 를 했다.
그럼 아래와 같이 된다.
1
2
3
4
5
appspec.yml
dist/
├── index.html
├── js/
└── css/
appspec 작성
프로젝트의 루트 경로에 appspec.yml 을 작성하면 된다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
version: 0.0
os: linux
# source 에 있는 파일들을 destination 으로 복사한다.
# source 는 appspec.yml 파일을 기준으로 상대경로가 된다.
# source: / 이렇게 작성하면 os 기준으로 root 경로가 아니라 appspec.yml 파일이 있는 위치이다.
# 즉 다음 내용은 appspec.yml 파일이 위치한 경로에 있는 모든 파일을 destination 으로 복사한다.
files:
- source: /
destination: /var/www/html
overwrite: yes
# 권한 부여
# object : 권한을 부여할 대상 지정
permission:
- object: /var/www/html/dist
owner: ubuntu
group: ubuntu
mode: 755
nginx 가 파일을 서빙할 수 있도록 /dist 폴더를 /var/www/html 로 옮긴다.
인바운드 규칙 설정
빌드와 배포 모든 과정이 끝났으므로 외부에서 접속할 수 있게 인바운드 규칙을 설정한다.
EC2 -> 보안 -> 보안그룹 -> 인바운드 규칙 편집 -> HTTP, 80 포트와 사용자 지정 TCP, 8080 포트를 추가한다.
References
https://develop-706.tistory.com/29