S3 정적 웹 업로드 실습

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "PublicListGet",
            "Effect": "Allow",
            "Principal": "*",
            "Action": [
                "s3:List*",
                "s3:Get*",
                "s3:Put*",
                "s3:Delete*"
            ],
            "Resource": [
                "arn:aws:s3:::itstudybucket",
                "arn:aws:s3:::itstudybucket/*"
            ]
        }
    ]
}

[
    {
        "AllowedHeaders": [
            "*"
        ],
        "AllowedMethods": [
            "GET",
            "PUT",
            "POST",
            "DELETE"
        ],
        "AllowedOrigins": [
            "*"
        ],
        "ExposeHeaders": [
            "Access-Control-Allow-Origin"
        ]
    }
]

import com.amazonaws.auth.AWSCredentials;
import com.amazonaws.auth.AWSStaticCredentialsProvider;
import com.amazonaws.auth.BasicAWSCredentials;
import com.amazonaws.services.s3.AmazonS3;
import com.amazonaws.services.s3.AmazonS3ClientBuilder;
import com.amazonaws.services.s3.model.CannedAccessControlList;
import com.amazonaws.services.s3.model.ObjectMetadata;
import com.amazonaws.services.s3.model.PutObjectRequest;
import jakarta.annotation.PostConstruct;
import lombok.RequiredArgsConstructor;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.stereotype.Service;
import org.springframework.web.multipart.MultipartFile;

import java.io.IOException;
import java.io.InputStream;

@Slf4j
@RequiredArgsConstructor
@Service
public class AwsS3ServiceImpl implements AwsS3Service {
   private AmazonS3 amazonS3Client;

   //properties에서 값을 가지고 와서 설정
   @Value("${cloud.aws.credentials.access-key}")
   private String accessKey;

   @Value("${cloud.aws.credentials.secret-key}")
   private String secretKey;

   @Value("${cloud.aws.s3.bucket}")
   private String bucketName;

   @Value("${cloud.aws.region.static}")
   private String region;

   //생성자가 호출된 후에 수행할 메서드
   @PostConstruct
   public void setS3Client(){
       AWSCredentials credentials = new BasicAWSCredentials(accessKey, secretKey);
       amazonS3Client = AmazonS3ClientBuilder.standard()
               .withCredentials(new AWSStaticCredentialsProvider(credentials))
               .withRegion(region)
               .build();
   }

   //업로드 할 파일 존재 여부를 리턴해주는 메서드
   private boolean validateFileExists(MultipartFile multipartFile) {
       boolean result = true;
       if(multipartFile.isEmpty()){
           result = false;
       }
       return result;
   }

   @Override
   public String uploadFile(String category, MultipartFile multipartFile) {
       boolean result = validateFileExists(multipartFile);
       if(result == false){
           return null;
       }
       //파일 경로 생성
       String fileName = CommonUtils.buildFileName(category, multipartFile.getOriginalFilename());
       //파일 업로드 준비
       ObjectMetadata objectMetadata = new ObjectMetadata();
       objectMetadata.setContentType(multipartFile.getContentType());
       try(InputStream inputStream = multipartFile.getInputStream()){
           amazonS3Client.putObject(new PutObjectRequest(bucketName, fileName, inputStream, objectMetadata)
                   .withCannedAcl(CannedAccessControlList.PublicRead));
       }catch(IOException e){
           return null;
       }
      
       return amazonS3Client.getUrl(bucketName, fileName).toString();
   }
}

import lombok.RequiredArgsConstructor;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RequestPart;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

@RestController
@RequiredArgsConstructor
public class AwsS3Controller {
   //클래스 이름을 적어도 되지만 인터페이스 이름을 기재합니다.
   //인터페이스를 구현하거나 다른 클래스로 상속을 받은 경우
   //상위 타입의 변수에 하위 타입의 인스턴스를 대입할 수 있습니다.
   private final AwsS3Service awsS3Service;

   @PostMapping("/upload")
   public String uploadFile(@RequestParam("category") String category,
                            @RequestPart(value="file")MultipartFile multipartFile){
       return awsS3Service.uploadFile(category, multipartFile);
   }
}

//다운로드 될 파일의 속성을 설정할 메서드
private static final int UNDER_BAR_INDEX = 1;
public static ContentDisposition createContentDisposition(String categoryWithFileName) {
   String fileName = categoryWithFileName.substring(
           categoryWithFileName.lastIndexOf(CATEGORY_PREFIX) + UNDER_BAR_INDEX);
   return ContentDisposition.builder("attachment")
           .filename(fileName, StandardCharsets.UTF_8)
           .build();
}

public byte[] downloadFileV1(String resourcePath);

//경로에 해당하는 파일이 있는지 확인해주는 메서드
private boolean validateFileExistsAtUrl(String resourcePath){
   boolean result = true;
   if(!amazonS3Client.doesObjectExist(bucketName, resourcePath)){
       result = false;
   }
   return result;
}

@Override
public byte[] downloadFileV1(String resourcePath) {
   //경로에 해당하는 자원이 있는지 확인
   boolean result = validateFileExistsAtUrl(resourcePath);
   //없으면 종료
   if(result == false){
       return null;
   }

   S3Object s3Object = amazonS3Client.getObject(bucketName, resourcePath);
   S3ObjectInputStream inputStream = s3Object.getObjectContent();
   try{
       return IOUtils.toByteArray(inputStream);
   }catch (IOException e){
       return null;
   }
}

//Header를 만들어 주는 메서드
private HttpHeaders buildHeaders(String resourcePath, byte[] data){
   HttpHeaders headers = new org.springframework.http.HttpHeaders();
   headers.setContentLength(data.length);
   headers.setContentType(MediaType.APPLICATION_OCTET_STREAM);
   headers.setContentDisposition(CommonUtils.createContentDisposition(resourcePath));
   return headers;
}

//파일 다운로드 처리 메서드
@GetMapping("/download")
public ResponseEntity<ByteArrayResource> downloadFile(
       @RequestParam("resourcePath") String resourcePath){
   //파일 가져오기
   byte [] data = awsS3Service.downloadFileV1(resourcePath);
   ByteArrayResource resource = new ByteArrayResource(data);
   HttpHeaders headers = buildHeaders(resourcePath, data);
   return ResponseEntity.ok().headers(headers).body(resource);

}

import React, {useState} from "react";
import AWS from 'aws-sdk'

const S3_BUCKET = 'itstudybucket'
const REGION = 'ap-northeast-2'

AWS.config.update({
  accessKeyId:'액세스ID',
  secretAccessKey: '액세스Key'
});

const myBucket = new AWS.S3({
  params: {Bucket: S3_BUCKET},
  region: REGION
})

function App() {
  //진행 상황 저장을 위한 변수
  const [progress, setProgress] = useState(0);
 
  //파일을 선택했을 때 호출될 이벤트 핸들러
  const handleFileInput = (e) => {
    setSelectedFile(e.target.files[0])
  }

  //실제 업로드 수행할 함수
  const uploadFile = (file) => {
    const params = {
      ACL: 'public-read',
      Body: file,
      Bucket: S3_BUCKET,
      Key: file.name
    }

    myBucket.putObject(params)
    .on('httpUploadProgress', (evt) => {
      setProgress(Math.round((evt.loaded / evt.total) * 100))
    })
    .send((err) => {
      if(err) console.log(err)
    })
  }

  return <div>
    <div>Native SDK File Upload Progress is {progress}%</div>
    <input type="file" onChange={handleFileInput} />
    <button onClick={()=>uploadFile(selectedFile)}>
      Upload To S3
    </button>
    </div>

}

export default App;

name: CI/CD AWS S3

on:
    push:
        branches:
            - main

jobs:
    deploy:
        runs-on: ubuntu-latest
        steps:
            - name: 코드 체크 아웃
              uses: actions/checkout@v3
            - name: AWS IAM 사용자 설정
              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: react build
              run: |
                npm install
                npm run build
                                
            - name: S3에 업로드
              run: aws s3 sync build/ s3://${{ secrets.AWS_S3_BUCKET }} --acl public-read
              env:
                AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }}
                AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }}