분류 Nodejs

Node Express API를 서버리스로 전환

컨텐츠 정보

  • 조회 368 (작성일 )

본문

Express API가 있으면 혼자가 아닙니다. 그러나 이 서버 기반 API 모델을 서버리스 모델로 전환하는 것을 고려한 적이 있습니까? 

이 기사가 끝날 때까지 나와 이 점을 고수하는 방법을 알아보고 직접 시도해 볼 수 있는 실례가 있습니다.


https://dev.to/azure/shifting-your-node-express-apis-to-serverless-b87 


API를 만드는 데 Node와 Express를 좋아합니다! 그러나 여기에는 클라우드에서 해당 서버에 대한 서버 및 비용이 필요합니다. 서버리스로 전환하면 비용을 줄이고 서버 유지 관리를 쉽게 확장 및 축소 할 수 있으며 강력한 Express 앱에 필요한 미들웨어의 표면적을 줄입니다. 완벽합니까? 물론 아닙니다! 그러나 이러한 요소가 귀하에게 영향을 미치는 경우 확실한 옵션입니다. 이 기사에서는 Node Express API를 서버리스 기능으로 전환하는 방법에 대해 설명합니다.


Shifting to Serverless 


이 기사는 #ServerlessSeptember의 일부입니다. 이 서버리스 컨텐츠 컬렉션에서 다른 유용한 기사, 자세한 자습서 및 비디오를 찾을 수 있습니다. 새로운 기사는 매일 9 월에 출판됩니다.


https://docs.microsoft.com/en-us/azure/azure-functions/?WT.mc_id=servsept_devto-blog-cxa에서 Microsoft Azure의 서버리스 기능 사용 방법에 대해 자세히 알아보십시오.


당신이 배울 것 


샘플 프로젝트에서 Node 및 Express API를 탐색하고 실행하는 것으로 시작하겠습니다. 그런 다음 Azure Functions 앱을 생성 한 다음 Azure Functions 앱에 대한 Express 경로 및 데이터 호출을 리팩터링합니다. 마지막으로 결과를 함께 살펴 보겠습니다. 이를 통해 다음을 배우게 됩니다.

  1. Azure Function 앱 만들기
  2. 기존 Express API를 Azure Functions로 리팩터링
  3. 접근 방식의 차이점을 이해

이 문서에서는 API를 Express에서 Azure Functions로 전환하는 단계를 안내하지만 GitHub에서 완성 된 샘플 프로젝트를 수행 할 수도 있습니다.


우리는 코드와 단계를 함께 안내 할 것이며 결국에는 시작하는 데 필요한 모든 것에 대한 링크를 공유하고 직접 시도해 봅니다.


서버리스로의 전환 계획 


앱을 서버리스로 전환하기 전에 왜 이 작업을 수행해야 하는지와 전환을 수행하는 데 어떤 노력이 필요한지 생각해 봅시다.


먼저 Express 앱에는 구성 및 유지 관리해야 하는 서버가 필요합니다. 이러한 노력과 비용의 일부를 완화하는 것이 좋을 것입니다.


Express 앱에는 종종 서버를 시작하기 위한 긴 미들웨어 및 논리 목록이 있습니다. 이 샘플 프로젝트에는 최소한의 미들웨어가 있지만 프로덕션 앱에서 더 많은 관심사 (예 : 보안) 및 기능 (예 : 로깅)이 더 필요합니다. 

Azure Functions가 이를 완전히 없애지는 않지만 Azure Functions를 시작하는 데 필요한 로직과 코드는 줄어 듭니다. 

종종 코드와 구성이 거의 없습니다. 

구체적인 예에서 이것이 무엇을 의미합니까? 이 샘플 앱의 경우 server.ts 파일이 효과적으로 사라집니다.


그렇다면 왜 이런 변화를 해야 할까요? 전반적으로 서버리스에 대한 생각은 적습니다.


샘플 프로젝트 정보 


이 기사에서 배우게 될 GitHub의 샘플 프로젝트에는 무엇이 있습니까? 좋은 질문입니다!


이 프로젝트는 TypeScript에서 Azure Functions로 이동 한 간단한 Node Express API 앱을 나타냅니다.


그러나 TypeScript를 사용하지 않으면 어떻게 됩니까? 괜찮아. Express 앱이 JavaScript를 사용하는 경우 JavaScript를 사용하여 Azure Functions로 자유롭게 전환하십시오.


클라이언트 앱은 Angular이지만 Vue 또는 React처럼 쉽게 사용할 수 있습니다. 영웅과 악당 테마는 앱 전체에서 사용됩니다.


Angular 앱을 사용하는 동안 Azure Functions의 가장 큰 장점 중 하나는 컴퓨터에서 로컬로 실행하고 디버깅하며 브라우저, Postman, Insomnia (아래 그림 참조)와 같은 도구를 사용하여 HTTP 함수를 호출 할 수 있다는 것입니다.


Calling Serverless 


시작하기 


코드를 얻고 개발 환경을 설정하는 것으로 시작하겠습니다. 다음 단계에 따라 코드를 준비하십시오.

  1. 이 저장소 복제
  2. npm 패키지 설치
  3. Node Express 및 Angular 코드 작성
git clone https://github.com/johnpapa/express-to-functions.git
   cd express-to-functions
   npm install
   npm run node-ng:build


프로젝트 루트에 .env라는 env.example 파일의 사본을 작성하십시오. 다음 코드를 포함해야 합니다.


NODE_ENV=development
PORT=7070
WWW=./

환경 변수 : 응용 프로그램의 루트에는 .env 파일에 매우 중요한 환경 변수가 있을 수 있습니다. 이 파일은 민감한 정보를 포함 할 수 있으므로 GitHub에 체크인 되지 않습니다.


이제 코드를 사용할 준비가 되었습니다. 그러나 우리가 하기 전에, 물러서서 우리가 가진 것을 보겠습니다.


노드 및 Express API 


이제 GitHub에서 샘플 프로젝트를 살펴 보겠습니다.


이것은 다음 8 개의 엔드 포인트를 제공하는 일반적인 Node and Express 응용 프로그램입니다.


methodroute endpoint
GETheroes
POSTheroes
PUTheroes:id
DELETEheroes/:id
GETvillains
POSTvillains
PUTvillains:id
DELETEvillains/:id


Node Express 앱의 구조는 간단하며 서버 폴더에 포함되어 있습니다.


server
 | - routes
 | | - hero.routes.ts  ? The hero routes
 | | - index.ts
 | | - villain.routes.ts
 | - services
 | | - data.ts         ? The hero data (could be database API calls)
 | | - hero.service.ts ? The logic to get the hero data
 | | - index.ts
 | | - villain.service.ts
 | - index.ts
 | - server.ts         ? The Express server
 | - tsconfig.json


진입 점은 server.ts 코드를 실행하여 Express 서버를 시작하는 server/index.ts 파일입니다. 그런 다음 /heroes와 같은 경로는 /routes 폴더에서 로드 됩니다. 이 경로는 /services 폴더에서 적절한 코드를 실행합니다. data.ts 파일은 앱이 데이터 저장소 구성을 정의하는 위치입니다.

예를 들어 클라이언트 응용 프로그램이 /heroes 경로에 HTTP GET을 만들면 경로는 /services/hero.service.ts 파일의 논리를 실행하여 영웅을 가져옵니다.


서버 폴더에서 Express 논리 코드를 자유롭게 탐색하십시오.


다음은 실행중인 응용 프로그램의 화면 캡처입니다.


Tour of Heroes 


Express 앱 실행 및 디버그 


앱에 익숙해지고 싶을 때 디버거를 사용하여 앱을 실행하고 단계별로 실행하는 것이 도움이 됩니다.


Visual Studio Code에서 앱을 열어 시작하겠습니다.

  1. proxy.conf.json을 열고 포트를 7070 (Google Express 앱)으로 변경하십시오.
  2. VS 코드 명령 팔레트 F1을 엽니다.
  3. 보기 : 디버그 표시를 누르고 Enter 키를 누릅니다
  4. 디버그 익스프레스 및 Angular 선택
  5. F5를 누르십시오
  6. 브라우저가 http://localhost :7070으로 열립니다.

이제 Express 및 Angular 코드에서 중단 점을 설정할 수 있습니다.

여기서 디버거는 Angular 앱의 중단 점에서 중지됩니다.


Debugging Angular 


여기서 디버거는 Express 앱의 중단 점에서 중지됩니다.


Debugging Express 


.vscode / launch.json 및 .vscode / tasks.json 파일은 이 프로젝트의 디버깅 환경에 필수적입니다. 이러한 파일을 탐색하고 자신의 목적을 위해 파일을 복사 / 리팩터링 하는 것이 좋습니다.


Shift 만들기 


이제 앱을 실행하고 Express 시작 부분을 살펴 봤으므로 Express에서 서버리스로의 전환을 계획 해 봅시다. 문제를 더 작은 문제로 분류하여 문제를 해결하고 싶습니다. 이 경우 Node Express 앱을 세분화하여 시작하는 세 가지 주요 영역으로 나눌 수 있습니다.

  1. Express 서버 (주로 server.ts에 있음)
  2. 경로 (routes/*)
  3. 데이터 액세스 로직 (services/.service.ts *)

우리는 이 모든 것을 바꾸면서 한 번에 하나씩 가져갈 것입니다. Express 서버에서 Azure Functions로 전환하는 것으로 시작하겠습니다.


Express ? Azure Functions 


Express 서버는 서버에서 API를 실행합니다. 

대신 API를 실행하기 위해 Azure Functions 프로젝트를 만들 수 있습니다. 

Azure Functions 용 VS 코드 확장을 사용하는 것이 좋습니다. 

설치되면 다음 단계에 따라 컴퓨터에서 Azure Functions를 만듭니다.

  1. F1을 눌러 명령 팔레트를 여십시오.
  2. Azure Functions 입력 및 선택 : 새 프로젝트 만들기
  3. 찾아보기를 선택하여 기능을 작성할 폴더를 찾으십시오.
  4. 프로젝트에 함수라는 새 폴더를 만듭니다.
  5. TypeScript를 선택하십시오
  6. 함수를 작성하라는 프롬프트가 표시되면 지금 건너 뛰기를 선택하십시오.

축하합니다. 방금 Azure Function 앱을 만들었습니다.


Azure Functions 앱은 경로를 제공하는 것입니다.


함수 폴더에 함수 앱을 만들면 동일한 프로젝트에서 Angular 및 Express 앱과 분리 할 수 ​​있습니다. 반드시 동일한 프로젝트에 모두 포함 시킬 필요는 없지만 이 샘플에서는 한 곳에서 모두 볼 수 있습니다.


Shifting Routes-첫 번째 함수 만들기 


Express 앱에 8 개의 엔드 포인트가 있음을 기억하십시오. 다음 단계에 따라 첫 번째 엔드 포인트에 대한 기능을 작성하십시오. 돌아와서 다른 7 개의 엔드 포인트를 곧 만들 것입니다.

  1. F1을 눌러 명령 팔레트를 여십시오.
  2. Azure Functions 입력 및 선택 : 함수 만들기
  3. 함수 유형에 대해 HTTP 트리거를 선택하십시오.
  4. 함수 이름으로 heroes-get을 입력하십시오.
  5. 인증 수준으로 익명을 선택하십시오.

이제 몇 개의 파일을 포함하는 폴더 함수 / 영웅 -get이 있습니다. function.json에는 기능에 대한 구성이 포함되어 있습니다. 

function.json을 열고 메소드가 GET 및 POST를 모두 허용하는지 확인하십시오. 

GET 만 허용하도록 이것을 변경하십시오.


기본적으로 이 함수를 실행하는 경로는 heros-get입니다. Express 앱의 경로는 단순히 영웅입니다. 우리는 이것들이 동일하기를 원하므로 function.json의 바인딩 섹션에 "heroes"엔트리를 추가하십시오. 이제 / heroes에서 HTTP GET을 호출하면 함수가 실행됩니다.


function.json은 다음 코드와 같아야 합니다.


{
  "disabled": false,
  "bindings": [
    {
      "authLevel": "anonymous",
      "type": "httpTrigger",
      "direction": "in",
      "name": "req",
      "methods": ["get"],
      "route": "heroes"
    },
    {
      "type": "http",
      "direction": "out",
      "name": "res"
    }
  ],
  "scriptFile": "../dist/heroes-get/index.js"
}


여기 functions / heroes-get 폴더에 있는 다른 중요한 파일은 index.ts입니다. 이 파일에는 경로가 호출 될 때 실행되는 논리가 포함되어 있습니다. 우리는 이미 Express 앱에서 이 모든 논리를 가지고 있습니다. 우리는 다음에 그것을 얻을 것입니다.


데이터-서비스를 서버리스로 전환 


데이터 저장소와 상호 작용하기 위해 실행되는 모든 논리는 Express 앱의 서버 / 서비스 폴더에 포함되어 있습니다. 이 코드를 들어서 Azure Functions 앱으로 옮기고 몇 가지 작은 조정을 할 수 있습니다. 작동하지 않는 것처럼 보일 수 있지만 Express 앱과 Azure Functions 앱의 차이점을 고려해 보겠습니다. 서비스의 주요 차이점은 다음과 같습니다.

  1. Express 앱은 npm 패키지를 사용하고 Azure Functions 앱은 naz 패키지를 사용합니다. @ azure / functions
  2. Express에는 요청 및 응답을 나타내는 req 및 res 매개 변수가 있습니다. Azure Functions는 이를 컨텍스트 개체 변수 안에 넣습니다.

그것이 우리가 알아야 할 전부입니다. 이 정보를 사용하면 최소한의 변경으로 Express 앱에서 Azure Functions 앱으로 서비스 코드를 복사 할 수 있습니다. 지금 해보자.


Express에서 함수로 코드 이동 


왜 모든 것을 처음부터 작성하고 노력하지 않아도 됩니까? 우리는 Express 앱에서 서비스 코드를 가져 와서 Azure Functions 앱으로 복사 할 수 있습니다.

  1. 서버 / 서비스 폴더 복사
  2. 함수 폴더에 붙여 넣기

이제 코드 대신 Express가 아닌 Azure Functions에서 코드를 작동 시키기 위한 약간의 리팩토링이 있습니다. 여기서 변경되는 한 가지는 라우팅 API와 요청 및 응답이 전달되는 방식입니다. 이 API 차이를 리팩토링해 봅시다.

  1. functions/services/hero.service.ts 파일을 여십시오
  2. 'express'에서 가져 오기 {요청, 응답}을 대체하십시오. '@ azure/functions'에서 import {Context};
  3. (req : request, res : Response)의 모든 인스턴스를 ({req, res} : Context)로 바꾸십시오.

리팩토링을 마치면 코드는 다음과 같습니다. 변경된 장소는 주석 처리되어 있습니다.


// ? This was import { Request, Response } from 'express';
import { Context } from '@azure/functions';
import * as data from './data';

// ? This was async function getHeroes(req: Request, res: Response) {
async function getHeroes({ req, res }: Context) {
  try {
    const heroes = data.getHeroes();
    res.status(200).json(heroes);
  } catch (error) {
    res.status(500).send(error);
  }
}

// ? This was async function postHero(req: Request, res: Response) {
async function postHero({ req, res }: Context) {
  const hero = {
    id: undefined,
    name: req.body.name,
    description: req.body.description
  };

  try {
    const newHero = data.addHero(hero);
    res.status(201).json(newHero);
  } catch (error) {
    res.status(500).send(error);
  }
}

// ? This was async function putHero(req: Request, res: Response) {
async function putHero({ req, res }: Context) {
  const hero = {
    id: req.params.id,
    name: req.body.name,
    description: req.body.description
  };

  try {
    const updatedHero = data.updateHero(hero);
    res.status(200).json(updatedHero);
  } catch (error) {
    res.status(500).send(error);
  }
}

// ? This was async function deleteHero(req: Request, res: Response) {
async function deleteHero({ req, res }: Context) {
  const { id } = req.params;

  try {
    data.deleteHero(id);
    res.status(200).json({});
  } catch (error) {
    res.status(500).send(error);
  }
}

export default { getHeroes, postHero, putHero, deleteHero };


요청 및 응답이 매개 변수 인 네 가지 기능이 있습니다. getHeroes, postHero, putHero 및 deleteHero에 대해 각각 하나씩.


Express 앱의 모든 기능에 대한 매개 변수에는 req 및 res가 포함됩니다. Azure Functions 앱은 여전히 ​​요청 및 응답 개체에 접근 할 수 있지만 컨텍스트 개체 내에 포함되어 있습니다. 우리는 파괴를 사용하여 액세스합니다.


Context 객체에는 log와 같은 다른 API도 포함되어 있습니다 (예 : context.log ( 'hello')). Node 앱에서 사용하는 공통 console.log 대신 사용할 수 있습니다. 


경로 리팩터링 


제 functions/heroes-get/index.ts 파일에서 서비스 경로를 지정하십시오. 해당 파일을 열고 다음 코드로 바꿉니다.


import { AzureFunction, Context, HttpRequest } from '@azure/functions';
import { heroService } from '../services';

const httpTrigger: AzureFunction = async function(context: Context, req: HttpRequest): Promise<void> {
  await heroService.getHeroes(context); // ? This calls the hero service
};

export default httpTrigger;


추가 한 코드는 비동기 함수 heroService.getHeroes를 호출하고 요청 및 응답 객체가 포함 된 컨텍스트를 전달합니다.


나머지 함수 만들기 


Express 앱에는 총 8 개의 엔드 포인트가 있으며 첫 번째 엔드 포인트를 만들었습니다. 이제 다음 단계에 따라 나머지 끝점에 대한 Azure Function을 만듭니다.

  1. F1을 눌러 명령 팔레트를 여십시오.
  2. Azure Functions 입력 및 선택 : 함수 만들기
  3. 함수 유형에 대한 HTTP 트리거 선택
  4. 영웅과 악당의 기능 이름을 입력하십시오. 영웅 추천, 영웅 포스트, 영웅 포스트, 영웅 삭제, 악당 취득, 악당 포스트, 악당 포착, 악당 삭제를 추천합니다)
  5. 인증 수준으로 익명을 선택하십시오.
  6. function.json을 열고 메소드를 get, post, put 또는 delete의 적절한 값으로 설정하십시오.
  7. 바인딩 섹션에서 가져 오기 및 게시에 "heroes"(또는 적절한 악당) 항목 경로를 추가하십시오.
  8. 바인딩 섹션에서 삭제 및 넣기에 "heroes / {id}"(또는 적절한 악당) 항목 경로를 추가하십시오.
  9. 각 함수의 index.ts 파일에 코드를 추가하여 적절한 영웅 또는 악당 서비스 함수를 호출하십시오.

함수 앱 살펴보기 


Azure Functions 앱에 이제 아래와 같이 적절한 끝점에 매핑되는 폴더가 있습니다.


methodroute endpointfolder
GETheroesheroes-get
POSTheroesheroes-post
PUTheroes:idheroes-put
DELETEheroes/:idheroes-delete
GETvillainsvillains-get
POSTvillainsvillains-post
PUTvillains:idvillains-put
DELETEvillains/:idvillains-delete

함수 폴더에 포함 된 Azure Function 앱의 구조는 다음과 같아야 합니다.


functions
 | - heroes-delete
 | | - function.json
 | | - index.ts
 | - heroes-get
 | | - function.json  ? The hero route's configuration
 | | - index.ts       ? The hero routes
 | - heroes-post
 | | - function.json
 | | - index.ts
 | - heroes-put
 | | - function.json
 | | - index.ts
 | - services          ? The same folder that the Express app has
 | | - data.ts         ? The hero data (could be database API calls)
 | | - hero.service.ts ? The logic to get the hero data
 | | - index.ts
 | | - villain.service.ts
 | - villains-delete
 | | - function.json
 | | - index.ts
 | - villains-get
 | | - function.json
 | | - index.ts
 | - villains-post
 | | - function.json
 | | - index.ts
 | - villains-put
 | | - function.json
 | | - index.ts
 | - .funcignore
 | - .gitignore
 | - host.json
 | - local.settings.json
 | - package.json
 | - proxies.json
 | - tsconfig.json


디버그 노드 익스프레스 및 Angular 


이제 앱을 실행하고 모두 작동하는지 확인하십시오. VS Code 디버거를 통해 이 작업을 수행합니다.


개별 항목을 유지하기 위해 Express 앱이 포트 7070을 사용하고 Azure Functions 앱이 포트 7071을 사용하는지 확인합니다. Express 앱 (이 시점에서 절대적으로 할 수 있는)을 실제로 제거하는 경우 동일한 포트를 유지할 수 있습니다 . 그러나 교육을 위해 두 가지 모두를 유지합시다.

  1. proxy.conf.json을 열고 포트를 7071 (우리의 함수 앱)로 변경하십시오
  2. VS 코드 명령 팔레트 F1을 엽니다.
  3. 보기 : 디버그 표시를 누르고 Enter 키를 누릅니다
  4. 디버그 함수 및 각도 선택
  5. F5를 누르십시오
  6. http://localhost :7071에 브라우저를 엽니다

함수 및 Angular 코드에서 중단 점을 설정할 수 있습니다.


Debugging Azure Functions 


.vscode/launch.json 및 .vscode/tasks.json 파일은 이 프로젝트의 디버깅 경험에 없어서는 안될 파일입니다. 이러한 파일을 탐색하고 자신의 목적을 위해 파일을 복사 / 리팩터링 하는 것이 좋습니다. 


선택 사항-Express 앱 제거 


현재 Express 앱은 더 이상 사용되지 않습니다. Express와 Azure Functions 사이를 돌아 다니고 싶다면 자유롭게 삭제하거나 (GitHub 샘플을 항상 다시 복제 할 수 있음) 샘플을 보관하십시오.


요약 


결과적으로 Angular와 Azure Functions가 있습니다. 이제 우리는 서버에 대해 덜 생각할 수 있습니다 (서버리스를 사용하고 있기 때문에 이해하십시오).


Node 및 Express는 매우 강력하며 API 엔드 포인트를 제공하는 데 자주 사용됩니다. 이제 서버리스를 사용하면 API를 변경하고 서버 설정 또는 유지 관리에 대해 걱정할 필요가 없으며 항상 서버 비용을 줄이고 Express 서버를 Azure Functions 서비스로 바꿀 수 있습니다. 또한 노력에 따라 확장 성이 뛰어나고 서버가 아닌 코드에 집중할 수 있는 API를 얻게 됩니다.


Azure Functions 앱을 클라우드에 배포하려는 경우 이 자습서를 따라 배포 할 수 있습니다. Azure 계정 만 있으면 Visual Studio Code 용 Azure Functions 확장을 사용하여 배포 할 수 있습니다. 


샘플 프로젝트를 위한 완벽한 솔루션은 여기 GitHub에 있습니다. 시작하는 방법에 대한 지침은 README 파일에도 있습니다. Express 앱 또는 Azure Functions 앱을 실행하여 차이점을 파악할 수 있습니다. 그런 다음 동일한 시프트를 코드에 적용하십시오. 


Resources 


이 기사에서 다루는 주제에 대한 자료는 다음과 같습니다.


Azure Free Trial 


VS Code 

Azure Functions 


Debugging Resources