2018年12月17日

プログラミング

Serverless FrameworkでAWS Lambdaアプリを開発しよう!(前編)

目次

  1. はじめに
  2. AWSアクセスキーの設定
  3. Serverlessプロジェクト作成
  4. 初回デプロイ
  5. まとめ

はじめに

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

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

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

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

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

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

つまづきやすいポイント

  • 使い慣れたエディタではなくブラウザ上でコードを書いていて、バージョン管理もしていない
  • APIの仕様を確認するためにドキュメントと何度も行き来する必要がある
  • デプロイしてみて初めて間違いに気づいたり、エラーの意味がわからない

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という名前のユーザーを追加しています)

IAM_Management_Console.png (209.8 kB)

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

IAM_Management_Console.png (240.3 kB)

アクセスキー入力

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.jshello 関数が呼び出されるようになっています。Lambdaアプリから使うためのS3やDynamoDBリソースの作成もここに記述できます。

--template に指定できるテンプレートの一覧は、 sls create --help コマンドか、 こちらで確認できます。また、--template-uriでGitHubなどのリポジトリを指定することもできます。

プロジェクト名の設定

このままだとプロジェクト名が 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プロジェクトの作成とデプロイの方法をご紹介いたしました。
前編では基本的な部分しか見れませんでしたが、雰囲気だけでも掴んでいただければ嬉しいです。
後編では実際にコードを書いていって、開発に便利な機能などをご紹介する予定ですので、ご期待ください!

2

1

AUTHOR

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

eishisでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

新しい技術が好きなWebエンジニアです。 元々インフラやPHPをやっていたのですが、最近はReact NativeとFirebaseを使って頑張ってます。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザイン・HTML/CSSマークアップ・JSアニメーション実装を担当しています。

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

CONTACT PAGE TOP