2023年12月08日(金曜日)
2023年12月8日(金)に、アウトプット共有会・勉強会を本社会議室とリモートを併用して開催しました。
今回のテーマ：
Nuxt.js、AWS Lambdaを使用したWebアプリのマークアップ・サーバーレス開発勉強会（入門編）
アウトプット・勉強会の趣旨：
Amazonが提供しているクラウドサービスの「AWS」（Amazon Web Services）は、手軽に開発環境を整えることができ、幅広い現場で導入されており、今後も引き続き高い需要があります。
今回は最近増加しているサーバレスのAWS Lambdaを使用し、簡単な掲示板アプリ構築を題材に、Nuxt.jsを使用したwebアプリ開発を実践解説しました。
今回はガジュマルのメンバーが講師になり、自身が勉強した中で得た知見をアウトプットするという形で発表を行いました。
AWS初心者向けの内容として、サーバレス開発とは何か、という基礎的なところから始まり、開発に必要なサービスの洗い出し、実際に作成した掲示板アプリのデモンストレーションまで、
質疑応答を交えながら、以下の流れで解説を行いました。
■サーバレスとは？
・正確にはサーバ”管理”レス
・システム開発・運用を行う上で必要なサーバの構築や管理が不要であり、サーバを意識しない考え方
・自社で管理する必要のない程度の部分をお任せできるサービスモデル
■サービスモデルの違い
・BaaS（Backend as a Service）
データベース、ストレージ、ユーザ認証などのアプリケーションに必要なバックエンド機能を個別に提供するモデル
開発者は本来必要な環境構築、運用にかかる手間が不要になる
・FaaS（Function as a Service）
アプリケーションの機能やコードを小さな単位で分割し、それを個々の関数としてクラウド上で実行するモデル
イベントに反応して関数を実行するのが特徴
■サーバレスのメリット
・運用の簡素化、コストの削減、スケーラビリティ向上
■サーバレスに向いている例
・短時間のタスク、トラフィックが少ないサービス、初期コストを抑えたい場合など
■サーバレスに向いていない例
・大規模なデータ処理、高度なカスタマイズが必要な場合、費用を固定したい場合など
■サーバレスを実現する代表的なサービス
・Lambda、DynamoDB、S3、CloudFront、Amazon Cognito、Amazon SNS
［掲示板アプリを作ってみる］
以下の機能がある掲示板を作成します。
・投稿画面がある
・名前、タイトル、メッセージなどを書く欄がある
・不正な入力はエラーが出る
・投稿一覧がある
・投稿一覧にリンクがあり、各投稿の詳細にリンクしている
・投稿詳細はそれぞれ別のurlでアクセスできる
①必要なサービスを洗い出す
・アプリのエンジンを動かすランタイム→Lambda
・投稿データを保存するデータベース→DynamoDB
・静的なファイルを保存するストレージ→S3
・リクエストの切り分け、https接続→CroudFront
②アプリの作成手順 ～ビルドまで
・プロジェクトを作成
・DynamoDBのテーブル構成を考える
・データ登録用APIを作成
・indexページ用APIを作成
・詳細ページ用APIを作成
・indexページ、詳細ページを作成
・Zodによるバリデーションを実装
・ビルド
③ローカル環境での動作確認
・AWS環境のエミュレーション「LocalStack」
・AWSの展開している様々なサービスの一部をエミュレートしてくれる
・基本的なサービスのみの無料版と利用できるすべてのサービスが使える有料版がある
・Lambda、API Gateway、S3、DynamoDBは無料版で利用可
・アカウントを作成するとGUIでサービスの状態を確認できる
今回はDynamoDBのみ使用する
・導入
・環境変数の設定
・開発用サーバの起動
・テーブルの作成
・実際に登録、参照を確認する
④ビルド&デプロイ AWSコンソール上での設定
・Serverless Frameworkのインストール
・IAMの作成
・AWSCLIのインストール
・ビルド
・Serverlessでデプロイ
・DynamoDBのテーブル作成
・S3の設定
・CloudFrontの設定
・動作確認
⑤掲示板アプリ完成
【質疑応答】
質問：今後、実現したいサービスを開発するためにAWSサービスの取捨選択が必要になると思うが、今回はどうやってサービスを決めていったのか？
回答：自分で調べていく中で必要なサービスを取捨選択していった。
質問：参考にした、参考になったテキストやソースはありますか？どうやって勉強していったのか教えて欲しい
回答：今回はAWSについて専門的な業者が出しているナレッジを読んだり、ネット上の情報をひたすら検索してキャッチアップしていった。
【参加者の声】
●「サーバーレスってそもそもどういうこと？という状態でしたが、クラウドサービスを活用して管理の手間がなくなるというメリットがあることが分かりました」
●「LocalStackを詳しく知らなかったので、勉強になりました。AWSは固定費用ではないというところで苦手意識がありましたが、今後は自身の業務にも取り入れてみようと思いました」
●「AWSにまったく触れたことがなく、サーバーレスとは何かというところがイメージができていませんでしたが、AWSでできることが具体的になりました。エンジニア以外の、サービスの企画段階に携わる人こそ知るべきだと思いました」
【講師コメント】
AWSをまったく知らないところから、「現在需要が多いサービスで、低コストで運用できそう」というところで手を付けましたが、奥が深かったです。
Lambdaなどを使うとなるとサーバーの知識が少なからず必要になるので、今後も勉強・スキルアップしていきたいと思います。
株式会社ガジュマルでは、今後も定期的に技術勉強会や、エンジニアの交流イベントを開催していきます！
興味がある方、参加してみたいという方は、以下の公式LINEを友だち追加のうえ、お気軽にお問合せください。
LINE登録はこちら
今回のテーマ：
Nuxt.js、AWS Lambdaを使用したWebアプリのマークアップ・サーバーレス開発勉強会（入門編）
アウトプット・勉強会の趣旨：
Amazonが提供しているクラウドサービスの「AWS」（Amazon Web Services）は、手軽に開発環境を整えることができ、幅広い現場で導入されており、今後も引き続き高い需要があります。
今回は最近増加しているサーバレスのAWS Lambdaを使用し、簡単な掲示板アプリ構築を題材に、Nuxt.jsを使用したwebアプリ開発を実践解説しました。
今回はガジュマルのメンバーが講師になり、自身が勉強した中で得た知見をアウトプットするという形で発表を行いました。
AWS初心者向けの内容として、サーバレス開発とは何か、という基礎的なところから始まり、開発に必要なサービスの洗い出し、実際に作成した掲示板アプリのデモンストレーションまで、
質疑応答を交えながら、以下の流れで解説を行いました。
■サーバレスとは？
・正確にはサーバ”管理”レス
・システム開発・運用を行う上で必要なサーバの構築や管理が不要であり、サーバを意識しない考え方
・自社で管理する必要のない程度の部分をお任せできるサービスモデル
■サービスモデルの違い
・BaaS（Backend as a Service）
データベース、ストレージ、ユーザ認証などのアプリケーションに必要なバックエンド機能を個別に提供するモデル
開発者は本来必要な環境構築、運用にかかる手間が不要になる
・FaaS（Function as a Service）
アプリケーションの機能やコードを小さな単位で分割し、それを個々の関数としてクラウド上で実行するモデル
イベントに反応して関数を実行するのが特徴
■サーバレスのメリット
・運用の簡素化、コストの削減、スケーラビリティ向上
■サーバレスに向いている例
・短時間のタスク、トラフィックが少ないサービス、初期コストを抑えたい場合など
■サーバレスに向いていない例
・大規模なデータ処理、高度なカスタマイズが必要な場合、費用を固定したい場合など
■サーバレスを実現する代表的なサービス
・Lambda、DynamoDB、S3、CloudFront、Amazon Cognito、Amazon SNS
［掲示板アプリを作ってみる］
以下の機能がある掲示板を作成します。
・投稿画面がある
・名前、タイトル、メッセージなどを書く欄がある
・不正な入力はエラーが出る
・投稿一覧がある
・投稿一覧にリンクがあり、各投稿の詳細にリンクしている
・投稿詳細はそれぞれ別のurlでアクセスできる
①必要なサービスを洗い出す
・アプリのエンジンを動かすランタイム→Lambda
・投稿データを保存するデータベース→DynamoDB
・静的なファイルを保存するストレージ→S3
・リクエストの切り分け、https接続→CroudFront
②アプリの作成手順 ～ビルドまで
・プロジェクトを作成
・DynamoDBのテーブル構成を考える
・データ登録用APIを作成
・indexページ用APIを作成
・詳細ページ用APIを作成
・indexページ、詳細ページを作成
・Zodによるバリデーションを実装
・ビルド
③ローカル環境での動作確認
・AWS環境のエミュレーション「LocalStack」
・AWSの展開している様々なサービスの一部をエミュレートしてくれる
・基本的なサービスのみの無料版と利用できるすべてのサービスが使える有料版がある
・Lambda、API Gateway、S3、DynamoDBは無料版で利用可
・アカウントを作成するとGUIでサービスの状態を確認できる
今回はDynamoDBのみ使用する
・導入
・環境変数の設定
・開発用サーバの起動
・テーブルの作成
・実際に登録、参照を確認する
④ビルド&デプロイ AWSコンソール上での設定
・Serverless Frameworkのインストール
・IAMの作成
・AWSCLIのインストール
・ビルド
・Serverlessでデプロイ
・DynamoDBのテーブル作成
・S3の設定
・CloudFrontの設定
・動作確認
⑤掲示板アプリ完成
【質疑応答】
質問：今後、実現したいサービスを開発するためにAWSサービスの取捨選択が必要になると思うが、今回はどうやってサービスを決めていったのか？
回答：自分で調べていく中で必要なサービスを取捨選択していった。
質問：参考にした、参考になったテキストやソースはありますか？どうやって勉強していったのか教えて欲しい
回答：今回はAWSについて専門的な業者が出しているナレッジを読んだり、ネット上の情報をひたすら検索してキャッチアップしていった。
【参加者の声】
●「サーバーレスってそもそもどういうこと？という状態でしたが、クラウドサービスを活用して管理の手間がなくなるというメリットがあることが分かりました」
●「LocalStackを詳しく知らなかったので、勉強になりました。AWSは固定費用ではないというところで苦手意識がありましたが、今後は自身の業務にも取り入れてみようと思いました」
●「AWSにまったく触れたことがなく、サーバーレスとは何かというところがイメージができていませんでしたが、AWSでできることが具体的になりました。エンジニア以外の、サービスの企画段階に携わる人こそ知るべきだと思いました」
【講師コメント】
AWSをまったく知らないところから、「現在需要が多いサービスで、低コストで運用できそう」というところで手を付けましたが、奥が深かったです。
Lambdaなどを使うとなるとサーバーの知識が少なからず必要になるので、今後も勉強・スキルアップしていきたいと思います。
株式会社ガジュマルでは、今後も定期的に技術勉強会や、エンジニアの交流イベントを開催していきます！
興味がある方、参加してみたいという方は、以下の公式LINEを友だち追加のうえ、お気軽にお問合せください。
LINE登録はこちら
