[Windows] TypeScript로 Amplify의 Lambda function(+Layer)(로컬 TS→JS) 쓰기

이루고 싶은 일.

저번 보도
Amplify CLI를 사용하여 TypeScript를 사용하여 Lambda 함수를 인코딩하는 방법을 썼습니다.
하지만 다음과 같은 과제가 있다.

Lambda의 소스 코드를 zip화할 때 TS 파일 바디·tsconfig.json 등 여분의 파일도 포함됩니다

GiitHub에 연결하여 CI/CD 환경을 구축하는 경우 소스 코드를 Push할 때 백엔드 구축도 자동으로 실행되기 때문에 Amplify Console 측의 TS 컴파일링

을 고려해야 한다.
따라서 다음과 같은 방침을 논의한다.

TS 파일과 함수의'src'폴더를 분리하여 관리

TS→JS의 컴파일은 로컬에서 진행됩니다. (이것은 다른 문제가 있는 것 같습니다.)

이번 보도에서는 TS 파일에서 JS 파일로 로컬로 컴파일하는 방법을 보존하는 절차를 밟는다.

컨디션

본 보도는 다음과 같은 환경에서 실시된다.

버전

OS: Windows 11

Node.js: v14.16.1

npm: 6.14.12

AWS CLI: 2.1.38

Amplify CLI: 8.0.0

Lambda 실행 시간: nodejs14.X

명명

Amplify Project Name: app

Lambda Layer Name: layer※ 인식용 Amplify Project Name+Lambda Layer Nameapplayer

Lambda Function Name: func

편집기

Visual Studio Code(이하 VScode)

터미널

PowerShell

절차.

Step1. Lambda Layer 만들기

1. amplify add function을 통해 추가

Powershell

$ amplify add function
? Select which capability you want to add: Lambda layer (shared code & resource used across functions)
? Provide a name for your Lambda layer: layer
? Choose the runtime that you want to use: NodeJS
? The current AWS account will always have access to this layer.
Optionally, configure who else can access this layer. (Hit <Enter> to skip) Specific AWS accounts
? Provide a list of comma-separated AWS account IDs: <AWSアカウントID>
✅ Lambda layer folders & files created:
amplify\backend\function\applayer

2. TS 파일 그룹을 관리하는 폴더 만들기

다음 폴더로 이동

$ cd amplify\backend\function\applayer

!
경로에 포함된 applayer는 환경에 따라 다릅니다.
ts 폴더를 생성합니다. 그 중에서 tsconfig입니다.json 만들기

$ New-Item ts -ItemType Directory
$ cd ts
$ tsc --init

개작은 다음과 같다.
tsconfig.json

{
  "compilerOptions": {
    "target": "es2017",
    "noImplicitAny": false,
    "allowJs": true,
    "noImplicitUseStrict": true,
    "types": ["node"],
    "moduleResolution": "node",
    "module": "CommonJS"
  },
  "include": ["."],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

이어서 (layer 폴더)/lib/nodejs 아래의 "package.json"복사
위에서 작성한 ts 폴더에 붙여넣습니다.
PowerShell 명령을 사용하면 다음과 같습니다.
복사된 패키지입니다.json을 열면main을 적당히 고칩니다.
그 다음에'layer.ts'파일을 만듭니다. 여기는'layer.js'입니다.
package.json

Copy-Item -Path ..\lib\nodejs\package.json -Destination .\

이어서 (ts 폴더 내) 일반적인 패키지를 설치합니다.
이번에는 "date-fns"를 설치해 보도록 하겠습니다.

{
  "version": "1.0.0",
  "description": "",
  "main": "layer.js",
  "dependencies": {},
  "devDependencies": {}
}

다음에 ts 파일을 새로 만듭니다.

$ npm install date-fns

TS에 기술하십시오.
layer.ts

$ New-Item layer.ts

3. 중간 폴더 구성

여기까지의 폴더 구성

import { format as _format } from "date-fns";
import ja from "date-fns/locale/ja";

export const formatJa = (date: Date, format: string): string => {
  return _format(date, format, { locale: ja });
};

Step2. Lambda Function 만들기

1. amplify add function을 통해 추가

? Provide existing layers or select layers in this project to access from this function에서 1단계에서 제작한 람바다 레이어(여기는applayer를 선택한다.
Powershell

<プロジェクルート>\amplify\backend\function\applayer
│  applayer-awscloudformation-template.json
│  layer-configuration.json
│  parameters.json
│  
├─lib
│  └─nodejs
│          package.json
│          README.txt
│          
├─opt
└─ts
    │  layer.ts
    │  package-lock.json
    │  package.json
    │  tsconfig.json
    │  
    └─node_modules
        └─date-fns

2. TS 파일 그룹을 관리하는 폴더 만들기

다음 폴더로 이동

$ amplify add function
? Select which capability you want to add: Lambda function (serverless function)
? Provide an AWS Lambda function name: func
? Choose the runtime that you want to use: NodeJS
? Choose the function template that you want to use: Hello World

Available advanced settings:
- Resource access permissions
- Scheduled recurring invocation
- Lambda layers configuration
- Environment variables configuration
- Secret values configuration

? Do you want to configure advanced settings? Yes
? Do you want to access other resources in this project from your Lambda function? No
? Do you want to invoke this function on a recurring schedule? No
? Do you want to enable Lambda layers for this function? Yes
? Provide existing layers or select layers in this project to access from this function (pick up to 5): applayer
? Do you want to configure environment variables for this function? No
? Do you want to configure secret values this function can access? No
? Do you want to edit the local lambda function now? Yes
Edit the file in your editor: <プロジェクトルート>amplify\backend\function\func\src\index.js
? Press enter to continue 
Successfully added resource func locally.

!
경로에 포함된 func는 환경에 따라 다릅니다.
ts 폴더를 생성합니다. 그 중에서 tsconfig입니다.json 만들기

$ cd amplify\backend\function\func

이후에 TS 파일을 만들기 때문에 tsconfig를 먼저 사용합니다.미리 만들기

$ New-Item ts -ItemType Directory
$ cd ts
$ tsc --init

내용을 적절하게 개작하다
tsconfig.json

$ tsc --init

!
경로에 포함된 layer 및 applayer는 환경에 따라 다릅니다.
이어서 (lambda 함수의 폴더)/src의 "패키지. json"을 복사합니다.
위에서 작성한 ts 폴더에 붙여넣습니다.
PowerShell 명령을 사용하면 다음과 같습니다.

{
  "compilerOptions": {
    "target": "es2017",
    "noImplicitAny": false,
    "allowJs": true,
    "noImplicitUseStrict": true,
    "types": ["node"],
    "module": "CommonJS",
    "baseUrl": ".",
    "paths": {
      "/opt/layer": ["../../applayer/ts/layer"],
      "*": [
        "../../applayer/ts/node_modules/@types/*",
        "../../applayer/ts/node_modules/*"
      ]
    }
  },
  "include": ["."],
  "exclude": ["node_modules", "**/*.spec.ts"]
}

3. index.ts 만들기

그런 다음 TS 파일을 만듭니다.

Copy-Item -Path ..\src\package.json -Destination .\

index.ts 쓰기 처리
index.ts

$ New-Item index.ts

aws-lambda에서 TS 오류가 발생할 것 같습니다. (ts 폴더 안에서) npm install 제거할 수 있습니다.
여기까지의 폴더 구성

import { formatJa } from "/opt/layer";
import { Callback, Context, Handler } from "aws-lambda";

interface IEvent {
  arguments: {
    input: {
      message: string;
    };
  };
}

interface IResult {
  statusCode: number;
  body: string;
}

/**
 * @type {import('@types/aws-lambda').APIGatewayProxyHandler}
 */
export const handler: Handler<IEvent, IResult> = async (
  event: IEvent,
  context: Context,
  callback: Callback<IResult>
) => {
  const { message } = event.arguments.input;
  return {
    statusCode: 200,
    body: `${message} ${formatJa(new Date(), "yyyy-MM-dd")}`,
  };
};

Step3. 로컬 컴파일 TS 파일

마지막으로 위에서 작성한 TS 파일을 JS 파일로 컴파일합니다.
프로젝트 루트의 "package.json"에 다음 스크립트를 추가합니다.
package.json

<プロジェクトルート>\amplify\backend\function\func
│  custom-policies.json
│  func-cloudformation-template.json
│  parameters.json
│  
├─src
│      event.json
│      index.js
│      package.json
│      
└─ts
    │  index.ts
    │  package-lock.json
    │  package.json
    │  tsconfig.json
    │  
    └─node_modules

위에서 설명한 대로 프로젝트 경로에서 각 TS 파일을 컴파일할 수 있습니다.
layer를 컴파일할 때

...
  "scripts": {
    ...
    "layer-tsc": "cd amplify\\backend\\function\\%npm_config_folder%\\ts && tsc && move /Y %npm_config_file%.js ..\\opt && xcopy package.json ..\\lib\\nodejs /Y && cd ..\\lib\\nodejs && del package-lock.json && npm install --production && npm prune --production",
    "lambda-tsc": "cd amplify\\backend\\function\\%npm_config_name%\\ts && tsc && move /Y index.js ..\\src && xcopy package.json ..\\src /Y && cd ..\\src && del package-lock.json && npm install --production && npm prune --production"
  },
...

lambda 함수를 컴파일할 때

npm run layer-tsc -folder=applayer -file=layer

이후 GiitHub 등과 합작하면 원본 코드의 정시에 함수를 자동으로 생성합니다.