TypeScriptでServerlessをやりたくなった

技術ネタ
2019-04-03
この記事は約11分で読めます。

AWSのLambdaの話を聞いて、Serverlessに興味を持ってもう3年（もっと？）経った。
その頃から触ってみたいなーと思いつつ、なかなかちゃんと触る機会なかったので触ってみました❗

スポンサーリンク

なぜTypeScript？

もともとJavaを触ってきて今はKotlinなのですが・・・
どちらもLambdaで書くにはあんまり向かないんですよね(；´∀｀)

巷ではnodeやPythonあたりが主流なのかな？
んで、re:InventでRubyも追加されたからこっちも少し増えてくるかなと。

ただ、僕自身node.jsもPythonもRubyもまともにやったことない(；´∀｀)

というわけで、まともにProjectで使ったことある自分のリソースだとTypeScriptになるんです。
まぁ、TypeScriptも得意な部類ではないですが１から覚え直すよりましかなと。

というわけで、ベースだけ作ってみたので書き残しまーす❗
AWS-CLIは入ってるものとして、credentialsも設定済みとします。

yarnを入れてみた

最近はnpmではなく、yarnの記事をちょくちょく見るので今回はこっちを入れてみた。
ここ見るとどっちでも良さそうですが・・・ｗ

MacなのでhomebrewでInstall

brew install yarn

インストール先は/usr/local/Cellar/yarn/1.15.2/bin/yarnでした。
とりあえずはsampleプロジェクトのディレクトリ切って、その中でyarnの初期化

$ mkdir serverless-typescript-sample
$ cd serverless-typescript-sample
$ yarn init
yarn init v1.15.2
question name (serverless-typescript-sample): 
question version (1.0.0): 
question description: 
question entry point (index.js): 
question repository url: 
question author: 
question license (MIT): 
question private: 
success Saved package.json
✨  Done in 13.12s.

package.jsonが出来上がります。

{
  "name": "serverless-typescript-sample",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT"
}

環境構築

Git

Gitの初期化とリモートリポジトリ追加。
リモートリポジトリはGithubなので、その他の場合は適宜変更で。

git init
git remote add origin git@github.com:*************************************.git

Serverless Freamwork

今回はグローバル領域にインストールしないで、node_module内にしておきます。
先程入れたyarnでインストール❗

yarn add serverless
yarn add v1.15.2
info No lockfile found.
[1/4] 🔍  Resolving packages...
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 281 new dependencies.
info Direct dependencies
└─ serverless@1.40.0
info All dependencies
~~~~
✨  Done in 6.61s.

インストールが終わったらプロジェクトも作ってしまいます。
aws-nodejs-typescriptの場合はpackage.jsonに変更が加わるので、すでにあるとエラーになります。
とりあえずひとつ下の階層にパス指定して同じ名前のディレクトリつくります。

yarn sls create -t aws-nodejs-typescript -p serverless-typescript-sample

こんな感じになるので、serverless-typescript-sampleディレクトリの中身を全部上のディレクトリに移動します。
package.jsonだけは丸コピするとserverlessが消えちゃうので手動でやります。

移動前
移動後
//手動で直した後のpackage.json
{
  "name": "serverless-typescript-sample",
  "version": "1.0.0",
  "description": "Serverless webpack example using Typescript",
  "main": "handler.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "dependencies": {
    "serverless": "^1.40.0",
    "source-map-support": "^0.5.10"
  },
  "devDependencies": {
    "@types/aws-lambda": "^8.10.17",
    "@types/node": "^10.12.18",
    "serverless-webpack": "^5.2.0",
    "ts-loader": "^5.3.3",
    "typescript": "^3.2.4",
    "webpack": "^4.29.0"
  },
  "author": "The serverless webpack authors (https://github.com/elastic-coders/serverless-webpack)",
  "license": "MIT"
}

package.jsonを変更したので、yarn installで依存関係の更新

ローカル開発環境の構築

serverless-offline

ローカルでLambdaを実行できるようにする。

$ yarn add -D serverless-offline
yarn add v1.15.2
[1/4] 🔍  Resolving packages...
warning serverless-offline > h2o2 > joi@10.6.0: This version is no longer maintained. Please upgrade to the latest version.
warning serverless-offline > hapi > catbox > joi@10.6.0: This version is no longer maintained. Please upgrade to the latest version.
warning serverless-offline > hapi > heavy > joi@10.6.0: This version is no longer maintained. Please upgrade to the latest version.
warning serverless-offline > hapi > podium > joi@10.6.0: This version is no longer maintained. Please upgrade to the latest version.
warning serverless-offline > hapi > shot > joi@10.6.0: This version is no longer maintained. Please upgrade to the latest version.
[2/4] 🚚  Fetching packages...
[3/4] 🔗  Linking dependencies...
[4/4] 🔨  Building fresh packages...
success Saved lockfile.
success Saved 37 new dependencies.

インストールしたらserverless.ymlのpluginに以下の追記

plugins:
  - serverless-offline

追記出来たらyarn sls offline startでローカルサーバーの起動をする。

yarn sls offline start
yarn run v1.15.2
$ /Users/hisayuki/vscode/serverless-typescript-sample/node_modules/.bin/sls offline start
Serverless: Bundling with Webpack...
Time: 1348ms
Built at: 2019/03/30 22:01:55
         Asset     Size   Chunks             Chunk Names
    handler.js  129 KiB  handler  [emitted]  handler
handler.js.map  146 KiB  handler  [emitted]  handler
Entrypoint handler = handler.js handler.js.map
[./handler.ts] 307 bytes {handler} [built]
[./node_modules/buffer-from/index.js] 1.56 KiB {handler} [built]
[./node_modules/source-map-support/register.js] 25 bytes {handler} [built]
[./node_modules/source-map-support/source-map-support.js] 17.6 KiB {handler} [built]
[./node_modules/source-map/lib/array-set.js] 3.12 KiB {handler} [built]
[./node_modules/source-map/lib/base64-vlq.js] 4.6 KiB {handler} [built]
[./node_modules/source-map/lib/binary-search.js] 4.15 KiB {handler} [built]
[./node_modules/source-map/lib/mapping-list.js] 2.28 KiB {handler} [built]
[./node_modules/source-map/lib/source-map-consumer.js] 39.6 KiB {handler} [built]
[./node_modules/source-map/lib/source-map-generator.js] 14 KiB {handler} [built]
[./node_modules/source-map/lib/source-node.js] 13.5 KiB {handler} [built]
[./node_modules/source-map/source-map.js] 405 bytes {handler} [built]
[fs] external "fs" 42 bytes {handler} [optional] [built]
[module] external "module" 42 bytes {handler} [optional] [built]
[path] external "path" 42 bytes {handler} [built]
    + 3 hidden modules
Serverless: Watching for changes...
Serverless: Starting Offline: dev/us-east-1.

Serverless: Routes for hello:
Serverless: GET /hello

Serverless: Offline listening on http://localhost:3000

これでcurlや直接ブラウザでLambdaを実行することが出来ます❗

$ curl http://localhost:3000/hello
{"message":"Go Serverless Webpack (Typescript) v1.0! Your function executed successfully!",....

まとめ

  • テンプレートのaws-nodejs-typescriptがpackage.jsonがあることでうまくいかないところについては面倒なのですが、ぶっちゃけグローバルにserverlessをインストールすれば特に問題ないですｗ
  • その点以外については、割とスムーズに環境構築ができたので難しくはないと思います。
  • ローカル実行環境やテスト環境なども以前やったときより簡単になったきがする

とりあえずはベースが出来たので、ちまちまと作っていこうかなと。
DynamoDBとの連携とかも今はスムーズに出来るっぽいので次回はそこまでやりまーす！

スポンサーリンク

コメント