【画像多め】AWS-Lambda を使って サーバーレス で Express を動かすまでの手順

TL;DL 🗒

以下の手順を画像多めで解説

• aws-serverless-express を使って AWS-Lambdaから Express を実行できるようにする
• Lambda を API Gateway と接続して公開する

これで Serverless Express を公開可能になる

成果物 🎉

Express

動機 🤔

• Serverless で Express をデプロイして AWS-Lambda を Webアプリケーション実行環境としたい
• aws-serverless-express の説明は参考リンクの内容で十分なんだけど、API Gateway の設定で結構はまったので手順を残す
• aws-serverless-express の example に記載の方法で CLIと CloudFormation からデプロイする方法もあるのだけど、既存のexpress アプリケーションをデプロイする方法を確立したかった

環境 💻

• Node.js v8.10.0
• express v4.16.0
• aws-serverless-express 3.2.0

参考リンク

個人開発者のためのaws-serverless-express #kyotojs - Speaker Deck

実行手順

express アプリケーションを作成

$ express aws-lambda-express
$ cd aws-lambda-express
$ yarn

ローカルサーバーを起動しアクセス

$ yarn start

yarn run v1.7.0
warning ../../../../../package.json: No license field
$ node ./bin/www
GET / 200 203.128 ms - 170
GET /stylesheets/style.css 200 3.461 ms - 111
GET /favicon.ico 404 11.657 ms - 1562
GET /favicon.ico 404 8.536 ms - 1562

http://localhost:3000

Express が起動していればOK

aws-serverless-express のインストールと Express への統合

インストール

$ yarn add aws-serverless-express

Lambda の実行ファイルとして index.js を作成

const awsServerlessExpress = require('aws-serverless-express');
const app = require('./app');
const server = awsServerlessExpress.createServer(app);

exports.handler = (event, context) => awsServerlessExpress.proxy(server, event, context);

app.js (Express) に以下の内容を追記

const serverlessExpress = require('aws-serverless-express/middleware');
var createError = require('http-errors');
var express = require('express');

[中略]

var app = express();

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

// middleware として追加
app.use(serverlessExpress.eventContext());

ローカルの設定は以上

AWS Lambda へのデプロイ

Express アプリケーションを Lambda にデプロイするために zip ファイルの作成

$ rm -rf aws.zip && zip -r aws.zip .

AWS Lambda のコンソールで Lambda 関数の作成

事前に IAM Role で Lambda を実行できるRoleを作成しておく

ロールを仕様するサービスは Lambda を選択

新規でLambda を作成

先ほど作成したzipファイルをアップロード

ソースコードを更新可能になる

基本設定のタイムアウトを3秒から1分以上にしておく（初回の実行でエラーになるため）

テストを実行してエラーにならずに ステータスコード 200 で HTMLが返却されているならOK

Lambda のトリガーとなる API Gateway の作成

API を新規作成

メソッドを追加

• 「アクション」ボタンをクリック
• 「メソッドの作成」を選択
• 以下の画像の通りに選択し作成

リソースを追加

• 「アクション」ボタンをクリック
• 「リソースの作成」を選択
• 以下の画像の通りに選択し作成

APIのデプロイ

• 「アクション」ボタンをクリック
• 「APIのデプロイ」を選択

• 新しいデプロイ用のステージを作成しAPIをデプロイ

• 呼び出し用のURLが作成される

アクセスし、画面が表示されれば作成完了

Express

【Visual Studio Code 備忘録】ESLint の autoFixOnSave を有効にする方法

TL;DL 🗒

• VSCode 標準のフォーマッターと ESLint が競合して、ESLint を実行しても保存すると崩れるのにはまった
• デフォルトのformatOnSave を 無効にして eslint.autoFixOnSave を有効にする

{
    "editor.formatOnSave": false,
    "eslint.autoFixOnSave": true,
}

【Javascript 備忘録】JS で 小数点 第 n 位 で四捨五入する

TL;DL 🗒

• JavaScript で 小数点 第 n 位 で四捨五入する

成果物 🎉

【Lambda 備忘録】Node.js を使って Lambda で S3 のファイルの Read/Write

TL;DL 🗒

• AWS Lambda を使って S3 の ファイルの読み書きを行う場合
• 【公式】

AWS Lambda を Amazon S3 に使用する - AWS Lambda

成果物 🎉

Javascript 小ネタ Node.js でローカルのJsonファイルをパース / Object.entries を使って key, value を取得

TL;DL 🗒

• Node.js で Json のパースと key, value の取得
• よく忘れるのでメモ

成果物 🎉

Javascript 小ネタ Node.js でファイル読み込み (一行づつ)

TL;DL 🗒

• Nodeでファイル読み込みの場合 fs , readline を使って 1行づつ読み込む
• よく忘れるのでメモ

成果物 🎉

初学者向けに画面操作で Webpack4 の設定ファイルを生成するWebpack4 Config Generatorをリリースしました

Production 🎉

Webpack4 Config Generator

github.com

What is Webpack4 Config Generator ❓

• 画面からクリックだけで webpack.config.js の元を作成できる
• JS [ react , Vue ] , CSS [ Sass , PostCSS , CSS ] を組み合わせて可
• 生成した ソースをクリップボードにコピー可能
• webpack.cofig.js を使う時に必要な npm modules の一覧化しているので yarn か npm でワンライナーでインストールできる

動機 🤔

• プロジェクト新規作成時に 0 から作るのにググってコピペするのは面倒
• 初学者向けにCLIではなく画面操作で作成できるものを作りたかった
• 自分自身のWebpack とMATERIAL-UI の勉強
• Webpack Config Generator という既存サービスがあるが Webpack4 に対応していないのと react だけでなくVue , Sass , PostCSS にも対応したかった

利用した技術要素 🔧

• magarial-ui 1.1.0
• react 16.4.0
• Github Pages

参考URL 🔧

webpack

Material-UI

Webpack Config Generator

以上、おしまい。