안녕하세요! 이전 글 "AWS S3 + CloudFront 배포환 생성"에 이어, 이번에는 Bitbucket Pipelines를 활용하여 S3와 CloudFront 배포를 자동화하는 CI/CD 환경 구축 방법을 작성해봤습니다.
이 글을 통해 개발자가 소스 코드를 Bitbucket 저장소에 푸시하는 것만으로 빌드, 테스트, S3 업로드, CloudFront 캐시 무효화까지 자동으로 이루어지는 효율적인 배포 파이프라인을 구축할 수 있게 됩니다.
이 글에서 다룰 내용
- Bitbucket Pipelines란 무엇인가?
- Bitbucket Pipelines와 AWS 연동을 위한 OIDC 설정 (권장)
- `bitbucket-pipelines.yml` 파일 상세 분석 및 작성법
- 브랜치 및 태그 기반 파이프라인 트리거
- Docker 이미지 활용 및 캐싱 전략
- Atlassian Pipes를 활용한 S3 배포 및 CloudFront 캐시 무효화
- Bitbucket Repository Variables 설정 및 활용
- 수동 배포 (태그 푸시) 방법
이전의 글 참고 🔽
https://eonhwa-theme.tistory.com/185
AWS S3 + CloudFront 배포 생성
실무에서 AWS S3 + CloudFront + Bitbucket 으로 배포환경을 구성하고 있다.설정하는 과정을 정리하였다. 🍒 CloudFront 가 뭐야?🍒 S3 + CloudFront 배포 생성은 어떻게 해? Amazon CloudFront
eonhwa-theme.tistory.com
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) 을 기반으로 빌드, 테스트, 배포를 자동화 할 수 있습니다.
주요 특징:
- `bitbucket-pipelines.yml` 기반 설정: 저장소 루트 디렉터리에 YAML 파일을 추가하여 파이프라인을 정의합니다.
- Docker 컨테이너 활용: 각 파이프라인 단계는 지정된 Docker 컨테이너 내에서 실행되어 일관된 환경을 제공합니다.
- 다양한 트리거: 특정 브랜치, 태그, 북마크 등에 대한 푸시를 감지하여 파이프라인을 실행할 수 있습니다.
- Atlassian Pipes: AWS, Google Cloud, Azure 등 다양한 외부 서비스와의 통합을 간편하게 해주는 사전 빌드된 스크립트(파이프)를 제공합니다.
- OIDC 지원: AWS와 같은 클라우드 제공업체와 안전하게 인증하기 위한 OpenID Connect를 지원하여 장기 자격 증명을 코드에 저장할 필요가 없습니다.
Bitbucket Pipelines와 AWS 연동을 위한 OIDC 설정 (매우 중요 및 권장)
과거에는 AWS 자격 증명(Access Key ID, Secret Access Key)을 Bitbucket Repository Variables에 직접 저장하여 사용했지만, 이는 보안상 권장되지 않습니다.
대신 OIDC(OpenID Connect)를 사용하여 Bitbucket Pipelines가 AWS 리소스에 안전하게 접근하도록 설정하는 것이 좋습니다.
OIDC 설정 개요:
- AWS IAM에서 ID 공급자(Identity Provider) 생성: Bitbucket을 신뢰할 수 있는 ID 공급자로 등록합니다.
- IAM 역할(Role) 생성: Bitbucket Pipelines가 맡을 수 있는 역할을 만들고, 이 역할에 필요한 최소한의 권한(예: 특정 S3 버킷에 대한 `s3:PutObject`, `s3:DeleteObject` 및 특정 CloudFront 배포에 대한 `cloudfront:CreateInvalidation` 권한)을 부여합니다. 이 역할의 신뢰 관계는 1단계에서 생성한 ID 공급자를 지정합니다.
- Bitbucket Repository Variables 설정:
- `AWS_OIDC_ROLE_ARN`: 2단계에서 생성한 IAM 역할의 ARN을 저장합니다.
- `AWS_DEFAULT_REGION`: AWS 리전(예: ap-northeast-2)을 저장합니다.
이 설정을 통해 Bitbucket Pipelines는 AWS 자격 증명 없이 임시 보안 자격 증명을 동적으로 받아 IAM 역할을 수임(assume)하여 AWS 서비스와 상호 작용할 수 있습니다.
참고: Bitbucket 공식 문서 및 AWS 공식 문서에서 OIDC 설정에 대한 자세한 단계별 가이드를 확인할 수 있습니다.
bitbucket-pipelines.yml 파일 상세 분석 및 작성법
저장소의 루트 디렉터리에 bitbucket-pipelines.yml 파일을 생성하고 파이프라인을 정의합니다.
# 사용할 Docker 이미지를 정의합니다.
# node 이미지를 사용하고 버전을 명시하는 것이 좋습니다.
image: node:18.19.1 # 예시 버전, 프로젝트에 맞는 LTS 버전 사용 권장
options:
docker: true # 파이프라인 단계에서 Docker 명령을 사용하려면 true로 설정
# max-time: 10 # 파이프라인 최대 실행 시간 (분)
definitions:
caches: # 반복적인 빌드 속도 향상을 위한 캐시 정의
pnpm: ~/.local/share/pnpm/store/v3 # pnpm 사용 시
# yarn: /opt/yarn-cache # yarn 사용 시
# npm: ~/.npm # npm 사용 시
# services: # 데이터베이스 등 서비스 컨테이너를 사용할 경우
# postgres:
# image: postgres:14
# variables:
# POSTGRES_DB: testdb
# POSTGRES_USER: user
# POSTGRES_PASSWORD: password
pipelines:
# 특정 브랜치에 푸시될 때 실행되는 파이프라인
branches:
main: # 'main' 브랜치에 변경 사항이 푸시될 때 실행
- step:
name: Build and Deploy to Production
oidc: true # AWS OIDC 인증 사용
caches:
- node # Node.js 모듈 캐시 (package-lock.json 또는 yarn.lock 기반)
- pnpm # 정의된 pnpm 캐시 사용
script:
# 환경 변수 설정 (메모리 부족 문제 방지)
- export NODE_OPTIONS=--max_old_space_size=4096
# pnpm 활성화 (corepack 사용 권장)
- corepack enable
- corepack prepare pnpm@latest-8 --activate # 프로젝트에 맞는 pnpm 버전 사용
# 의존성 설치
- pnpm install --frozen-lockfile # lockfile을 기반으로 정확한 버전 설치
# 프로덕션 빌드 (프로젝트의 빌드 스크립트에 맞게 수정)
- pnpm run build:prod
# AWS S3로 배포 (atlassian/aws-s3-deploy 파이프 사용)
- pipe: atlassian/aws-s3-deploy:1.1.0
variables:
AWS_OIDC_ROLE_ARN: $AWS_OIDC_ROLE_ARN # Bitbucket Repository Variable
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION # Bitbucket Repository Variable
S3_BUCKET: $S3_PRODUCTION_BUCKET_NAME # Bitbucket Repository Variable (예: your-prod-bucket)
LOCAL_PATH: 'dist' # 빌드 결과물이 있는 로컬 경로 (프로젝트에 맞게 수정)
ACL: 'private' # S3 객체 ACL (CloudFront OAC 사용 시 private 권장)
CACHE_CONTROL: 'max-age=31536000, public' # 브라우저 캐싱 설정 (예: 1년)
EXTRA_ARGS: '--delete' # S3 버킷에 없는 파일은 삭제 (동기화)
# AWS CloudFront 캐시 무효화 (atlassian/aws-cloudfront-invalidate 파이프 사용)
- pipe: atlassian/aws-cloudfront-invalidate:0.6.0
variables:
AWS_OIDC_ROLE_ARN: $AWS_OIDC_ROLE_ARN # Bitbucket Repository Variable
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION # Bitbucket Repository Variable
DISTRIBUTION_ID: $CLOUDFRONT_PRODUCTION_DISTRIBUTION_ID # Bitbucket Repository Variable
PATHS: '/*' # 무효화할 경로 (모든 파일: /*, 특정 파일: /index.html /css/style.css)
develop: # 'develop' 브랜치에 변경 사항이 푸시될 때 실행
- step:
name: Build and Deploy to Development
oidc: true
caches:
- node
- pnpm
script:
- export NODE_OPTIONS=--max_old_space_size=3072
- corepack enable
- corepack prepare pnpm@latest-8 --activate
- pnpm install --frozen-lockfile
- pnpm run build:dev # 개발 환경 빌드 스크립트
- pipe: atlassian/aws-s3-deploy:1.1.0
variables:
AWS_OIDC_ROLE_ARN: $AWS_OIDC_ROLE_ARN
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
S3_BUCKET: $S3_DEVELOPMENT_BUCKET_NAME # Bitbucket Repository Variable (예: your-dev-bucket)
LOCAL_PATH: 'dist' # 프로젝트 빌드 결과 경로
ACL: 'private'
EXTRA_ARGS: '--delete'
- pipe: atlassian/aws-cloudfront-invalidate:0.6.0
variables:
AWS_OIDC_ROLE_ARN: $AWS_OIDC_ROLE_ARN
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
DISTRIBUTION_ID: $CLOUDFRONT_DEVELOPMENT_DISTRIBUTION_ID # Bitbucket Repository Variable
PATHS: '/*' # 개발 환경에서는 자주 변경되므로 '/*' 사용이 편리할 수 있음
# Git 태그가 푸시될 때 실행되는 파이프라인 (수동 배포에 활용)
tags:
'prod/*': # 'prod/'로 시작하는 태그 (예: prod/v1.0.0)
- step:
name: Tagged Production Deployment
# 위 main 브랜치의 step과 동일한 내용으로 구성 가능 (코드 중복을 줄이기 위해 YAML anchors 사용 가능)
# 여기서는 간단히 참조만 언급
# <<: *production_deployment_step # YAML anchor를 사용한 예시 (별도 정의 필요)
oidc: true
caches:
- node
- pnpm
script:
- export NODE_OPTIONS=--max_old_space_size=4096
- corepack enable
- corepack prepare pnpm@latest-8 --activate
- pnpm install --frozen-lockfile
# 태그 기반 배포 시에는 프로덕션 빌드 실행
- pnpm run build:prod
- pipe: atlassian/aws-s3-deploy:1.1.0
variables:
AWS_OIDC_ROLE_ARN: $AWS_OIDC_ROLE_ARN
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
S3_BUCKET: $S3_PRODUCTION_BUCKET_NAME
LOCAL_PATH: 'dist'
ACL: 'private'
CACHE_CONTROL: 'max-age=31536000, public'
EXTRA_ARGS: '--delete'
- pipe: atlassian/aws-cloudfront-invalidate:0.6.0
variables:
AWS_OIDC_ROLE_ARN: $AWS_OIDC_ROLE_ARN
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
DISTRIBUTION_ID: $CLOUDFRONT_PRODUCTION_DISTRIBUTION_ID
PATHS: '/*'
'dev/*': # 'dev/'로 시작하는 태그 (예: dev/feature-xyz)
- step:
name: Tagged Development Deployment
oidc: true
caches:
- node
- pnpm
script:
- export NODE_OPTIONS=--max_old_space_size=3072
- corepack enable
- corepack prepare pnpm@latest-8 --activate
- pnpm install --frozen-lockfile
- pnpm run build:dev
- pipe: atlassian/aws-s3-deploy:1.1.0
variables:
AWS_OIDC_ROLE_ARN: $AWS_OIDC_ROLE_ARN
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
S3_BUCKET: $S3_DEVELOPMENT_BUCKET_NAME
LOCAL_PATH: 'dist'
ACL: 'private'
EXTRA_ARGS: '--delete'
- pipe: atlassian/aws-cloudfront-invalidate:0.6.0
variables:
AWS_OIDC_ROLE_ARN: $AWS_OIDC_ROLE_ARN
AWS_DEFAULT_REGION: $AWS_DEFAULT_REGION
DISTRIBUTION_ID: $CLOUDFRONT_DEVELOPMENT_DISTRIBUTION_ID
PATHS: '/*'
YAML 파일 주요 구성 요소 설명:
- `image`: 파이프라인의 기본 Docker 이미지를 지정합니다. Node.js 프로젝트의 경우 특정 버전의 node 이미지를 사용하는 것이 좋습니다.
- `options.docker: true`: 파이프라인 내에서 Docker 명령(예: Docker 이미지 빌드)을 사용하려면 true로 설정합니다.
- `definitions.caches`: `pnpm`, `npm`, `yarn` 등의 패키지 매니저 캐시를 정의하여 빌드 시간을 단축합니다.
- `pipelines.branches`: 특정 브랜치에 변경 사항이 푸시될 때 실행할 파이프라인을 정의합니다. (예: `main`, `develop`)
- `pipelines.tags`: 특정 패턴의 Git 태그가 푸시될 때 실행할 파이프라인을 정의합니다. (예: `prod/*, dev/feature-*`)
- `step`: 파이프라인의 각 실행 단위를 나타냅니다.
- `name`: 단계의 이름을 지정합니다.
- `oidc: true`: 이 단계에서 AWS OIDC 인증을 사용하도록 설정합니다.
- `caches`: 이 단계에서 사용할 캐시를 지정합니다.
- `script`: 실제 실행할 셸 명령어를 나열합니다.
- `export NODE_OPTIONS=--max_old_space_size=XXXX`: Node.js 실행 시 최대 메모리 사용량을 늘려 빌드 중 메모리 부족 오류를 방지합니다. 프로젝트 크기에 따라 조절합니다.
- `corepack enable` 및 `corepack prepare pnpm@... --activate`: Node.js에 내장된 Corepack을 사용하여 pnpm 버전을 관리하고 활성화합니다. (Yarn Berry 등 다른 패키지 매니저도 유사하게 관리 가능)
- `pnpm install --frozen-lockfile`: `pnpm-lock.yaml` 파일에 명시된 정확한 버전의 의존성을 설치합니다. (npm은 npm ci, yarn은 yarn install --frozen-lockfile)
- `pnpm run build:prod` / `pnpm run build:dev`: `package.json`에 정의된 빌드 스크립트를 실행합니다. 환경별로 다른 빌드 명령을 사용합니다.
- `pipe: atlassian/aws-s3-deploy:1.1.0`: Atlassian에서 제공하는 S3 배포 파이프입니다.
- `AWS_OIDC_ROLE_ARN`: OIDC 설정 시 Bitbucket 변수로 전달된 IAM 역할 ARN.
- `AWS_DEFAULT_REGION`: 대상 AWS 리전.
- `S3_BUCKET`: 배포할 S3 버킷 이름 (Bitbucket 변수 사용).
- `LOCAL_PATH`: S3에 업로드할 파일들이 있는 로컬 경로 (빌드 결과물 경로, 예: dist, build).
- `ACL`: 업로드될 객체의 접근 제어 목록. CloudFront OAC를 사용하는 경우 private으로 설정하여 S3 객체에 직접 접근하는 것을 막고 CloudFront를 통해서만 접근하도록 합니다.
- `CACHE_CONTROL`: 브라우저 및 CDN 캐싱 동작을 제어하는 HTTP 헤더입니다. max-age는 초 단위입니다. (예: max-age=31536000은 1년)
- `EXTRA_ARGS: '--delete'`: LOCAL_PATH에는 있지만 S3 버킷에는 없는 파일을 S3에서 삭제하여 동기화합니다.
- `pipe: atlassian/aws-cloudfront-invalidate:0.6.0`: Atlassian에서 제공하는 CloudFront 캐시 무효화 파이프입니다.
- `DISTRIBUTION_ID`: 캐시를 무효화할 CloudFront 배포 ID (Bitbucket 변수 사용).
- `PATHS`: 무효화할 객체의 경로입니다.
- `'/*'` : 모든 객체를 무효화합니다. 변경 사항이 많거나 확실하지 않을 때 사용하지만, 비용이 발생할 수 있고 무효화에 시간이 더 걸릴 수 있습니다.
- `'/index.html'` 또는 `'/css/style.css /js/app.js'` : 특정 파일만 무효화합니다. 더 빠르고 비용 효율적입니다. CI/CD에서는 변경된 파일 목록을 동적으로 생성하여 전달하는 것이 가장 좋습니다.
Bitbucket Repository Variables 설정 및 활용
파이프라인 스크립트에 민감한 정보(AWS 계정 정보, 버킷 이름, 배포 ID 등)를 직접 하드코딩하는 대신,
Bitbucket의 Repository Variables를 사용해야 합니다.
- Bitbucket 저장소의 [Repository settings] > [PIPELINES] > [Repository variables] 로 이동합니다.
- 다음과 같은 변수들을 추가합니다 (앞의 YAML 예시 기준):
- AWS_OIDC_ROLE_ARN: OIDC 설정 시 생성한 IAM 역할의 ARN.
- AWS_DEFAULT_REGION: AWS 리전 (예: ap-northeast-2).
- S3_PRODUCTION_BUCKET_NAME: 프로덕션 환경 S3 버킷 이름.
- S3_DEVELOPMENT_BUCKET_NAME: 개발 환경 S3 버킷 이름.
- CLOUDFRONT_PRODUCTION_DISTRIBUTION_ID: 프로덕션 환경 CloudFront 배포 ID.
- CLOUDFRONT_DEVELOPMENT_DISTRIBUTION_ID: 개발 환경 CloudFront 배포 ID.
- (선택) NODE_ENV: production 또는 development 등 빌드 스크립트에서 참조할 환경 변수.
보안:민감한 정보(예: 과거 방식의 AWS Secret Key)는 반드시 Secured옵션을 체크하여 암호화합니다.
OIDC를 사용하면AWS_OIDC_ROLE_ARN만 필요하므로 Secret Key를 저장할 필요가 없어 더 안전합니다.
수동 배포 (태그 푸시) 방법
bitbucket-pipelines.yml의 tags 섹션에 정의된 패턴에 맞는 태그를 로컬에서 생성하고 원격 저장소로 푸시하면 해당 파이프라인이 실행됩니다.
예시 (프로덕션 태그 배포):
1. 로컬 저장소에서 배포하려는 커밋으로 이동합니다.
2. 프로덕션 배포용 태그를 생성합니다 (YAML 설정에서 `prod/*` 패턴 사용 시)
git tag prod/v1.2.0
3. 생성한 태그를 Bitbucket 원격 저장소로 푸시합니다.
git push origin prod/v1.2.0
이 명령을 실행하면 Bitbucket Pipelines는 `tags: prod/*` 에 정의된 파이프라인을 트리거하여 프로덕션 환경으로 빌드 및 배포를 진행합니다. 🌀파이프라인이 돌게 된다
개발 환경 배포도 `dev/*` 와 같은 패턴의 태그를 사용하여 동일한 방식으로 진행할 수 있습니다.
결론
Bitbucket Pipelines와 AWS S3/CloudFront를 OIDC 인증과 함께 사용하면 안전하고 효율적인 프론트엔드 CI/CD 환경을 구축할 수 있습니다.
주요 핵심 사항:
▶️ OIDC 사용 : AWS 자격 증명을 직접 사용하지 않고 IAM 역할을 통해 안전하게 AWS 리소스에 접근합니다.
▶️ 환경별 분리 : 개발,스테이징, 프로덕션 환경별로 브랜치 또는 태그를 사용하고, 이에 맞는 S3 버킷, CloudFront 배포, Repository Variables 를 구성합니다.
▶️ 캐싱전략 : `definitions.caches` 를 사용하여 빌드 시간을 단축하고, `aws-s3-deploy` 파이프의 `CACHE_CONTROL` 설정을 통해 브라우저/CDN 캐시를 적절히 관리합니다.
▶️ 캐시무효화 : `aws-cloudfront-invalidate` 파이프를 사용하여 변경 사항을 즉시 반영합니다. 모든 파일을 무효화(`/*`) 하는 것보다 변경된 파일만 무효화하는 것이 더 효율적입니다.
▶️ 명확한 `bitbucket-pipelines.yml`: 가독성 있고 유지보수하기 쉬운 YAML 파일을 작섭합니다. 필요시 YAML anchors 를 사용하여 중복을 줄일 수 있습니다,.
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 환경설정도 완료되었습니다. 브랜치나, 태그를 이용하여 자동/수동으로 배포가 가능합니다.
'frond-end' 카테고리의 다른 글
크롬 브라우저 비밀번호 자동 완성, 이렇게 하면 완벽 차단 (feat. formkit) (0) | 2025.01.07 |
---|---|
웹 폰트 최적화 (Feat. cdn.jsdelivr.net 에러 사태 - 20240502) (1) | 2024.05.01 |
jsPDF 이미지파일 pdf에 추가, 한글 깨짐 문제 (base64) (2) | 2024.04.27 |
"모던 프론트엔드" 에 대해 (1) | 2024.03.30 |
로그아웃 시 다른 에러 상태 코드 도 같이 보여주는 문제 (axios + vue3) (1) | 2024.03.07 |