0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

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

Last updated at Posted at 2020-12-26

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

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

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

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

test3.png
test2.png

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

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ファイルのソースコード

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

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

zip -r ../TestProjcet1.zip .

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

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

スクリーンショット 2020-12-26 16.57.18.png

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

スクリーンショット 2020-12-26 17.06.38.png

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

スクリーンショット 2020-12-26 17.11.39.png

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

#AWS API Gatewayの作成

HTTP APIを構築します。
スクリーンショット 2020-12-26 22.21.37.png

次の画面キャプチャのように設定します。(API名は好きにしても構いません)
スクリーンショット 2020-12-26 22.25.59.png

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

test4.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

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

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

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?