AWS - S3

이번 시간도 나를 위한 AWS - S3 설정 방법 정리 포스트

---

현재는 만든 프로젝트를 배포하는 작업을 진행하고 있다. 포트폴리오에 넣기 위해서 내 경험을 위해서 배포를 하고 있지만 배포 과정도 생각보다 복잡하다. 특히 CORS문제가 이렇게 많을 줄 몰랐다.

AWS S3

AWS는 아마존 웹 서비스를 말한다. 현재 배포 과정을 AWS로 진행하고 있다. 도메인을 가비아에서 구매를 했고, 도메인은 AWS Route 53 으로 탄력적 IP까지 설정을 했다. 기본 인스턴스 생성해서 퍼블릭 IP를 받을 수 있다. 하지만 이 IP는 AWS에서 때때로 변경을 하기 때문에 탄력적 IP를 추가적으로 설정하여 변경이 되지 않도록 했다.

그러고보니 Route 53 설정에 대해서 정리를 깜빡했다...

그렇다면 S3 무엇?

단순하게 인터넷용 스토리지 서비스고, 제공하는 단순한 웹 서비스 인터페이스를 사용하여 웹에서 언제 어디서나 원하는 양의 데이터를 저장하고 검색할 수 있습니다.

출처: https://usefultoknow.tistory.com/entry/Amazon-S3란-무엇일까 [UsefulToKnow]

#1 설정방법 - 버킷만들기

AWS 로그인을 해야겠지? 계정이 없다면 회원가입을 진행해주자.
(이 때, 회원가입 시 등록한 카드로 1달러가 빠져나간다. 진짜 결제가 되는 카드인지 테스트하는 것이니 놀라지말고 진행하자!!)

🧷 1 - S3 검색

로그인하면 아래 이미지처럼 페이지가 이동된다. 상단 메뉴 중앙에는 AWS에서 제공하는 서비스를
검색해서 쉽게 찾아갈 수 있는 검색창이다. 여기서 S3를 검색해서 첫번째로 나온 메뉴를 클릭하자.

🧷 2 - 페이지 이동

이런 페이지에 이동이 된다. 현재 버킷을 하나 만든 상태라 UI가 이렇지만, 없는 경우에는 버킷만들기를 클릭해서 만들면된다.

🧷 3 - 버킷 만들기

아래에서는 간단하게 버킷 이름을 지어주자. 프로젝트 이름이 있다면 그 이름을 사용해보자!

그리고 바로 아래 단계에는 퍼블릭 액세스 차단 설정인데 이 부분에서 모든 퍼블릭 액세스 차단 체크를 비활성화 시켜주자. 프로젝트는 여러 사람이 이용하자고 만든 프로젝트니까!
그리고 그 아래에 경고문처럼 있는 부분의 체크박스를 체크해주자!

그리고 제일 아래로 스크롤하여, 버킷만들기 버튼을 눌러서 만들어주자!

#2 설정방법 - 권한 편집

🧷 1 - 생성된 버킷 편집

위에서 버킷을 만들었으니 버킷의 권한을 편집을 해줘야한다.
아래 생성된 버킷의 이름부분이 파란색으로 되어있는데 클릭해야할 것 같이 생겼으니 클릭해주자 ㅋㅋ

🧷 2 - 권한 설정

이동된 페이지에 몇 가지의 메뉴가 있는데 그 중 권한을 클릭!

이동된 페이지에서 아래로 스크롤 하면 아래 이미지의 영역이 나온다.
여기서 편집을 클릭하자.

아래에는 JSON으로 작성된 코드가 있다. 원래는 비어있는 부분이니까 똑같이 작성해주자.
여기서 주의할 점은 코드 제일 아래 Resource 부분인데, 여기에 들어갈 값은 빨간색으로 표시한 것처럼 자신의 버킷 ARN을 넣어줘야한다. 복사해서 넣고 끝에 /*추가하여 편집 완료해주자.

아직도 갈 길이 멀다...

#3 액세스 키 발급 및 설정

위 까지 작업을 마쳤으면 액세스 키를 발급해서 노드에서 S3에 접근할 수 있도록 해야한다.

🧷 1 - 액세스 키 발급

아래 이미처럼 내 계정을 클릭하여 내 보안 자격 증명을 클릭!

중간에 있는 액세스 키 클릭!

아래 파란색 버튼 새 액세스 만들기 클릭! 하면~ 팝업창이 하나 뜨는데 빨간테두리 박스에 있는 키 파일 다운로드를 눌러준다. 그리고 닫기!

🧷 2 - 패키지 추가 및 .env 설정

back에서 추가적으로 두 가지를 설치해야한다.

// 터미널에서 설치해준다. 경로는 해당 프로젝트의 back 폴더다.
npm i multer-s3 aws-sdk

multer-s3 : multer에서 s3로 업로드 할 경우 사용
aws-sdk : s3 접근 권한을 얻을 때 사용

위 처럼 추가 설치를 했다면 .env 파일에 S3 관련 키를 두 가지 추가해야한다. (보안 키입니다. 노출을 주의해주세요!)

생성했던 액세스 키 ID 복사하여 .env에 넣어줍니다.

// .env
S3_ACCESS_KEY_ID=KEY ID 값

마지막 하나는 액세스 키 발급 시 다운로드 했던 파일에서 확인 가능하다. 이 파일에는 위 아래 키값이 모두 들어있긴하다 ㅎ

// .env
S3_SECRET_ACCESS_KEY=SECRET ACCESS KEY 값

🧷 3 - 코드 수정

이미지를 업로드 할 때 multer 패키지를 사용하여, 로컬에 업로드 되도록 작업 했다. 하지만 이젠 이미지는 모두 S3에 업로드를 해야하기 때문에 코드를 수정해야한다.

// project/back/routes/post/post.js

// 설치한 패키지 불러오기
const multerS3 = require('multer-s3');
const AWS = require('aws-sdk');

// 권한을 갖도록 아래 코드 추가
// region - AWS에서 EC2 작업 시 설정한 지역
// ap-northeast-2 - 아시아 태평양 (서울)
AWS.config.update({
    accessKeyId: process.env.S3_ACCESS_KEY_ID,
    secretAccessKey: process.env.S3_SECRET_ACCESS_KEY,
    region: 'ap-northeast-2',
});

// 기존 multer 로컬 저장 방식 코드
const upload = multer({
  storage: multer.diskStorage({ // 하드디스크에 저장
    destination(req, file, done) {
      done(null, 'uploads'); // uploads 폴더에 저장
    },
    filename(req, file, done) {
      const ext = path.extname(file.originalname); // 파일 확장자 추출
      const basename = path.basename(file.originalname, ext).normalize(); // 파일 이름 추출
      done(null, basename + '_' + new Date().getTime() + ext); // 이름 + 시간 + 확장자
    },
  }),
  limits: { filesize: 20 * 1024 * 1024 }, // 20MB 제한
});

router.post('/images', upload.array('image'), async (req, res, next) => {
  res.json(req.files.map((v) => v.filename));
});

// multer-s3 저장 방식 코드
const upload = multer({
  storage: multerS3({
    s3: new AWS.S3(), // 접근 권한
    bucket: 'react-blog-s3', // 개인 버킷 명
    key(req, file, cd) {
      cd(null, `original/${Date.now()}_${path.basename(file.originalname)}`);
    },
  }),
  limits: { filesize: 20 * 1024 * 1024 }, // 20MB 제한
});

router.post('/images', upload.array('image'), async (req, res, next) => {
  res.json(req.files.map((v) => v.location));
});

위 처럼 해당되는 이미지 업로드 라우터가 있다면 수정해주자!

혹시 기존 로컬 방식 multer로 진행하여, 프론트 소스코드 중 이미지의 src를 back URL을 넣었다면 이 부분도 모두 수정을 해줘야한다.

// 기존 소스 코드
<img src={`${backURL}/image.src`} />

// 변경 소스 코드
<img src={image.src} />

이제 데이터를 전달받을 시 image에는 새로운 경로의 데이터가 있기 때문에 기존 back 주소는 없애준다. 이 부분은 개인마다 다르니 이해를 해야하는 부분이다.

잊지말자! ubuntu 수정

AWS 배포 과정에서 ubuntu 20 버전으로 진행을 했다.
인스턴스는 front / back 2개 만들어줬고, 현재 ubuntu back에서
위에서 수정한 내용 토대로 변경해줘야한다.

1. 코드를 수정했으면 깃헙도 업데이트를 해주자.
2. 깃헙에 업데이트 후 ubuntu back 경로에서도 git pull
3. .evn는 깃헙에 없기에 ubuntu vim에디터로 .env 추가 수정
   (비밀키아이디, 비밀보안키를 추가로 넣어줘야한다.)

다했어!! 다했는데!!! 에러가 나네??

The request signature we calculated does not match the signature you provided. Check your key and signing method.

이게 뭐여;; 일단 파파고 행님께 번역을 부탁하고 읽어보니, 내가 .env에 적은 비밀키와 AWS에서 제공해준 비밀키가 맞지가 않다고?? 몇번을 확인해도 똑같은데??

구글링을 통해서 정보를 확인한 결과!! 이게 정말 실화인지는 모르겠지만...
발급받은 비밀키에 특수문자(+, % 등...)가 있으면 에러가 발생한다고 한다!

그래서 한번 더 받았는데 또 특수문자있어서... 세번이나 발급을 받고 비밀키를 수정해줬다. 기존 로컬코드에서도 수정해주고, ubuntu에서도 수정해준 뒤 실행을 했다!

결과 : 성공!! 찢어쓰~~