작업 흐름

• 사용자가 프론트엔드에서 파일 업로드 요청
• Spring 서버가 파일을 수신
• Spring 서버가 AWS S3에 파일 업로드
• S3가 파일의 접근 가능한 URL을 생성
• 서버는 해당 URL을 DB에 저장
• 프론트엔드는 서버로부터 전달받은 URL을 통해 이미지를 직접 조회

aws 설정 작업

• aws iam계정 생성
  • 스프링 서버에서 AWS의 S3 접근을 위한 IAM 사용자를 생성
  • 설정 절차
    • AWS 콘솔 접속 → IAM 서비스 이동
    • 사용자 생성
    • 권한 설정
      • AmazonS3FullAccess 정책 부여
    • 액세스 키 발급
      • access키, secret키 발급
• s3버킷 생성
  • AWS 콘솔 → S3 서비스 이동
  • 버킷 생성
    • 버킷 이름 : 유일해야 함
• S3 퍼블릭 액세스 설정
  • S3최초 생성시 모든 퍼블릭 액세스 차단 해제
• 버킷 정책 설정

  • 버킷의 권한 → public 허용 스크립트 삽입

    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Sid": "PublicReadForBucket",
                "Effect": "Allow",
                "Principal": "*",
                "Action": "s3:*",
                "Resource": "arn:aws:s3:::your-bucket-name/*"
            }
        ]
    }
    

Spring 서버 설정

• 의존성 추가

  • implementation 'software.amazon.awssdk:s3:2.17.58’

• s3client 빈 객체 생성

  • 주요 정보를 application.yml에 은닉 후 bean객체 생성

  @Configuration
  public class AwsS3Config {
      @Value("${cloud.aws.credentials.access-key}")
      private String accessKey;
      @Value("${cloud.aws.credentials.secret-key}")
      private String secretKey;
      @Value("${cloud.aws.region}")
      private String region;
  
      @Bean
      public S3Client client(){
          AwsBasicCredentials awsBasicCredentials = AwsBasicCredentials.create(accessKey, secretKey);
          return S3Client.builder()
                  .region(Region.of(region))
                  .credentialsProvider(StaticCredentialsProvider.create(awsBasicCredentials))
                  .build();
      }
  }
  
  

• 파일 업로드 로직

  • 클라이언트로부터 MultipartFile 수신
  • 파일명 중복 방지를 위한 설정
  • S3에 파일 업로드
  • 업로드된 이미지 url추출 및 DB에 파일경로 저장

프론트엔드 연동

• 서버 응답 구조
  • 서버는 이미지 업로드 후 이미지 접근 URL 반환
• 이미지 렌더링
  • 프론트엔드는 서버로부터 전달받은 URL을 img 태그의 src 속성에 그대로 사용
  • 예시)
  • <img src="https://...s3.amazonaws.com/파일명" />