こんにちは、弥生のおおはしです。Webアプリケーションエンジニアとしてフロントエンド・バックエンドを担当しています。最近はオンプレからAWSへのデータベース移行なんかもやっています。今回は、サーバレスWebアプリケーションをAWSを使って作成する方法を紹介します。サーバレス?サーバレスとはサーバーを意識する必要が(比較的)要らないアプリケーションアーキテクチャのことです。(『サーバーを使わない』ではありません。)つまり、アプリケーションをサーバレスで開発することは、サーバー管理=運用にかける時間を削減して開発に注力できるという大きなメリットになります。具体的には下記のような作業を減らすことができます。近年DevOps開発(運用と開発を一つのチーム内で行う開発)が増えた背景には、サーバーレスを実現するためのサービスの増加があると言われるほどです。裏で色々とやってくれる反面、柔軟性に制限があるというデメリットもあるので注意が必要です。Gatewayの2サービスで簡単なサーバレスWebアプリケーションを実現します。Lambdaとはコンピューティングサービスです。曖昧すぎるので簡単に言い換えると、他のAWSサービスをプログラミングで自由に操作することができるサービスです。DynamoDBにデータを登録したりS3からファイルを取得したりSQSにキューを登録したりとなんでもできます。関数という単位でプログラムを作るので、今回は「HTMLを返却する関数」を作成します。GatewayとはAPIのホスティングサービスです。APIのI/Oと処理内容を設定すれば直ぐに利用可能なAPIを作成してくれます。今回は処理内容を上記の「HTMLを返却するLambda関数」に設定し、レスポンスのcontent-typeをtext/htmlにすることでブラウザにHTMLを返却するWebアプリケーションを実現します。画像を表示したり、データストアを利用するようなしっかりしたアプリケーションを作る場合は下記の構成図のようにS3やDynamoDBが必要です。今回は割愛するので興味がある方はココやココなどを参考にしてください。作業手順Lambdaでの関数作成方法1.まずはAWSコンソールのLambda画面にいき、右上のオレンジボタン「関数の作成」を押下2.適当な「関数名」を入力し、「ランタイム」で任意のプログラミング言語を選択し、「既存のロール」で任意のロールを作成(ロールはIAMで適当なものを作成してください。Gatewayは設定項目が多くLambdaに比べてとっつきにくいですが、最低限の機能の実現であれば複雑な設定は不要です。Gateway画面にいき、左上の青ボタン「APIの作成」を押下2.適当なAPI名を入力し、エンドポイントタイプで「リージョン」を選択し、APIを作成3.作成されたAPIの設定画面に遷移されるので、アクション>メソッドの作成でメソッドを作成4.作成するメソッドを「GET」にしてチェックボタンを押下し、統合タイプに「Lambda関数」を選択、Lambda関数にさきほど作成したLambda関数名を入力して保存(メッセージボックスが表示されますが、OKで問題ありません。)5.統合レスポンス>マッピングテンプレートでデフォルトの「application/json」を削除し、新たにcontent-typeが「text/html」でテンプレートが「$input.path('$')」のテンプレートを追加6.メソッドレスポンス>200のレスポンス本文にコンテンツタイプが「text/html」でモデルがEmptyのレスポンスを設定7.左上のアクション>APIのデプロイでメソッドを作成>デプロイされるステージで「新しいステージ」を選択してステージ名に任意の名前を入力してデプロイ8.デプロイが完了すると画面上部にエンドポイントURLにアクセス以上で作業は完了です。画面は表示されましたか?まとめ今回は最低限の画面作成でしたが、10分程度でゼロからWebサイトの表示まで行うことができました。上でも書いた通りサーバレスアプリケーションには柔軟性に制限がありますが、この手軽さは大きな魅力だと思います。アプリケーションの規模や開発プロセス、メンバーのスキルなどを考慮してベストであればぜひ利用してみてください。注意AWSサービス全般で言えることですが、利用料金については十分ご注意ください。今回作成したAPIはグローバルに公開されるので、誤ってURLをネット上に公開してアクセスされるとAWSから多額の請求をされる可能性があるので、取り扱いには注意しましょう。会社HPなどの完全に静的なサイトであればS3でもっと簡単に実現可能です。詳しくはこちらなどを参考にしてください。10:32AWSを使ってサーバレスWebアプリケーションを10分程度で作る方法Tweet関連記事2019-12-22Electronアプリの画面側をWebに配置するこんにちは。AppSyncについて勉強してみたこんにちは、弥生の八木です。...2018-12-21UWSCでデスクトップアプリの自動テストこんにちは。WPF開発を試すこんにちは。アーカイブはてなブログをはじめよう!yayoiTechさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。