React 프로젝트 자동배포
실제 Front Web 프로젝트를 서비스하기 위해
어떻게 배포하나요~?
관리 중인 git을 통해
commit or push 만으로도
실제 서비스 배포가 적용되면 얼마나 편할까요?
AWS Cloudfront와
Bitbucket pipelines를 통해
자동 배포를 간단하고 빠르게 구성해보겠습니다.
준비물은
사용 중인 bitbucket
사용중인 AWS 계정
각각의 대한 설명은 추후에 여유 생기면
보완하여 작성하도록 할게요!
React 프로젝트 생성
아주 간단하게 사용될
기본 React 프로젝트를 생성해보겠습니다.
우선
테스트로 사용될
Bitbucket Repository를 생성해주었습니다.
단순히 Repository 생성!
create-react-app cloudfront-pipeline-test
명령어를 통해 기본 프로젝트를 생성해주었습니다.
cd cloudfront-pipeline-test
를 통해 해당 경로로 이동,
그리고 아래 명령어를 순차적으로 날려주었습니다
git remote add origin git@bitbucket.org:*****/cloudfront-pipeline-test.git
git branch -M main
git push -u origin main
아참, remote add origin ~~~
뒤에 나오는 경로는
clone 하기 위해 나오는 경로를 써주시면 됩니다!!
그리고 간단하게 한 번 실행해보죠!
아주 기본적인 React Project 가 실행이 잘 되네요!
그럼 이제 이 프로젝트에 파일 하나를 추가해보겠습니다.
bitbucket-pipelines.yml
image: node:10.15.3
pipelines:
branches:
develop:
- step:
name: build and s3 deploy
script:
- npm ci
- npm run build
- pipe: atlassian/aws-s3-deploy:1.1.0
variables:
AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
AWS_DEFAULT_REGION: "ap-northeast-2"
S3_BUCKET: "S3버킷"
LOCAL_PATH: "build"
EXTRA_ARGS: "--delete"
- step:
name: cloudfront invalidate
script:
- pipe: atlassian/aws-cloudfront-invalidate:0.6.0
variables:
AWS_ACCESS_KEY_ID: $AWS_ACCESS_KEY_ID
AWS_SECRET_ACCESS_KEY: $AWS_SECRET_ACCESS_KEY
AWS_DEFAULT_REGION: "ap-northeast-2"
DISTRIBUTION_ID: "클라우드 프론트 아이디"
순차적으로 읽어보면,
pipelines의 기능을 사용할 것이고,
git의 push를 통해 소스가 올라가면
root에 있는 bitbucket-pipelines.yml 파일을 읽어
branch develop의 반응하여
순차적으로 코드를 실행시켜 준다고 이해하면 됩니다.
s3버킷의 프로젝트를 빌드하고,
아래 두 번째 -step 은 이전 배포 상태의 프로젝트를
삭제하여 새로 배포한다고 이해하면 될 것 같네요.
무튼 파일을 만들었으니 실제
배포를 위해 s3를 만들어볼게요.
저는 똑같이 cloudfront-pipeline-test
이름으로 생성해주었고,
딱히 별다른 설정 없이 바로 생성을 완료하였습니다.
그러고, 접근 액세스 키를 만들어주어야 합니다.
AWS의 IAM접속을 합니다.
그리고 사용자를 클릭!
그리고 나서 사용자 추가를 해주겠습니다.
이러한 과정에서 생성되는 사용자는
보안을 위해 특정 접근 키를 생성하는 과정이라고 보시면 됩니다.
실제 배포를 S3와 cloudfront를 활용하여 진행되기 때문에
접근을 위한 권한 정책을 설정해주고
해당 접근을 위한 키를 생성해야 합니다.
따라서 s3 및 cloudfront 정책을 우선 FullAccess로 설정해주었습니다.
이후 다음으로
태그는 없이 바로 다음으로 이동!
최종적으로 확인 후 사용자 만들기를 클릭합니다.
사진과 같이 실제로 중요한 키를 발급을 받게 됩니다.
이 정보는 정말 중요하고 노출되면 위험하니
주의합시다.
이후 실제 배포를 위해 사용될
CloudFront에 접속을 합니다.
이후 배포 생성 클릭
이런 빈 세팅 상태로 열 린텐 데요.
차례대로
최초 cloudfront-pipeline-test 이름으로
생성했던 S3로 연결시켜주고,
이름은 자동으로 생성된 상태로 놔두며,
OAI 생성 버튼을 누르면 사진처럼 자동으로 연결되게 됩니다.
아래로 내려서 저는 추가적으로 프로토콜 정책만 설정해주고
이외에는 건들지 않았습니다.
필요 부분은 하나씩 설정이 가능합니다.
이후 배포 생성을 클릭해 줍니다.
배포 후 실제 사용될 도메인입니다.
그럼 리스트에서 이제 확인이 가능한 상태가 되는데요.
사진에 표시한 이 ID값을 아까 pipelines 파일에 기입을 해주겠습니다.
그럼 이제 이 설정 코드가 완성이 되었네요.
이제 Bitbucket을 세팅하러 가볼까요
프로젝트의 pipelines를 클릭해보면
현재 bitbucket-pipelines.yml 파일이 존재한 채로
commit 및 push를 하면
파일을 자동으로 읽어 이런 식으로 확인이 가능합니다.
만약 파일을 새로 만들거나 따로 commit이라는
표기가 뜨면 해당 파일을 찾지 못한다는
의미이고, 해당 repo에서 브런치 설정이
필요해 보입니다.
무튼, 커밋 후 푸시를 진행해보니 에러가 뜹니다..
찾아보니 제일 상단에 표기한
image: node:10.15.3
이 부분이 문제가 되었습니다.
image: node:15.14.0
이 버전으로 올려주도록 하고
다시 커밋과 푸시!
이번엔 다른 에러가 발생됩니다.
맞네요!! 저의가 실제 발급한 키를 연결시켜주지 않았네요!!
이번에는 Repo Setting으로 이동
이후 pipeline의 키 등록을 해줍니다!!
그리고 빠트린 게 또 하나 더 있었네요
S3 Bucket을 안 넣어줬었네요!
요 부분을 수정 후 다시 커밋 후 push!!
pipelines 과정을 보다가 결국 성공 ㅠㅠ
최종적으로 성공한 Successfull 이 보이네요!!
그리고 cloudfront에서 추가적으로 설정할 부분이 있습니다.
다시 배포 화면으로 돌아가, 편집을 눌러줍니다.
그리고 기본값 루트 객체에 index.html을 입력해 줍니다.
해당 도메인으로 들어왔을 때 바라볼 파일입니다.
이후 저장 클릭
이후 오류 페이지 응답 생성을 해주겠습니다.
요렇게 동일하게 적어주시면 됩니다.
이렇게 적어주는 이유는 실제 react 내 프로젝트에서 다른 경로로 이동을 하게 되면
예로 /place 등등 실제로 없는 경로이고 cloudfront에서는 403 에러를 발생하게 됩니다.
그때 200으로 index.html로 리다이렉트를 해준다고 이해하시면 됩니다.
그러고 나서 바로 적용되어 배포가 아닌 시간이 조금은 소요됩니다.
저 배포 중이 시간이 표시로 바뀌면 최종적으로 완료되게 됩니다.
최종적으로 배포가 완료되었음에도 접근을 할 수가 없습니다.
아마 S3에서 추가적인 권한 문제를 해결해주어야 할 것 같네요.
다시 S3로 돌아가 권한을 입력해주어야 합니다.
액세스 차단을 우선 먼저 풀어주고
버킷 정책을 편집을 클릭해줍니다.
위에 OAI 아이디와 나머지 버킷
이 부분만 신경 써서 동일하게
기입해줍니다.
이 아이디는 여기서 확인할 수 있습니다.
{
"Version": "2008-10-17",
"Id": "PolicyForCloudFrontPrivateContent",
"Statement": [
{
"Sid": "1",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity EMKNB9SUKRD62"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::cloudfront-pipeline-test/*"
}
]
}
그리고 마지막으로 다시 액세스를 모두 차단.
이전에 오픈을 했던 이유는 정책 편집도 어려웠기 때문에..
저장 후 최종적으로 확인!
이제 커밋 또는 푸시만으로
서비스된 웹 페이지를 수정 및 반영을 할 수 있습니다.