スクショで安心プチハンズオン 〜駆け足でServerless Framework × Lambdaプチハンズオンを雑にまとめてみた〜

## はじめに
ここ最近、AWS周りをコツコツ勉強しております。奥田と申します。

これからAWSを学び始める人やAWSに苦手意識を持っている初学者の人向けに、
ファーストステップとしてのハンズオンとして、手軽に取り組めて且つ便利そうなものはないかなと思い、
今回は『Serverless Framework × Lambdaプチハンズオン』をゆる〜く書いてみることにしました。

取り組みハードルを超下げたかったので、大体5分~30分くらいでできるような感じにまとめました。

※エラー想定など万全の解説文ではないので、必要があればググっていただけると幸いです。🙇
※暇な時に、随時アップデートしようと考えています。

## このハンズオンでできるようになること
Lambda関数は、マネジメントコンソールでぽちぽち手作業で作成/管理等もできますが、関数が増えてくると手入れが大変ですよね。

![ScreenShot 2022-12-15 9.59.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/68296558-4d4f-f67c-0d9d-bd88a771aabb.png)

今回は、Serverless Frameworkを用いて簡単にAWS Lambdaをデプロイしてみましょう。

ちょっとした自動化に使い始めるには便利なので、このハンズオンを通して、これから色々遊べるようになっちゃいましょう。

## プチハンズオンスタート

### まずはAWSマネジメントコンソールにログイン
<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 7.44.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/455a06a7-9101-2bd6-3543-7d671cd81aa3.png)

</details>

※AWSアカウントをまだお持ちでない方はアカウント作成しましょう
[AWS アカウント作成の流れ](https://aws.amazon.com/jp/register-flow/)


### AWS Cloudshellを起動させましょう

検索窓から"cloudshell"と検索すると早いです

<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 7.44.34.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/5cb92236-67b9-9910-85bd-bd270aefa815.png)
</details>

<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 7.44.44.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/f6c63835-1e81-3e78-d594-cdf317023ad2.png)
</details>

### 作業ディレクトリを作成しましょう

任意の命名で、作業ディレクトリを作成しましょう。
今回は分かりやすく"work"としました。
作成したらcdコマンドで移動しましょう。

```
mkdir work
cd work
```

<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 7.40.06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/387caaa2-e08c-2036-7e40-a497b3f53be5.png)

</details>

### [Serverless Framework](https://www.serverless.com/) をインストールしましょう

### 
初期化コマンドで初期化処理をしましょう

```
npm init
```
※途中出てくる質問には全てEnterでOKです。

<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 8.12.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/a6f013b0-37a7-9d6a-e3e2-9cc3ec3cc0c8.png)

</details>

```
npm install --save-dev serverless
```

https://zenn.dev/hrkmtsmt/articles/5f4a0e5c79b77a
<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 8.16.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/1da61f63-62a2-74b8-1366-c47c6499ad36.png)

![ScreenShot 2022-12-15 8.16.43.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/a97dcc7d-63e8-22ac-e2f3-3651d2b03362.png)
</details>


### serverlessアプリを作成しましょう

```
npx serverless create --template aw-nodejs --path myapp
```

<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 8.17.42.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/fc5ca91d-1446-6408-0863-f906d91bd6f0.png)
</details>

作成できたらlsコマンドで作成されたものを一応確認してみましょう

<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 8.27.38.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/4c439f2f-9a11-1ea9-8bea-2bf78898417c.png)
</details>

```
cat serverless.yml | grep -v '^#'

// grep -v '^#' で 「#で始まらない行をすべて選択する」
```

### serverless.ymlを編集しましょう

```
vi serverless.yml
```

#### ① デプロイ先を編集
<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 8.38.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/c10df34f-fd45-f744-864f-c8a2636887fb.png)
</details>

#### ② トリガーイベントを編集（今回はコメントアウトを外すだけ）
<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 8.41.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/c1faa6b0-e18d-1ea1-00ca-99d93581edca.png)

</details>

### 

### デプロイしてみましょう
```
npx serverless deploy
```

<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 8.45.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/037eedbd-c3f7-1c36-22f4-7f9059c4d236.png)

![ScreenShot 2022-12-15 8.54.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/3442a96f-f8c1-3214-2b02-3c83ed2cc3ce.png)
</details>

設定通りに、serverlessフレームワークがLambdaをいい感じにデプロイしてくれましたかと思います🙌
簡単ですね。

### エンドポイントも確認してみましょう

デプロイ実行時に表示されたendpointsのURLをブラウザやcurlコマンドからコールすることも可能になっているので、一緒に確認してみましょう。

<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 9.06.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/c60187b7-4e1f-ad76-e0d9-7496e7309d0c.png)
</details>

### ここまでで一旦完走。　お疲れ様でした！

## appendix

### 他にもいろんなサービスを起点にLambdaを動かしてみよう

・ scheduleイベント
e.g. "AWSの利用料金が心配なので毎日〇時に通知したい"など

・ S3イベント
e.g. "S3にデータが置かれたら〇〇をする"など

https://www.serverless.com/framework/docs/providers/aws/guide/events

色々試して遊んでみてください✨

### cloudformationの書式も埋め込めれる
serverless.ymlの中に、cloudformationの書式も埋め込めるようになっているので、Lambdaで使いたいサービスがあれば一緒に記述しておくことができます。
<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 9.24.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/26ddb39e-4b58-3d28-14bf-14ddcd7cd8fc.png)
![ScreenShot 2022-12-15 9.24.57.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/0cd004c4-d033-2e16-9bce-88d48b9e6703.png)
</details>

### その他Tips

いちいちdeploy作業が面倒な場合は、下記コマンドで、AWS上にLambdaをdeployしなくても実行結果を見ることができたりもします。
```
npx serverless invoke local --function hello
```
<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 7.19.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/0d73ea89-2be2-9918-a879-bf7433ff893b.png)
</details>

<!---
## その他Lambdaを管理する方法
### ① SAM
### ② AWS CDK
https://github.com/aws/aws-cdk
### ③ Amplify

などなど
-->

## お片付け
 
```
npx serverless remove
```
<details><summary>スクリーンショット</summary>

![ScreenShot 2022-12-15 7.32.56.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/0090e20c-cd02-894f-1cf7-7174fa31d3da.png)
</details>


### cloudshellも片付ける場合
ディレクトリを全部消してあげればOKです

## 最後に一言
AWSの悪魔「AWS最高！AWS最高！」

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/274878/68888f13-c582-ef09-7c50-947c3c45db07.png)