이미지 정보를 확인해보면, 이미지가 저장되는 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 파일을 전혀 인식하지 못하는 듯한 모습분석시도 (수동으로 빌드해보기)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..

Pre-signed URL을 이용한 파일 업로드 구현 흐름이 흐름의 핵심은 "프론트엔드는 백엔드에게 '허가증'을 요청하고, 그 허가증으로 S3에 직접 파일을 올린다" 입니다.1단계: 백엔드 - '임시 허가증(Pre-signed URL)' 발급 API 만들기가장 먼저, 프론트엔드가 허가증을 요청할 수 있는 API 엔드포인트를 Spring Boot 서버에 만들어야 합니다.무엇을 하는가?: "이 파일 이름으로, 이 버킷에, 10분 동안만, 파일을 올릴 수 있는(PUT) 특별한 URL을 생성해줘" 라고 AWS S3에 요청하고, 받은 URL을 클라이언트에게 돌려주는 API를 만듭니다.왜 하는가?: 모든 권한 발급 과정을 우리가 통제하는 안전한 백엔드 서버에서만 처리하여, 프론트엔드에 AWS 자격 증명을 절대 노출..

지난 편에서 로드밸런서와 Auto Scaling을 구축했습니다. 이번 편에서는 데이터를 저장할 데이터베이스와 파일 스토리지를 설정해보겠습니다.RDS(데이터베이스) 생성모든 상품 정보, 회원 데이터, 주문 내역 등을 저장할 서비스의 DB. RDS를 사용하여 MySQL 데이터베이스 인스턴스를 생성. 프라이빗 서브넷에 위치 시키고, 이전에 설계한 TIO-DB-SG 보안 그룹을 적용하여 EC2 서버들만 접속하도록 설정.보안 그룹 생성우리 서버들만 이 DB에 접속할 수 있다고 허용.**인바운드 규칙**을 유형은 MySQL, 소스는 우리 3개의 서버(spring, node, python)만 접근 가능하도록 설정한다.나머지는 기본값 동일.RDS 인스턴스 생성특별한 이유가 없다면 Aurora보다 MySQL을 사용하자...