📝 오늘 한 것

1. Heroku / AWS / multer S3

📚 배운 것

1. 배포

1) Heroku에 배포

Heroku Git을 이용한 방법에 이어 github를 이용해 바로 Heroku에 배포할 수도 있다.

(1) github 이용

git push origin main 할 때마다 자동으로 빌드가 다시 시작되면서 배포가 된다.
git push heroku main 을 입력할 필요가 없어 간편하지만 주의가 필요하다.

2) Amazon Web Services(AWS)

현재 서버를 파일 저장소로 사용하고 있다.
이 때문에 앱을 배포할 때마다(git push ~) 빌드가 다시 시작돼서 웹 사이트에 업로드되어 있던 데이터들(비디오, 프로필 사진)이 모두 사라지게 된다.

문제를 해결하기 위해 AWS를 이용할 수 있다.

(1) 버킷 만들기

계정을 만든 후 service - storage - s3로 이동하여 create bucket 버튼을 클릭한다.
버킷 이름을 작성하고 지역을 서울로 선택한 후 버킷을 만든다.

(2) API key 만들기

node.js 서버가 AWS와 이야기할 수 있도록 API key를 만들어야 한다.
IAM을 검색해 사용자(users) 페이지에서 사용자 추가 버튼을 클릭한다.
user name을 기억할 수 있는 만큼 길게 작성한 후 액세스 키 - 프로그래밍 방식 액세스를 선택한다.
권한을 설정하기 위해 다음 페이지로 넘어가서 AmazonS3FullAccess를 검색해 이를 선택한다.
이는 S3에서 할 수 있는 모든 권한 즉, 파일을 업로드할 수 있는 권한을 부여하는 것이다.
현재 만들고 있는 계정으로는 이것만 할 수 있도록 하는 것이다.
태그는 설정할 필요 없고 다시 한 번 전체 선택 내용을 확인한 후에 '사용자 만들기' 버튼을 클릭한다.

(3) API key 변수 추가하기

이렇게 만든 액세스 키는 한 번밖에 볼 수 없기 때문에 즉시 이를 복사해서 Heroku 사이트의 Settings와 프로젝트 폴더의 .env 파일에 추가한다. (AWS_ID & AWS_SECRET)

(4) multer S3 패키지 설치 및 사용 설정

multer-s3 참고

multer S3 패키지를 이용하면 파일을 웹 사이트 서버 대신 AWS에 업로드할 수 있다.
파일을 업로드할 때 파일 시스템 대신 AWS를 사용하는 것이다.

$ npm i multer-s3

multer 미들웨어가 있는 middlewares.js 파일을 수정해야 한다.
aws-sdk 패키지를 설치해 s3 object를 만든다.
이때 옵션으로 앞서 Heroku의 Settings와 .env 파일에 추가한 AWS_ID와 AWS_SECRET을 전해줘야 한다.

$ npm i aws-sdk

// middlewares.js
import aws from "aws-sdk";
import multerS3 from "multer-s3";

const s3 = new aws.S3({
  credentials: {
    accessKeyId: process.env.AWS_ID,
    secretAccessKey: process.env.AWS_SECRET
  }
});

이를 바탕으로 multerS3를 만든다.
uploadAvatar와 uploadVideo 미들웨어에 storage를 추가한다.

// middlewares.js
const multerUploader = multerS3({
    s3: s3,
    bucket: "버킷 이름",
});

export const uploadAvatar = multer({
  dest: "uploads/avatars/",
  limit: {
    fileSize: 5000000,
  },
  storage: multerUploader, // 추가
});

export const uploadVideo = multer({
  dest: "uploads/videos/",
  limits: {
    fileSize: 10000000,
  },
  storage: multerUploader, // 추가
});

웹 사이트에서 프로필 사진을 수정한다.
그러나 에러가 발생해서 웹 사이트에서 사진이 제대로 보이지 않는다.

다만, 버킷을 확인해보면 객체가 생긴 것을 확인할 수 있다.
파일을 업로드할 때 더 이상 내 컴퓨터의 폴더에 저장하지 않고 AWS를 사용하는 것이다!

(5) object 공개 설정 / 파일 src 수정

(방금 업로드한 파일은 공개되지 않아서 필요 없기 때문에 버킷에서 삭제해준다.)

업로드한 파일을 웹 사이트에서 제대로 볼 수 있도록 하기 위해 업로드된 파일들을 공개해야 한다.
'버킷 - 권한 - 퍼블릭 액세스 차단(버킷 설정)'으로 이동한다.
'새 퍼블릭 버킷 또는 액세스 지점 정책을 통해 부여된 버킷 및 객체에 대한 퍼블릭 액세스 차단'과 '임의의 퍼블릭 버킷 또는 액세스 지점 정책을 통해 부여된 버킷 및 객체에 대한 퍼블릭 및 교차 계정 액세스 차단'만 그대로 활성화 상태로 두고, ACLs와 관련된 내용은 비활성화 한다.

다음으로, Access Control List(ACL)를 전달해야 한다.
누구나 파일을 읽을 수 있도록 public-read로 전달해야 한다.

// middlewares.js
const multerUploader = multer({
  s3: s3,
  bucket: "버킷 이름",
  acl: "public-read", // 추가
});

한편, 파일을 업로드 할 때마다 users DB를 확인해보면 avatarUrl이 null 값을 가지는 것을 확인할 수 있다.
에러의 원인을 파악하기 위해 userController.js에서 postEdit 컨트롤러를 살펴보면 다음과 같다.

// userController.js
export const postEdit = async (req, res) => {

  const updatedUser = await User.findByidAndUpdate(
    _id,
    {
      avatarUrl: file ? file.path : avatarUrl,
      // 중략
    },
  );
  
};

avatarUrl이 null 값이라는 것은 file.path이 null이라는 뜻이다.
console.log(file)를 해보면, file은 더 이상 path를 가지고 있지 않고 location을 가지고 있으므로 관련 코드를 모두 수정해야 한다.
또한, pug 파일에서 파일 src와 관련해 loggedInUser.avatarUrl 앞에 붙였던 "/"들을 모두 삭제하도록 한다.

그러나 여기까지 해도 에러가 발생한다.

✨ 내일 할 것

1. credentials request 에러 해결...