Serverless FrameworkでAWS Lambdaアプリを開発しよう！（前編）

はじめに

この記事は 新しい技術にチャレンジし続けるeishisのアドベントカレンダー 17日目の記事です！

昨日はマテリアルデザインについて、ちょっと細い所まで踏み込んだ考察の記事でした。

マテリアルデザインを読んで学んだ、実践で使えるデザインテクニック第一弾

今回はServerless FrameworkとTypeScriptを使ってAWS Lambda(Node.js)アプリを効率的に開発する方法を紹介します！

サーバーレスは敷居が高い？

AWS Lambdaを使ったサーバーレスアプリケーションは使ったことがなくても興味のある方は多いかと思います。一方で、チュートリアルなどに沿ってAWS Lambdaを触ってみようとすると、以下のようなつまづきやすいポイントがあると感じています。

1つ目の問題は、ローカルで開発したコードをzipファイルにまとめてS3にアップロードし、Lambdaにデプロイするという方法で解消できます。 このデプロイ作業をコマンド1つで行ってくれるのが Serverless Framework というツールです。今回はAWS Lambdaで利用しますが、他にもGoogle Cloud Functionsなど複数のサーバーレス環境に対応しています。

2つ目・3つ目の問題は、TypeScriptを導入することによって改善することができます。TypeScriptはJavaScriptに静的型付けなどの機能を加えた言語で、コンパイルすると通常のJavaScriptのコードが出力されます。馴染みがない人にとっては、これを聞くと難しそう・面倒くさそうという印象を受けるかと思います。しかしTypeScriptを使うと必要なパラメータが足りないとき即座にエラーを出してくれたり、VSCodeなどのエディタと連携して関数名を補完してくれたりするため、結果として開発効率は上がります。

AWSアクセスキーの設定

Serverless FrameworkではAWS CLIと共通のアクセスキーを使用するため、まずAWS CLIのアクセスキーの設定が必要になります。
駆け足な説明になってしまいますので、詳しくはAWSのドキュメントもご覧ください。

https://docs.aws.amazon.com/ja_jp/cli/latest/userguide/cli-chap-welcome.html

AWS CLIのインストール

Macでhomebrewを使っている場合は、 brew コマンドでインストール可能です。

$ brew install awscli

それ以外の環境の場合は、pythonの pip コマンドを使います。

$ pip install awscli --upgrade --user

CLI用ユーザー作成

IAMコンソールからユーザーを追加します。この際、「プログラムによるアクセス」にチェックを入れます。
ユーザー名は何でもいいですが、区別できるような名前にしておきましょう。（下の画像ではserverlessという名前のユーザーを追加しています）

アクセスポリシーの画面で AdministratorAccess をアタッチします。（説明を簡略化するためにAdministratorAccessを付与していますが、よく理解してポリシーを設定してください）

アクセスキー入力

aws configure コマンドを実行し、先ほど控えた「アクセスキーID」「シークレットアクセスキー」を入力します。
主に東京リージョンを使う場合は、Default region nameに ap-northeast-1 を入力します。

$ aws configure
AWS Access Key ID [None]: *********
AWS Secret Access Key [None]: *********
Default region name [None]: ap-northeast-1
Default output format [None]: json

Serverlessプロジェクト作成

Serverless Frameworkのインストール

Serverless Frameworkはnpmを通してグローバルにインストールします。

$ npm install -g serverless

これで serverless コマンドが使えるようになるのですが、 sls という短いコマンドでも呼び出せるようになっているので、こちらを使ってみましょう。

$ sls -v
1.35.0

この記事の公開時点では、Serverless Framework 1.35.0がインストールされました。

sls create 実行

新しくディレクトリをつくり、その中でServerlessプロジェクトを作成します。今回は hello-serverless というディレクトリ名で aws-nodejs-typescript テンプレートを使用します。

$ mkdir hello-serverless
$ cd hello-serverless
$ sls create --template aws-nodejs-typescript
Serverless: Generating boilerplate...
 _______                             __
|   _   .-----.----.--.--.-----.----|  .-----.-----.-----.
|   |___|  -__|   _|  |  |  -__|   _|  |  -__|__ --|__ --|
|____   |_____|__|  \___/|_____|__| |__|_____|_____|_____|
|   |   |             The Serverless Application Framework
|       |                           serverless.com, v1.35.0
 -------'

Serverless: Successfully generated boilerplate for template: "aws-nodejs-typescript"
Serverless: NOTE: Please update the "service" property in serverless.yml with your service name

sls create が完了すると、カレントディレクトリに以下のようなファイルが作成されます。

.
├── .gitignore
├── handler.ts
├── package.json
├── serverless.yml
├── source-map-install.js
├── tsconfig.json
└── webpack.config.js

この中で特に重要なのは以下の2ファイルです。

handler.tsLambdaアプリの本体です。デプロイ前にJavaScriptに変換されて handler.js という名前でAWS Lambdaにデプロイされます。

serverless.ymlServerlessプロジェクトの設定ファイルです。テンプレートから作成した時点では、 /hello のアクセスに対して handler.js の hello 関数が呼び出されるようになっています。Lambdaアプリから使うためのS3やDynamoDBリソースの作成もここに記述できます。

プロジェクト名の設定

このままだとプロジェクト名が aws-nodejs-typescript になってしまいますので、初めに変更しておきます。

serverless.ymlのnameを修正します。

service:
  name: hello-serverless
...

package.jsonのnameも aws-nodejs-typescript になっているので、これも修正します。ついでに誤ってnpmに公開してしまわないように "private": true も追加しておきましょう。

{
  "name": "aws-nodejs-typescript",
  "private": true,
  ...

依存関係のインストール

sls create を行っただけでは npm install は実行されないので、手動で実行する必要があります。

$ npm install

もしくはyarnを使います。

$ yarn install

初回デプロイ

ここまでの設定が完了していると、 sls deploy コマンドでデプロイが可能です。

$ sls deploy
(中略、少し時間がかかります)
..............................
Serverless: Stack update finished...
Service Information
service: aws-nodejs-typescript
stage: dev
region: us-east-1
stack: aws-nodejs-typescript-dev
api keys:
  None
endpoints:
  GET - https://********.execute-api.us-east-1.amazonaws.com/dev/hello
functions:
  hello: hello-serverless-dev-hello
layers:
  None

endpointsのところに表示されるURLにブラウザからアクセスすると、以下のような結果が表示されるかと思います。

{
  "message":"Go Serverless Webpack (Typescript) v1.0! Your function executed successfully!",
  "input":{
    ...
  }
}

実際には "input": に続く内容が大量に続くため一見すると分かりづらいですが、 handle.ts と見比べてみると、ブラウザの表示内容は hello 関数の返り値のbodyの内容と一致しています。

export const hello: APIGatewayProxyHandler = async (event, context) => {
  return {
    statusCode: 200,
    body: JSON.stringify({
      message: 'Go Serverless Webpack (Typescript) v1.0! Your function executed successfully!',
      input: event,
    }),
  };
}

今回はここまでですが、デプロイしたものをそのままにしてしまうとわずかですが料金が発生してしまうため、 sls remove コマンドで削除しておきましょう。

$ sls remove

まとめ

AWS Lambdaアプリを効率的に開発する方法として、Serverless Frameworkプロジェクトの作成とデプロイの方法をご紹介いたしました。
前編では基本的な部分しか見れませんでしたが、雰囲気だけでも掴んでいただければ嬉しいです。
後編では実際にコードを書いていって、開発に便利な機能などをご紹介する予定ですので、ご期待ください！