AWS S3 + CloudFront + Bitbucket 배포 환경 구성을 이어서 적어보았다.
이전의 글 참고 🔽
https://eonhwa-theme.tistory.com/185
AWS S3 + CloudFront 배포 생성
실무에서 AWS S3 + CloudFront + Bitbucket 으로 배포환경을 구성하고 있다.설정하는 과정을 정리하였다. 🍒 CloudFront 가 뭐야?🍒 S3 + CloudFront 배포 생성은 어떻게 해? Amazon CloudFront
eonhwa-theme.tistory.com
🍒 AWS S3+CloudFront + Bitbucket 연동
Bitbucket pipeline
Bitbucket 이 내부적으로 클라우드에 컨테이너를 만들고 명령을 수행한다.
Bitbucket Pipelines 를 사용하면 수동으로 트리거할 수 있는 사용자 지정 파이프라인을 구성할 수 있다.
options:
Global options page
clone:
Git clone behavior page
definitions:
Cache and service container definitions page
image:
Docker image options page
pipeline:
Pipeline start options page
parallel:
Parallel step options page
stage:
Stage options page
step:
Step options page
레파지토리에 push 할 때마다 pipeline trigger 된다 [✳️ 특정 tag, branch, bookmark 를 trigger 로 설정 가능]
config file(bitbucket-pipelines.yml) 을 기반으로 빌드, 테스트, 배포를 자동화 할 수 있다.
배포 동작
1️⃣ Bitbucket 저장소에 코드를 커밋한다.
소스를 변경하고 Bitbucket 저장소에 코드를 커밋한다.
2️⃣ Bitbucket Pipeline 이 컨테이너를 생성한다.
코드가 커밋되면 자동으로 Bitbucket Pipeline이 실행된다.
Pipeline은 컨테이너를 만들어 명령을 수행할 수 있는 환경을 제공한다.
3️⃣ 배포할 이미지를 S3에 복사한다.
Pipeline 이 생성한 컨테이너에서 배포할 소스 코드를 압축한 이미지를 생성한다.
이 이미지를 AWS CLI 를 사용해 AWS S3 로 복사한다.
4️⃣ AWS CodeDeploy 에 배포를 생성한다.
Pipeline 이 생성한 컨테이너에서 AWS CLI 를 사용해 AWS CodeDeploy에 배포를 생성한다.
5️⃣ AWS CodeDeploy가 배포를 진행한다.
배포가 생성되면 AWS CodeDeploy 는 AWS S3에서 배포 이미지를 가져온다.
이미지를 압축 해제 한 다음 이미지에 포함된 스크립트에 따라 배포를 진행한다.
AWS S3+CloudFront + Bitbucket 연동
S3 와 cloudFront 설정이 완료되면, 아직 버킷에 파일이 없기에 CloudFront 에서 제공해주는 도메인 주소로 브라우저에서 접근해도 아무것도 볼 수 없다.
CloudFront에서 제공하는 도메인 형식. → https://~~.cloudfront.net
bitbucket의 pipeline 설정을 통해 버킷에 파일을 올린다.
루트 경로에 아래와 같이 bitbucket-pipelines.yml 파일을 생성하거나, 아래의 예시 파일을 참고한다.
pipelines:
branches:
develop:
// 위의 설정은 develop 브랜치가 머지되거나 커밋이 올라올 때마다 아래의 ci/cd 가 실행된다는 의미
pipelines:
branches:
tags:
// 위의 설정은 git tag 가 커밋에 붙을 경우, tag 의 네이밍에 따라 아래의 ci/cd 가 실행된다는 의미
[tag base] bitbucket-pipelines.yml
options:
docker: true
pipelines:
branches:
develop:
- step:
~~~~~~
tags:
dev/project-name/*:
- step:
oidc: true
name: build project-name development
image: node:18.19.1
caches: //캐시: Node.js 및 pnpm 캐시를 사용하여 빌드 속도를 향상시킵니다.
- node
- pnpm
script: //스크립트: 빌드 및 배포를 위한 스크립트를 실행
- export NODE_OPTIONS=--max_old_space_size=3072
- corepack enable
- corepack prepare pnpm@latest-8 --activate
- pnpm i
- pnpm project-name build:dev //프로젝트를 개발 환경으로 빌드
- pipe: atlassian/aws-s3-deploy:1.1.0 //AWS S3에 빌드된 애플리케이션을 배포
variables:
AWS_OIDC_ROLE_ARN: $AWS_OIDC_ROLE_ARN
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
S3_BUCKET: $S3_REVERP_DEVELOP_BUCKET_NAME
LOCAL_PATH: ''
EXTRA_ARGS: '--delete'
- pipe: atlassian/aws-cloudfront-invalidate:0.6.0 //AWS CloudFront 캐시를 무효화하여 변경 사항을 즉시 반영
variables:
AWS_OIDC_ROLE_ARN: $AWS_OIDC_ROLE_ARN
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
DISTRIBUTION_ID: ''
PATHS: '/index.html'
stag/project-name/*:
...위와 같이, 빗버킷에서 제공하는 ci/cd 환경에서 도커를 이용해 배포를 하게 된다.
script, S3_BUCKET, LOCAL_PATH, DISTRIBUTION_ID 부분을 보면
script:
- npx pnpm projectname:build:dev어떤 환경으로 프로젝트를 빌드하여 static 파일을 만들지를 정한다.
variables:
S3_BUCKET: $S3_SA_DEVELOP_BUCKET_NAME
LOCAL_PATH: 'packages/project/dist'
bitbucket의 레파지토리의 환경 변수에서,
- S3_BUCKET: 위에서 만든 버킷의 이름이 담긴 버킷 환경변수 값과,
- LOCAL_PATH: static 파일이 생성되어 위치할 파일 경로를 설정한다.
- pipe: atlassian/aws-cloudfront-invalidate:0.6.0
variables:
DISTRIBUTION_ID: 'CloudFront의 ID'- DISTRIBUTION_ID: cloudFront의 ID 값을 넣어줍니다.
bitbucket 환경설정도 완료되었습니다. 브랜치나, 태그를 이용하여 자동/수동으로 배포가 가능하다.
bitbucket 수동 배포
로컬환경에서 배포하고 싶은 브랜치 (develop or master) 로 이동한 뒤에 tag 를 하나 만든다.
git tag prod/projecct-name/20240428
// dev or prod (테스트 서버냐, 운영서버냐)
그 다음 해당 origin 으로 push 해준다.
git push origin prod/projecct-name/20240428
🌀그러면 파이프라인이 돌게 된다
'frond-end' 카테고리의 다른 글
| 웹 폰트 최적화 (Feat. cdn.jsdelivr.net 에러 사태 - 20240502) (0) | 2024.05.01 |
|---|---|
| AWS S3 + CloudFront 배포 생성 (1) | 2024.04.28 |
| jsPDF 이미지파일 pdf에 추가, 한글 깨짐 문제 (base64) (0) | 2024.04.27 |
| "모던 프론트엔드" 에 대해 (0) | 2024.03.30 |
| 로그아웃 시 다른 에러 상태 코드 도 같이 보여주는 문제 (axios + vue3) (0) | 2024.03.07 |
