이미지 정보를 확인해보면, 이미지가 저장되는 S3버킷 링크(tio-image-storage-jungle8th.s3~~)가 그대로 노출이된다.CloudFront 설정이 되어있어서 도메인으로 감춰져야할텐데 왜그럴까?현재 CloudFront 설정배포 정보:도메인: tio-style.com, www.tio-style.comCloudFront URL: d1vke19yqieoiy.cloudfront.net상태: DeployedOrigin 설정:tio-image-storage-jungle8th.s3.ap-northeast-2.amazonaws.com (이미지 버킷)tio-frontend-assets-jungle8th.s3.ap-northeast-2.amazonaws.com (프론트엔드 자산)tio-alb-173623..

🚨 문제 상황 개요CSS와 HTML 404 문제를 해결하고 나니, 이번엔 새로운 문제들이 나를 반겼다. 이미지 관련 문제들이 연쇄적으로 발생하면서 하루 종일 삽질을 하게 되었다.주요 오류들:/_next/image?url=...&w=1920&q=75 → 400 Bad Request/api/home/products → 404 Not Found/api/avatars/latest-info → 404 Not FoundMixed Content 보안 오류분명히 모든 설정을 다 했는데 왜 이런 일이 생기는 걸까? 시간 순서대로 문제들을 하나씩 해결해보자.🔍 1단계: S3 리전 오류 문제문제 발견브라우저 개발자 도구를 보니 이런 요청이 실패하고 있었다:/_next/image?url=https%3A%2F%2Ftio-i..

🚨 문제 상황 개요CSS와 HTML 404 not found 문제를 해결하고 나서 마주한 것은 텅 빈 이미지들과 API 404 오류의 연속이었다.하나의 문제를 해결하면 다른 문제가 연쇄적으로 발생하는 전형적인 인프라 트러블슈팅 상황이었다.🖼️ 1단계: 이미지 로드 실패 문제문제 발견이미 일전에 한번 겪었던 이슈인데, 원인 자체는 Next.js의 이미지 최적화 기능에 있었다. 전에는 임시방편으로 next.config.ts에서 이미지 최적화를 꺼놓고 작업을 했는데, 켜놓은 탓에 발생한 것으로 보인다.const nextConfig: NextConfig = { images: { unoptimized: true // 이 부분이 true로 되어있으면 최적화를 끄는것이다. }}문제 원인 분..

현상CSS 파일을 전혀 인식하지 못하는 듯한 모습분석시도 (수동으로 빌드해보기)EC2 내부에서 git pull 받아와 수동으로 npm build 수행함원인globals.css 파일의 @import 문 형식 오류.Tailwind CSS의 버전이 3.x → 4.0으로 올라가면서, build를 위한 import문이 저렇게 구분해서 정리하는게 아닌 @tailwindcss 이렇게 하나만 적어주면 된다고 한다.수정하고 빌드했을 때,0바이트 짜리의 CSS 파일은 사라지고, 정상 배포되는 모습을 확인했다.CloudFront의 캐싱도 무효화 처리해준다아직도실제로 있는 CSS 파일은 6273f2f26c30c4e1.css, ed4700d621702d51.css 두 파일 이나, 아직도 서버에서는 0f6b13800efcb7a3..

문제점: 링크를 직접 입력해서 이동 시도하면 AccessDenied메인에서 마이페이지(/mypage)나, 제품을 눌러 상세페이지(/details)로 이동하면 정상적으로 보이나, 주소창에 직접 입력해서 이동을 시도하면 위의 사진이 노출됨.실제 파일이 있는데 AccessDenied가 뜨는 원인1. S3 버킷 권한 문제파일은 존재하지만 퍼블릭 읽기 권한이 없음버킷 정책이나 객체 ACL 설정 문제2. S3 버킷 정책 확인{ "Effect": "Allow", "Principal": { "Service": "cloudfront.amazonaws.com" }, "Action": "s3:GetObject", "Resource": "arn:aws:s3:::tio-frontend-assets-jungle8t..