[Node.js] 16장 서버리스 노드 개발

🔍 서버리스?

서버리스, 영어로는 Server(서버) + less(없는)이다. 서버를 클라우드가 대신 관리해 주는 것.

서버를 클라우드 서비스가 대신 관리해 주기 때문에, 개발자 또는 운영자가 서버를 관리하는 데에 대한 부담이 준다.

 

대표적으로는 AWS와 GCP에서 다양한 서버리스 서비스를 제공한다.

📌 AWS 서비스 알아보기

AWS의 람다(Lambda), API 게이트웨이 (API Gateway), S3이 있다. 

📌 Google Cloud 서비스 알아보기

Google Cloud의 앱 엔진 (App Engine), 파이어베이스 (Firebase), 클라우드 펑션스 (Cloud Functions), 클라우드 스토리지 (Cloud Storage) 등이 있다.

 

📌 기능에 따른 구분

✅ FaaS

람다와 클라우드 펑션스는 특정한 동작을 수행하는 로직을 저장하고, 요청이 들어올 때 로직을 실행하는 서비스이다. 함수처럼 호출할 때 실행되기에 FaaS, Fuction as a Service로 불리기도 한다.

사용한 만큼만 요금을 지불하면 된다.

 

✅클라우드 데이터 저장소

S3와 클라우드 스토리지는 클라우드 데이터 저장소라고 생각하면 된다. 정적 파일을 제공하도록 노드 서버에서 위임받기도 한다.

 

🔍 AWS 사용하기

1. AWS 홈페이지 - 제품 - 스토리지 - S3 클릭
2. 버킷 만들기 혹은 시작하기 버튼 클릭
3. 버킷의 이름과 리전 설정
   1. 이때 버킷의 이름은 각자 고유해야 함
   2. 리전은 가까울수록 이미지 로딩 속도가 빠름
4. 권한 설정 단계
   1. 모든 퍼블릭 액세스 차단 체크박스 해제
   2. 실무에서는 해제하지 않음
5. 버킷 만들기 버튼을 눌러 버킷 생성
6. 웹사이트에서 버킷의 이미지를 불러올 수 있도록 권한을 부여
   • 버킷을 클릭하여 권한 > 버킷 정책 메뉴 선택하고 버킷 정책 편집기에 아래의 코드 생성 후 저장

{
	"Version": "2022-01-24",
    "Statement" : [
    {
    	"Sid" : "AddPerm",
        "Effect" : "Allow",
        "Principal" : "*",
        "Action" : [
        	"s3:GetObject",
            "s3:PutObject"
        ],
        "Resource": "arn:aws:s3:::당신의버킷명/*"
    }
  	]
}

7. AWS 액세스 키 발급

1. 계정 - 내 보안 자격 증명
2. 새 액세스 키 만들기 버튼 클릭하여 키 생성
3. 키 파일 다운로드 버튼을 클릭하여 추후에 필요할 때 볼 수 있도록 함

8. 프로젝트에 multer-s3 패키지, aws-sdk 패키지 설치

• multer-s3 : multer에서 S3로 업로드할 수 있게 해주는 패키지
• aws-sdk : AWS의 기능을 노드에서 사용할 수 있게 해주는 패키지, multer-s3 패키지에서 사용

9. .env파일에 발급 받은 키 파일 안에 적힌 액세스 키 ID와 보안 액세스 키를 복사

📌 이런저런 팁 모음

패키지 설치는 다음과 같은 명령어로 진행한다.

npm i multer-s3 aws-sdk

.env 파일은 다음과 같이 구성한다.

...
S3_ACCESS_KEY_ID = 액세스키ID
S3_SECRET_ACCESS_KEY = 액세스키

🔍 AWS 람다 사용하기

S3에 업로드한 이미지를 리사이징한 후, 줄어든 이미지를 다시 S3에 저장하는 작업이다.

작업의 진행 과정은 다음과 같다.

1. nodebird 폴더 외부에 aws-upload 폴더를 만들고 package.json을 작성한다.

{
  "name": "aws-upload",
  "version": "1.0.0",
  "description": "Lambda 이미지 리사이징",
  "main": "index.js",
  "author": "ZeroCho",
  "license": "ISC",
  "dependencies": {
    "aws-sdk": "^2.634.0",
    "sharp": "^0.25.1"
  }
}

2. aws-upload에 .gitignore을 추가한 후, 다음과 같이 작성한다. 깃허브에 업로드되는 것을 막는다.

node_modules

3. aws-upload에 람다가 실행할 index.js를 작성한다.

const AWS = require('aws-sdk');
const sharp = require('sharp');

const s3 = new AWS.S3();

//handler 함수가 람다 호출 시 실행되는 함수
// event : 호출 상황에 대한 정보가 담겨 있음
// context : 실행되는 함수 환경에 대한 정보가 담겨 있음
// callback : 함수가 완료되었는지 람다에게 알림
// callback의 첫번째 인수 error 여부 / 두번째 인수 반환값
exports.handler = async (event, context, callback) => {
	// event 객체로부터 버킷 이름(Bucket)과 파일 경로(Key)를 받아옴
    // 이를 통해 파일명과 확장자도 얻음
  const Bucket = event.Records[0].s3.bucket.name;
  const Key = event.Records[0].s3.object.key;
  const filename = Key.split('/')[Key.split('/').length - 1];
  const ext = Key.split('.')[Key.split('.').length - 1];
  const requiredFormat = ext === 'jpg' ? 'jpeg' : ext; // sharp에서는 jpg 대신 jpeg 사용합니다.
  console.log('name', filename, 'ext', ext);

	// s3.getObject 메서드로 버킷으로부터 파일을 불러옴
    // s3Object.Body에 파일 버퍼가 담겨 있음
  try {
    const s3Object = await s3.getObject({ Bucket, Key }).promise(); // 버퍼로 가져오기
    console.log('original', s3Object.Body.length);
    
    // sharp 함수를 파일 버퍼에 넣고 resize 메서드로 크기 지정
    // resize(가로, 세로, 조정 기준)
    // fit:inside -> 가로 세로 사이즈 안에 딱 맞게 이미지 조정
    // toBuffer 메서드는 리사이징된 이미지 결과를 버퍼로 출력
    const resizedImage = await sharp(s3Object.Body) // 리사이징
      .resize(200, 200, { fit: 'inside' })
      .toFormat(requiredFormat)
      .toBuffer();
    
    // s3.putObject 메서드로 리사이징된 이미지를 thumb 폴더에 저장
    await s3.putObject({ 
      Bucket,
      Key: `thumb/${filename}`,
      Body: resizedImage,
    }).promise();
    console.log('put', resizedImage.length);
    return callback(null, `thumb/${filename}`);
  } catch (error) {
    console.error(error);
    return callback(error);
  }
};

4. 람다에 배포를 진행한다.

Lightsail에서 빌드한 후 S3로 배포하고, 람다는 S3에서 배포된 파일을 가져와 함수로 만든다.

📌 Lightsail에서 배포하는 이유

sharp가 윈도우용, 맥용, 리눅스용으로 구분된다. 현재는 윈도우 환경에서 실습 중이므로 빌드 시 sharp가 윈도우용으로 설치가 되는데, 람다는 리눅스이므로 호환이 되지 않기에 Lightsail에서 배포를 진행한다.

 

  1. 깃허브에 aws-upload 레포지터리 생성 후 push

  2. Lightsail 인스턴스 SSH에 접속하여 깃허브 레포지터리 clone 받음

  3. npm i 후 aws-upload 폴더 아래의 모든 파일을 압축하여 aws-upload.zip 파일 만듦

  4. Lightsail에서 S3로 파일 업로드 (aws-cli 설치하고 aws configure 명령을 입력 후 발급받았던 키 파일 정보 입력)

  5. aws-cli를 사용해 aws-upload.zip 업로드

 

5. 람다 서비스 설정

  1. AWS 홈페이지 - 제품 - 주요 서비스 - AWS Lambda를 클릭한다.

  2. 함수 생성 버튼을 클릭한다.

    1) 함수 이름 : node-deploy

    2) Runtime : Node.js 12.x

  3. Amazon S3에서 파일을 업로드한다.

    1) Amazon S3 링크 URL : https://버킷명.s3.지역명.amazonaws.com/파일명 

  4. 기본 설정 - 편집 버튼을 클릭한다.

• 핸들러 이름 : '파일명.함수명' (책에서는 index.handler)
• 메모리, 제한 시간이 부족할 경우 늘려준다.
• 실행 역할 : AWS 정책 템플릿에서 새 역할 생성을 선택한다.
• 역할 이름은 자유, 정책 템플릿에서 Amazon S3 객체 읽기 전용 권한을 추가한다.

  5. 트리거 추가 : S3에 이미지를 업로드 할떄마다 람다 함수가 동작하도록 한다.

• 트리거 구성 : S3 선택
• 버킷 : 직접 만들었던 버킷 선택 (책에서는 nodebird)
• 이벤트 유형 : 모든 객체 생성 이벤트 로 설정
• 접두사 : original 폴더 안에 파일이 업로드되었을 때 함수를 트리거할 것이므로 original/ 로 설정

 

  6. nodebird/routes/post.js

    기존 주소에서 original 폴더를 thumb 폴더로 교체한다.

...
router.post('/img', isLoggedIn, upload.single('img'), (req, res) => {
  console.log(req.file);
  const originalUrl = req.file.location;
  const url = originalUrl.replace(/\/original\//, '/thumb/');
  res.json({ url, originalUrl });
});
...

  7. nodebird/views/main.html

    img 태그에 onerror 속성을 붙여 리사이징된 이미지를 로딩하는 데 실패하면 원본 이미지를 사용하도록 한다.

...
{% if twit.img %}
		// 아래 div 태그 추가
              <div class="twit-img">
                <img
                  src="{{twit.img}}"
                  onerror="this.src = this.src.replace(/\/thumb\//, '/original/');"
                  alt="섬네일"
                />
              </div>
              
...
{% block script %}
  <script>
    if (document.getElementById('img')) {
      document.getElementById('img').addEventListener('change', function(e) {
        const formData = new FormData();
        formData.append('img', this.files[0]);
        axios.post('/post/img', formData)
          .then((res) => {
            document.getElementById('img-url').value = res.data.url;
            document.getElementById('img-preview').src = res.data.originalUrl; // 추가
            document.getElementById('img-preview').style.display = 'inline';
          })

 

이미지 미리보기(img-preview) 시에는 원본 이미지를 보여주고, 이미지를 저장한 후에는 리사이징된 이미지를 보여주도록 한다.

이미지 업로드와 리사이징 간의 시간차때문에 이미지가 보이지 않는 현상을 해결하기 위해 사용한다.

🔍 구글 클라우드 스토리지 사용하기

구글 클라우드 스토리지에 이미지를 업로드하는 방법이다.

1. 구글 클라우드 플랫폼 - Storage 선택 - 버킷 생성 버튼

• 버킷 이름 지정 : 0000
• 데이터 저장 위치 선택 : 위치 유형 Region / 위치는 Seoul
• 버킷 권한 수정

2. 클라우드 스토리지 접근 키 발급받기

• 사용자 인증 정보 화면 - 사용자 인증 정보 만들기 버튼 클릭
• 서비스 계정 이름 : nodebird
• 서비스 계정 : nodebird
• 역할 : 저장소 관리자
• 키 만들기 버튼 클릭 -> 다운로드 받은 JSON 파일을 NodeBird 프로젝트 폴더로 복사

3. multer-google-storage 패키지를 설치한다.

4. nodebird/routes/post.js를 다음과 같이 작성한다.

const express = require('express');
const multer = require('multer');
const fs = require('fs');
const multerGoogleStorage = require('multer-google-storage');

const upload = multer({
  storage: multerGoogleStorage.storageEngine({
    bucket: 'nodebird',
    projectId: 'node-deploy-270114',
    keyFilename: 'node-deploy-270114-b024dbed754a.json',
  }),
  limits: { fileSize: 5 * 1024 * 1024 },
});

storage 속성 안에 multerGoogleStorage를 사용하여 multer-google-storage를 사용한다.

bucket, projectId, keyFilename : 버킷명, 프로젝트 ID, 키 파일명

📌 패키지 설치 방법

npm i multer-google-storage

🔍 구글 클라우드 펑션스 사용하기

구글 클라우드 펑션스는 다음과 같은 로직으로 동작한다. 앞서 보았던 AWS 람다와 유사한 구조를 띄고 있다.

gcp-upload/package.json

nodebird 폴더 외부에 gcp-upload 폴더를 생성한 후 package.json 파일을 다음과 같이 작성한다.

{
  "name": "gcp-upload",
  "version": "1.0.0",
  "description": "Cloud Functions 이미지 리사이징",
  "main": "index.js",
  "author": "ZeroCho",
  "license": "ISC",
  "dependencies": {
    "@google-cloud/storage": "^1.6.0",
    "gm": "^1.23.1",
    "sharp": "^0.25.1"
  }
}

gcp-upload/.gitignore

node_modules

gcp-upload/index.js

const storage = require('@google-cloud/storage')();
const sharp = require('sharp');

exports.resizeAndUpload = (data,context) => {
	const { bucket, name } = data;
    const ext = name.split('.')[Key.split('.').length -1];
    const requiredFormat = ext === 'jpg' ? 'jpeg' : ext;
    console.log('name', name, 'ext', ext);
    const file = storage.bucket(bucket).file(name);
    const readStream = file.createReadStream();
    
    const newFile = storage.bucket(bucket).file(`thumb/${name}`);
    const writeStream = newFile.createWriteStream();
    
    sharp(readStream)
    	.resize(200, 200, { fit : 'inside' })
        .toFormat(requiredFormat)
        .pipe(writeStream);
        
    return new Promise((resolve, reject) => {
    	writeStream.on('finish', () => {
        	resolve(`thumb/${name}`);
        });
        writeStream.on('error', reject);
    });
};

1. git-upload 깃 레포지터리 생성하고 지금까지 작성한 코드를 push
2. 컴퓨터 엔진 인스턴스 SSH에 접근하여 깃허브 레포지터리를 clone 받음
3. clone 받은 후 npm i 를 하고 gcp-upload 폴더 아래의 모든 파일을 압축하여 gcp-upload.zip 파일 생성
4. 컴퓨트 엔진에서 클라우드 스토리지로 파일 업로드

 

1. GCP - Cloud Functions - 함수 만들기 버튼 클릭

- 함수 이름 : gcp-upload

- 트리거 : Cloud Storage

- 이벤트 유형 : 완료/생성

- 버킷 : 본인이 만든 버킷 선택

- 소스코드 : Cloud Storage의 ZIP을 클릭해 방금 업로드한 파일 업로드

- 실행할 함수 : resizeAndUpload (*index.js의 exports.resizeAndUpload 이 부분과 동일해야 함)

 

2. NodeBird 코드 수정하기(16.3과 동일)

nodebird/routes/post.js

...
router.post('/img', isLoggedIn, upload.single('img'), (req, res) => {
  console.log(req.file);
  const filePath = req.file.path.split('/').splice(0, 3).join('/');
  const originalUrl = `${filePath}/${req.file.filename}`;
  const url = originalUrl.replace(/\/original\//, '/thumb/');
  res.json({ url, originalUrl });
});

...

nodebird/views/main.html

...
            {% if twit.img %}
              <div class="twit-img">
                <img
                  src="{{twit.img}}"
                  onerror="this.src = this.src.replace(/\/thumb\//, '/original/');"
                  alt="섬네일"
                />
              </div>
            {% endif %}
...

...
			document.getElementById('img-preview').src = res.data.originalUrl;
...

 

 

---

Node.js

Editor : PeeP