우선 블로그 배포 하는법을 알고 싶으시다면
S3 + CloudFront + Github Action 으로 개츠비 블로그 배포하기
여기로 가시면 됩니다.
이 글은 제가 저 배포를 진행하면서 겪었던 어려움들을 정리해놓은 약간 한탄글 입니다..^^
😂 나만 배포가 안돼,,,
📝 나의 문제!
<약간 의심 원인> IAM 만들어놓고 엑세스 막아둠…
이건 원인이 아니었습니다.
🚨 진짜 원인 1. 배포 경로가 잘못되었음
✅ 해결방법
- name: Deploy to s3
run: aws s3 sync ./public s3://${{ secrets.DEV_AWS_S3_BUCKET }} --delete→ public 으로 수정
🚨 진짜 원인 2. 워크플로우 실행이 안된다?
이것의 이유는 yml 파일로 아예 인식을 못해서 트리거고 뭐고 아예 실행이 안되었던것이었습니다…
✅ 해결방법
그래서 그냥 Actions 탭에서 New workflow로 파일을 새로 만들어주고 확인해봤더니
테스트용으로 만든 워크플로우가 잘 돌아가는 것을 확인했습니다..
SO,,,, 허무,,,
🚨 진짜 원인 2-1. 문제 워크플로우 오류 발생,,
name: Deploy
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
strategy:
matrix:
node-versions: [18.x]
steps:
- name: Checkout source code.
uses: actions/checkout@v3
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v2
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_REGION }}
- name: Deploy to s3
run: aws s3 sync ./public s3://${{ secrets.AWS_S3_BUCKET }} --delete
- name: CloudFront 캐시 무력화 설정
uses: chetan/invalidate-cloudfront-action@v2
env:
DISTRIBUTION: ${{ secrets.AWS_CLOUDFRONT_ID }}
PATHS: '/*'
AWS_REGION: ${{ secrets.AWS_REGION }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}위와 같이 코드작성하고 푸시했습니다.
하지만 개같이 실패!!!!!!왝..? 버전때문인가.. 일단 수정
name: Deploy
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout source code.
uses: actions/checkout@v3
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v2
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_REGION }}
- name: Deploy to s3
run: aws s3 sync ./public s3://${{ secrets.AWS_S3_BUCKET }} --delete
- name: CloudFront 캐시 무력화 설정
uses: chetan/invalidate-cloudfront-action@v2
env:
DISTRIBUTION: ${{ secrets.AWS_CLOUDFRONT_ID }}
PATHS: '/*'
AWS_REGION: ${{ secrets.AWS_REGION }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}그냥 노드 버전 설정하는 부분을 없애버렸다.
이렇게 안하고 배포하는 분도 있드라고여..!
그런데도 또 오류가 발생하더라고여!?!?!??!?!?
✅ 해결방법
변수이름을 제 꺼랑 다르게 해줘서 그런것이었습니다..헤헤
여기저기서 코드를 긁어오다보니… 착각…
name: Deploy
on:
push:
branches:
- main
jobs:
deploy:
runs-on: ubuntu-latest
steps:
- name: Checkout source code.
uses: actions/checkout@v3
- name: Install Dependencies
run: npm install
- name: Build
run: npm run build
- name: Configure AWS Credentials
uses: aws-actions/configure-aws-credentials@v2
with:
aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
aws-region: ${{ secrets.AWS_REGION }}
- name: Deploy to s3
run: aws s3 sync ./public s3://${{ secrets.DEV_AWS_S3_BUCKET }} --delete
- name: CloudFront 캐시 무력화 설정
uses: chetan/invalidate-cloudfront-action@v2
env:
DISTRIBUTION: ${{ secrets.DEV_AWS_DISTRIBUTION_ID }}
PATHS: '/*'
AWS_REGION: ${{ secrets.AWS_REGION }}
AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}제꺼에 맞게 다시 변경해줬더니~~~
후…. 진짜 이걸로 2주넘게 고생했심더….
파일두 잘올라갔숴요!!!!!!!!!!!!!
흐즈믄 아직 클라우드 프론트에서는 안보이네여..
🚨 진짜 원인 3. 클라우드 프론트에서 안보임…!
잘보면 access가 denied 된다고 하자나요?
그래서 냅다 같은 오류난 사람이 있나 찾아봤더니
친절하게 aws에서 자료를 제공하고 있드라고요
S3 오리진을 사용한 CloudFront 파일 액세스 문제 해결
일단 s3 권한을 아래와 같이 변경해주었습니다.
{
"Version": "2012-10-17",
"Statement": [
{
"Sid": "AllowCloudFrontServicePrincipalReadOnly",
"Effect": "Allow",
"Principal": {
"Service": "[cloudfront.amazonaws.com](http://cloudfront.amazonaws.com/)"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<S3 bucket name>/*",
"Condition": {
"StringEquals": {
"AWS:SourceArn": "arn:aws:cloudfront::<AWS account ID>:distribution/<CloudFront distribution ID>"
}
}
},
{
"Sid": "AllowLegacyOAIReadOnly",
"Effect": "Allow",
"Principal": {
"AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity <origin access identity ID>"
},
"Action": "s3:GetObject",
"Resource": "arn:aws:s3:::<S3 bucket name>/*"
}
]
}그래도 안됩니다... 안보입니다.....
s3로 접속해서 페이지를 보니까 이렇게 보이네여
아놔
암튼 찾아보니까 권한 설정을 잘못해줘서 그런듯 하옵미다!!
→ 맞았음!!
AWS cloudfront S3연동 / OAI를 이용 (access denied 문제 관련 해결)
이 분 블로그 보고 따라했더니 해결했습미다하하하각
✅ 해결방법
클라우드 프론트 콘솔에서 편집으로 들어간다음
위와 같이 선택해줍니다!
그리고 저저 “정책복사" 저걸 눌러줍니다.
그리고 나서 다시 저기 버킷 권한으로 이동을 누르면
s3 버킷 권한 설정해주는 곳으로 넘어갑니다.
그럼 원래 기존에 있던거 다 지우고 저걸로 붙여넣어주면 됩니다!
그리고 다시 클라우드프론트로 넘어와서 OAI로 선택해주고 변경사항저장 눌러줍니다!
드뎌 보인다..나의 블로그… 근데 네비게이션 바 머선일…?
경로 지정을 잘못해줘서 생긴 문제입니다.. 저기에만 tailwind 가 적용이 안되어졌답니다.. 끌끌 다음에 수정하기로 합니다,,
