Build Backend
Babel-node는 실제로 사용되는게 아니라 개발할 때 사용되는것이라. 이것을 실제사용도에 맞게 전환시키는 Babel-CLI를 사용해야한다.
Bable-CLI를 설치 후에는 package.json에 build 명령어를 작성해준다.
"build":"babel src/init.js -d build"
// -d는 빌드한 코드를 추후에 나오는 글로 통해 어디에 저장할지 알려줌
typescript같은경우 tsconfig.json에 아래를 추가하며 "exclude"를 통해 빌드를 하지 않게 지정할 수 있다.
"compilerOptions":{
"outDir": "./build/",
}package.json에 다음과 같이 입력후 저장후 콘솔입력하면 build폴더에 build가 된다.
"build": "tsc --build",
다음 npm 명령어 start를 생성하고 실행시켜 잘동작하는지 확인해준다.
"scripts":{
"start":"node build/init.js"
}
빌드가 다 되었으면 백엔드 서버를 실행시켜주는 배포서버를 찾아야한다.
render.com 과 cloudtype이 있는데 매우 사용이 쉽다.
MongoDB Atlas
백엔드 데이터를 저장하기 위해 MongoDB Atlas를 사용해야한다. 이곳은 파일 타입을 제외한 글자 및 숫자 타입의 데이터를 저장한다.
- MongoDB Atlas을 가입
- Project에서 New Project
- 프로젝트 이름 작성 및 생성 버튼을 누른다.
- Create a Deployment에서 Create를 누르고 요금제를 설정
- Overviewdptj Connect를 눌러 MongoDB의 서버를 복사해주고 다음을 눌러 password를 잘 저장해준다. password는 잊어버리면 안되니 잘 백업해두자. 주어진 MongoDB 주소에 "<password>"를 지워주고 password입력한 백엔드 배포에 DB_URL환경변수를 기입하자
- git push를 하고 다시 배포하게 되면 데이터베이스가 만들어진다.
AWS
파일을 저장하기 위해 AWS를 사용할 것이다.'
AWS에 가입을 하고 AWS S3로 이동한다.
버킷 생성을 누르고 버킷 이름을 지어주어야하는데 AWS에서 유일한 이름이여야 한다.
모든 public 접근을 막기위해 block all public을 체크하고 생성을 누른다.
두번째는 API_KEY를 만들어주어야 하는데ㅐ 그래야 NodeJS와 AWS가 서로 대화할수 있다.
검색에서 IAM를 검색한다 IAM은 API KEY를 만들 수 있게 해준다.
사용자를 누르고 사용자를 생성한다.
사용자 이름을 작성하고 다음을 눌러 권한 설정을 해준다.
s3에 대한 권한만 줄것이기에 AmazonS3FullAccess를 찾아서 눌러주고 다음을 누르고 생성을 눌러준다.
사용자 이름을 누르고 엑세스 키 생성을 누르고 CLI 누르고 설명 태그 작성후 만들기 누르면 키와 비밀키가 나온다. 비밀키를 잃어버리면 재발급 받아야하니 잘 보관해두자
이제 파일을 AWS로 보내주는 작업을 해줘야하는데 저장을 할 수 있게 만든 미들웨어를 수정해야한다.
npm i multer-s3
npm install @aws-sdk/client-s3
두개를 설치해주고 다음과 같이 작성
const s3 = new S3Client({
region: "ap-northeast-2",
credentials: {
accessKeyId: process.env.AWS_ID + "",
secretAccessKey: process.env.AWS_SECRET + "",
},
});
const multerUploader = multerS3({ s3: s3, bucket: "버킷이름" });
export const avatarMulter = multer({
dest: "uploads/avatar/",
limits: {
fieldSize: 3000000,
},
storage: multerUploader,
});
export const videoMulter = multer({
dest: "uploads/video/",
limits: {
fieldSize: 10000000,
},
storage: multerUploader,
});
이렇게 해서 간다하게 파일을 올리게 되면 반응은 없지만 AWS에는 무언가 올라가 있는 모습이 보여진다.
이것을 보이게 하기위해서는 해당 버킷의 permissions(권한) 작업을 해야하는데 버킷을 만들 때 모든 Public접근을 막아두었던것을
// 체크해제
새 ACL(액세스 제어 목록)을 통해 부여된 버킷 및 객체에 대한 퍼블릭 액세스 차단
임의의 ACL(액세스 제어 목록)을 통해 부여된 버킷 및 객체에 대한 퍼블릭 액세스 차단
// Access Control List (엑세스 제어 목록)을 제공할 때 공개권한 을 주는 것위 둘을 제외한 나머지는 체크를 하고 확인을 작성후 눌러준다.
그리고 다시 MulterS3로 Access Control List를 전달해주어야 한다. acl은 object의 권한이다.
const multerUploader = multerS3({
s3: s3,
bucket: "squaresquare",
acl: "public-read",
});
만약
The bucket does not allow ACLs
이 나왔다면
권한 -> 객체 소유권 편집 -> ACL 비활성화됨(권장)을 ACL 활성화됨로 변경 ->
ACL이 복원된다는 것을 확인합니다. 체크 -> 버킷 소유자 선호 체크 -> 변경사항 저장
위의 방법까지 해보시고, 그래도 안 되시는 분들은
ACL(액세스 제어 목록)에서 편집->모든 사람(퍼블릭 액세스)에 나열, 읽기 체크해주신 후
변경사항 저장해서 테스트
이렇게 되었을때 기존 로컬스토리지를 사용하는 것이 아닌 스토리지를 사용하는 것이기 때문에 회원 수정을 통한 아바타 이미지에 대한 경로도 재 설정 해주어야 하고 view파일에 있는 소스들도 다시 확인을 해야한다.
Bucket의 폴더화
const s3VideoUploader = multerS3({
s3: s3,
bucket: "squaresquare",
acl: "public-read",
key(req, file, callback) {
callback(null, "videos/" + file.originalname);
},
});
const s3ImageUploader = multerS3({
s3: s3,
bucket: "squaresquare",
acl: "public-read",
key(req, file, callback) {
callback(null, "images/" + file.originalname);
},
});
DevServer와 LiveServer 개발환경 분할
백엔드를 배포하면 process.env.NODE_ENV를 받아 올 수 있다. 로컬의 환경에서는 undefined가 나오지만 대게 백엔드를 운용하는 곳에서는 'production'을 줄것이다. 이를 통해 로컬 환경과 실제 운용되는 서버를 확인하여 로컬로 바로 업로드할지 저장소로 업로드 할지 정할 수 있다. 아래의 변수로 Controller 및 Multer 에서 파일을 업로드하는 곳에 삼항연사자를 통해 업로드를 제어하자
const isRenderDotCom = process.env.NODE_ENV === "production";