【10分AWSハンズオン】ExpressをAWS Lambda+API Gatewayにデプロイする

# やること

Lambda 上の Express にアクセスできるようにする。


# 学べること

* サーバレス Express アプリケーションの作り方
* Lambda へのデプロイ
* API Gateway と Lambda の連携



# 扱わないこと

* Infrastructure as Code
* TypeScript
* CI/CD

# STEP 1 : Serverless Express

1-1. 適当なディレクトリに Node.js プロジェクトを作成し、必要なパッケージをインストールします。

```sh
$ npm init -y
$ npm i express @vendia/serverless-express
```

:::note warn
`Node.js` がインストールされている必要があります。
`n` という Node.js のバージョン管理ライブラリを使用するのがおすすめです。
Mac を使用している方で、Homebrew がインストール済みの方は、以下のコマンドで Node.js をインストールできます。

```sh
$ brew install n
$ n latest
```
:::

:::note
`express` と一緒にインストールした `@vendia/serverless-express` が重要です。これがないと、API Gateway から渡されたイベントを、Lambda にある Express でルーティングできません。
:::
 
---

1-2. JavaScript ファイルを作成して、コードを書き込みます。

```sh
$ touch index.js
```

```js:index.js
const serverlessExpress = require('@vendia/serverless-express')
const app = require('express')()

app.use('/', (req, res) => res.send(`root`));
app.use('/hello', (req, res) => res.send(`hello`));

// ローカル確認用
if (process.env.NODE_ENV === `develop`) app.listen(3000)

exports.handler = serverlessExpress({ app })
```

---

1-3. 以下のコマンドを実行し、http://localhost:3000 にアクセスすると `root`、　http://localhost:3000/hello にアクセスすると `hello` と表示されます。

```sh
$ NODE_ENV=develop node index.js
```

---

1-4. Lambda へアップロードするために、プロジェクト全体を圧縮した zip ファイルを作成しておきます。（普通に Finder とかエクスプローラーでやって大丈夫です。）

```sh
$ zip serverless-express.zip .
```

# STEP 2: Lambda

2-1. AWS Lambda ダッシュボードの `関数を作成` ボタンをクリックします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/e4bf9e47-d243-b133-36ba-89f1401b36c3.png" width=150>

---

2-2. 種類は「一から作成」、関数名は適当に「serverless-express-lambda」として、`関数の作成` ボタンをクリックします。

---

2-3. 「コード」タブの `アップロード元` ドロップダウンから、`.zip ファイル` を選択し、1-4で作成したzipファイルをアップロードします。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/15fce41b-03ae-1bd2-3b04-b7a850773ae3.png" width=200>


# STEP 3: API Gateway

3-1. API Gatewayのダッシュボードから、`APIを作成` ボタンをクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/555ae466-57ce-e6e4-cb02-9c6dc82b1cb8.png" width="150">

---

3-2. APIタイプは `HTTP API` を使用します。`構築` ボタンをクリックしてください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/85565154-82a5-3b60-3a70-388f6a6735d3.png" width=600>

---

3-3. 「統合」は、STEP 2 で作った Lambda 関数を選択してください。API 名は適当に「serverless-express-api」とします。`次へ`ボタンをクリックしてください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/fde790c0-ca8b-33e7-2dfb-5e0dd07eed66.png" width=600>

---

3-4. 「ルートを設定」は、リソースパスを `/{proxy+}` に書き換えます。これにより、全てのパスへのリクエストを STEP 2 で作成した lambda 関数に流すことができます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/6955d3c6-7ee4-2c46-90eb-8bec0d2d7f6d.png" width=600>

---

3-5. 「ステージを設定」は変更せず、そのまま `作成` してください。


# STEP 4: 権限を付与する

:::note
`/` や `/hello` のような静的なルーティングでは問題なかったのですが、`/{proxy+}` を使用すると、API GatewayからLambda関数へのアクセスできなかったので、このステップで権限を付与します。
:::
---

4-1. API Gateway コンソールで、先ほど作成した API の詳細ページを開きます。左のタブから、「統合」を選択してください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/7969154d-7980-d122-3249-82bbc0d73cfe.png" width=150>

---

4-2. `/{proxy+}`内の`ANY`を選択して、「ルートの統合の詳細」を表示してください。


<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/728540ed-bf47-ee54-f0be-6aa1a7bdeebb.png" width=700>

---

4-3. `ポリシーステートメントの例` をクリックして展開し、下の図に赤枠で示した`arn:aws: ... /{proxy+}`の部分をコピーしておいてください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/f61904aa-5311-49d8-afac-27de1325f929.png" width=700>

---

4-4. Lambdaダッシュボードを開いて、`設定` ＞ `アクセス権限` にアクセスします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/c348c846-6c70-b259-136e-8242c89f8776.png" width=500>

---

4-5. 「リソースベースポリシー」内の `アクセス権限を追加` をクリックします。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/8ac47ef7-1cd7-7270-422d-fffffdd5802c.png" width=600>

---

4-6. `AWSのサービス` を選択し、下の画像のように入力して保存します。`ソースARN` には、4-3 でコピーした ARN をペーストしてください。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/63193175-30c5-82a3-da13-db71bb36a879.png" width=700>



# STEP 5 : アクセスしてみる

5-1. API Gatewayから、API の詳細ページに移動します。「URLを呼び出す」の下にある URL にアクセスすると、`root` と表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/0e20d225-ee52-2933-d9bb-a517a63db024.png" width=400>

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/15864d18-d0ef-ba1f-d7b9-6c2059bdff20.png" width=500>

---

5-2. URLの末尾に `hello` を追加してアクセスすると、`hello` と表示されます。

<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/227791/be18496b-3891-2b86-5b89-8259fece7ea1.png" width=500>

---

ここまでできたら完成です！お疲れ様でした🙇‍♂️