LoginSignup
2
2

More than 1 year has passed since last update.

自己学習記録:TypeScript を Lambda で使う為には

Last updated at Posted at 2022-11-27

背景

業務で AWS や JavaScript などが必要になった、おじいちゃんの学習記録。

Lambda では TypeScript を使えないってことで、使う方法は?って探したところ
Serverless Framework が見つかった。

で、試してたら、なんか色々あることを知らされる・・

  • serverless
  • SAM
  • AWS-ToolKit for VSCode
    • 結局は、SAM ?

Serverless に対する期待

  • TransCompile しながら Lambda への Deploy が出来そう
  • Serverless Offline もあるので、うまくいったあとは、開発は Offline で
  • Google Cloud Functions/Azure Function などへも deploy 出来るので、覚えておくと役立つかも?

SAM & ToolKit

AWS のサポート受けられるってことでやっぱりこっちなのかな・・と
まぁ、どっちも素人なので・・

こっちを選びたくない理由は、Docker 入れないと Offline 動作が出来ないってところかな。

serverless を試す

  • まずはインストール
install -g: global に
npm install -g serverless

公式ではここで、serverless で、 template 選択って話だけど、typescript にしたかったので、help を確認

template list 確認
serverless create --help

で、一覧を見ると、aws 用のは一つしかない。あとは、Alexa/Azure function/Cloud functions 用かな?

"aws-clojure-gradle", "aws-clojurescript-gradle", "aws-nodejs", "aws-nodejs-docker", "aws-nodejs-typescript", "aws-alexa-typescript", "aws-nodejs-ecma-script", "aws-python", "aws-python3", "aws-python-docker", "aws-groovy-gradle", "aws-java-maven", "aws-java-gradle", "aws-kotlin-jvm-maven", "aws-kotlin-jvm-gradle", "aws-kotlin-jvm-gradle-kts", "aws-kotlin-nodejs-gradle", "aws-scala-sbt", "aws-csharp", "aws-fsharp", "aws-go", "aws-go-dep", "aws-go-mod", "aws-ruby", "aws-provided", "tencent-go", "tencent-nodejs", "tencent-python", "tencent-php", "azure-csharp", "azure-nodejs", "azure-nodejs-typescript", "azure-python", "cloudflare-workers", "cloudflare-workers-enterprise", "cloudflare-workers-rust", "fn-nodejs", "fn-go", "google-nodejs", "google-nodejs-typescript", "google-python", "google-go", "kubeless-python", "kubeless-nodejs""knative-docker", "openwhisk-java-maven", "openwhisk-nodejs", "openwhisk-php", "openwhisk-python", "openwhisk-ruby", "openwhisk-swift", "spotinst-nodejs", "spotinst-python", "spotinst-ruby", "spotinst-java8", "twilio-nodejs", "aliyun-nodejs", "plugin", "hello-world"

Create as "aws-nodejs-typescript"
serverless create -t aws-nodejs-typescript

説明は yaml ファイルだが、実際には typescript

image.png

で、deploy

Deploy
serverless deploy

って普通にやると、Default の us-east-1 にされてしまうので、provider に region 追加してからだった・・

region 追加
    region: "ap-northeast-1",

image.png

非常に簡単に、あげられるのね、と感動

ただ・・以下が素人には課題

  • sourcemap されてる
    • serverless.ts の設定で変えればOK
  • middy されてる
    • 素人には、以下の点で困るところ
      • Lambda 上で簡単に修正することは出来ない。
      • middy や json-schema-to-ts を使わないコードに戻すか、別の Sample を探さないといけない。
        image.png

で、どうせ素人なので、SAM も試してみることに。

エラーと対処

### ts-node 不足
image.png

なんかエラーが出ると思って調べたら、typescript 用の場合、ts-node インストールしろって書いてある・・
image.png

ts-node をinstall して終わり
npm install ts-node

権限不足

image.png

とりあえず、適当にアクセス権を追加して対処。
ここ みたいな感じでちゃんと絞ってね、との記載有り。
最終的には、IAM Access Analyzer でアクセスに応じたポリシーしましょう。

image.png

unable to verify the first certificate

Proxyなので、設定変更して確認

プロキシ設定と確認
$env:http_proxy="http://*.*.*.*:****"
$env:https_proxy="http://*.*.*.*:****"
Get-ChildItem env:h*

sls (serverless の alias) が効かない

image.png
そのままだと、別物に定義されてるので、sls deploy とか効かないので注意

Deployが遅いと感じた場合

ここ を見て、"-f" オプション試してみたら・・・速い!!

コードのみの Deploy
serverless deploy function -f {functionName}

functionName: module.exports.hello = の、"hello" の部分?
Zipのみの更新するので、超速い

Offline 化

Docker 入れずに動かせるのは便利、だけど、そこまで現時点では優先度高くない・・かな

エラー対処

  • npm ERR! code ERR_INVALID_URL
    プロキシの設定でプロトコルを消してた・・
    以下な感じになってたので、"http://" を追加

10.10.10.10:8080

nvm 入れてる場合の、プロキシは以下に version 単位で設定
%appdata%\nvm{version}\etc\npmrc

SAM を試してみる

SAM のインストールから

ダウンロード後、インストール。

Terminal を事前起動してたら、環境変数の反映の為に、Terminal を再起動

version 確認
sam --version

image.png

AWS 認証情報のセットアップ

既にやってあるはずなので Skip

チュートリアル: Hello World アプリケーションのデプロイ

まずはやってみる

initialize
sam init

image.png

  • Template の利用を選択

image.png

  • 一番簡単な Hello World で

image.png

  • Node.js を選択

image.png

  • Zip で

deploy 出来るものは、コンテナか コードzip か

image.png

  • TypeScript が選択出来た!

image.png

  • X-Ray は、本番の時にしか使わなくてよさげ

AWS X-Ray は、リクエストのトレース、例外の収集、およびプロファイリングの機能を使用して、開発者の分散型アプリケーションの動作分析を容易にします。

image.png

初期化が終わったので、ビルドへ

build
cd sam-app
sam build

npm も、serverless も Current Directory にて init していくのに、sam は init するとフォルダ作ってくれるのね・・
先にフォルダ作っちゃったよ・・

build 成功するとこんな感じで、次のアクションを教えてくれる
image.png

で、いよいよ deploy

deploy
sam deploy --guided

ガイド付きでデプロイなので、以下のように色々聞かれて、config が作成されるっぽい
image.png

無事成功
image.png

image.png

Default だと minify & sourcemap: true なので false にしてみると
image.png

まぁ、Lambda 上で修正可能かな?という状況に。
image.png

エラーと対処

  • MAX_PATH エラーが出たら、LongPathsEnabled を設定へ

    • regedit で HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Control\FileSystem を開いて、LongPathsEnabled0 to 1
      image.png
  • Git が入れてないと、最後の選択肢でエラー発生

    • Git Install して解消

  • sam build 時にエラー: Error: NodejsNpmEsbuildBuilder:EsbuildBundle
    • esbuild を install で対処
      • npm install esbuild
        image.png

AWS ToolKit

VS そのものでも良かったけど、VS2022 は業務でまだ使えないのと、2019 のライセンスコード探すの面倒ってのもあって、VS Code で

Tookkit

前提条件(Prerequisite)

  • node.js は nvm で対応済み。npm download
  • AWS SAM CLI もSAM で対処済み
  • Docker は とりあえず放置

AWS Toolkit インストール

image.png

AWS Explorer の設定

  • region 追加
    image.png
    対象 Region をチェックして、OK へ
    image.png
    こんな感じに
    image.png

これ、サービス毎に全部見えるのが素敵。
ただ、何もないサービスは見えないように出来ないものか・・
image.png

せっかくなので、Feedback として以下機能を送信しておいた

  • 「No Custers found] の非表示☑
  • custers 数をサービス名の横に表示
  • フィルター機能 in Explorer

実際に活用?

既に、SAM で sam-app を作ってたので、そこを利用していく

デバッグ設定

image.png

ただ、これするとしたら、Docker インストールが必要だったので、後で・・かな

Deploy 方法

AWS Deploy Application ? 化と思ったら、Update Lambda?
image.png
Region 選択:Config 等で省略可能?
image.png
Zip or Directory
Directory なら、Local のプロジェクトフォルダを選択すればOK
image.png
確認に対して、Yes するだけ
image.png
Upload 待ち
image.png
完了。
image.png

これなら、以下の方が楽なので、なんか設定がある筈・・

  1. CTRL + @
  2. sam deploy

今わかってる ToolKit の利点

  • 利点
    • Explorer で Service が見られる
    • Lambda の場合の GUI 操作
      image.png
      • Invvoke はこんな感じ
        image.png
      • Upload は、VSCode からのコマンドが動く程度で楽になる感じは無い

多分、sam コマンドを打つより楽な方法があるとは思うんだけど・・現状不明
まぁ、sam コマンドと併用していく感じで、少しずつ便利な機能を探していく・・かな。

あとがき

とりあえず、 TypeScript のコードで、Lambda をあげられることは分かった。

課題がいっぱいあり過ぎて参るけど、少しずつ・・頑張るしかないね

今の課題としてはこの辺?

  • SAM でのトリガー変更方法(デフォルトは API Gateway なので)
  • ToolKit の便利な使い方
  • AWS config の理解
  • TypeScript の基礎(そもそも JavaScript すら知らん人なんですけどね :laughing:
2
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
2