VSCode、ローカルでLambda開発環境準備->デプロイ->AWSのURLで確認までの手順

#自己紹介  
先ずは簡単な自己紹介させていただきます。 
僕は今まで10年間以上のWeb開発経験があり、その中に、４年間ぐらい日本での開発してきました。 
日本人ではないので、投稿に日本語の文法がおかしい所があるかもしれません。 
技術的な面を主にご覧いただければ、いいかなと思います。

#今回の内容について簡単な説明
●VSCode利用して、ローカルでLambda（Node.js）開発環境の構築
●AWSのLambdaにソースコードのデプロイ
●AWS API Gatewayの作成（プロトコル:HTTP）
●AWS API Gatewayにより、生成されたURLで画面内容の確認

#開発フォルダの初期化
手順は以下になります。
①VSCodeで新規フォルダを開く
②npm環境の初期化（事前にnpmのインストールが必要）
③aws sdkのインストール

```shell
cd /Users/name/Documents/workspaces/lambda/nodejs/TestProject1/
npm init
npm install aws-sdk
```

![test3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977522/e0649052-397e-3bbc-bb98-ad003600b587.png)
![test2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977522/3acdb44c-d9a0-6f63-99d6-11f52a5fecd3.png)


#コーディング及びデプロイ用のzipファイル作成
サンプルソースコードを用意しましたので、全体の流れを体験するために、コピペでも良いかなと思います。

```javascript:index.js
'use strict'

let fs = require('fs')
let path = require('path')

exports.handler = (event, context, callback) => {

  let filePath = path.join(__dirname, 'index.html')
  let html = fs.readFileSync(filePath).toString()

  sendHtmlResponse(context, 200, html)

}

// レスポンス
function sendHtmlResponse(context, statusCode, html) {
  let response = {
    'statusCode': statusCode,
    'headers': {
      'Content-Type': 'text/html'
    },
    'body': html
  }
  context.succeed(response)
}
```

HTMLファイルのソースコード

```html:index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>テスト画面</title>
</head>

<body>
    <h1>Hello World!</h1>
    <p>メイン画面</p>
</body>
</html>
```

ファイルができたら、プロジェクトフォルダの構造は以下のようなになるはずです。

```
TestProject1/
　├ node_modules/
　├ index.html
　├ index.js
　├ package-lock.json
　└ package.json
```

次のコマンドでプロジェクトフォルダを圧縮します。

```shell
zip -r ../TestProjcet1.zip .
```

できたzipファイルはプロジェクトの上層フォルダに格納されているはずです。

##AWSで新規Lambda関数作成及びデプロイ
「一から作成」、ランタイム（Node.js 12.x）がデフォルトのままで、関数名だけ入力して、作成します。

![スクリーンショット 2020-12-26 16.57.18.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977522/f77b7d5f-cd0c-81f7-3665-be190a7cccc8.png)

作成できたら、次の画面が表示されます。「アップロード元」ボタンをクリックして、「zip ファイル」の選択肢にクリックします。

![スクリーンショット 2020-12-26 17.06.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977522/7c7c9c15-ed97-021c-c0be-543baf724c98.png)

そして、アップロードに先ほどできたzipファイルを選択して、保存します。

![スクリーンショット 2020-12-26 17.11.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977522/d7bd1f97-c2ec-cba4-af3b-f04234e7e007.png)

成功のメッセージが出たら、デプロイ作業が完了しました。

#AWS API Gatewayの作成

HTTP APIを構築します。
![スクリーンショット 2020-12-26 22.21.37.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977522/d3cc263d-0f32-97ba-9f8f-231b2ea00f28.png)

次の画面キャプチャのように設定します。（API名は好きにしても構いません）
![スクリーンショット 2020-12-26 22.25.59.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977522/464734f5-8a0b-60f2-5e99-2583a07d8a9a.png)

ルート、ステージの設定はデフォルトのままで大丈夫です。
作成できたら、次のような画面が表示されます。

![test4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977522/0948e8cb-d85b-f942-1e30-6580462ba67e.png)

#AWS API Gatewayにより、生成されたURLで画面内容の確認
以上の手順に問題がなければ、「URLを呼び出す」欄のリンクをコピーして、URLの最後にLambda関数名を連結して、ブラウザでアクセスと、作成した画面が表示されるはずです。

連結のURLは以下のようになります。
https://xxxxxxx.execute-api.ap-northeast-1.amazonaws.com/TestProject1
xxxxxxxはAPI GatewayのAPI IDによって違います。
ap-northeast-1は東京リージョンです。AWSのリージョンによって違います。

![スクリーンショット 2020-12-26 22.49.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/977522/f527c493-5008-999a-3441-7931600d2386.png)

今回の手順にはaws-sdkをインストールしなくても同じ効果になりますが、実際開発する時にAWSの他のサービスの使用を簡略化するために、基本的に使われています。

以上、ご覧いただきありがとうございました！