Frontend is for Everyone (Japanese)

ラボの概要

スクリプティングの経験と新しいアイデアを持つテクノロジーの専門家にとって、概念実証や MLP (Minimum Lovable Product、愛着を持たれるか検証する最小限の製品) のフロントエンドを構築することは、非常に難しいと感じるかもしれません。このシナリオでは、Linux インスタンスをプロビジョニングして、チームで使用できるようにするタスクを任されています。適切にタグ付けされた Elastic Compute Cloud (EC2) インスタンスを起動する AWS Lambda 関数を記述することで、このプロセスはすでに改善されています。しかし、AWS コンソールへのログインを必要としないウェブベースのセルフサービスツールがあるとしたら、どのようなプロセスになるでしょうか? このラボでは、ユーザーが EC2 インスタンスを起動および終了できる認証機能を備えたサーバーレスでフルスタックのシングルページアプリケーションを構築します。

ユーザーインターフェイスを構築するための React ライブラリの機能について学習します。その後、AWS Amplify を使用して AWS のサービスを追加し、それらをフロントエンドと統合します。この作業には、Amazon Cognito を介した認証の追加や、Amazon API Gateway を搭載したセキュアな REST API の作成が含まれます。さらに、AWS Lambda によるサーバーレス機能でバックエンドを拡張し、Amazon EC2 サービスを操作します。

最後に、AWS Amplify を使用してアプリケーションのホスティングを追加し、Amazon CloudFront を使用して AWS のコンテンツ配信ネットワークでエンドユーザーに配信できるようにします。アプリケーションの開発はすべて、AWS Cloud9 IDE 内で発生します。

目標

このラボを修了すると、以下ができるようになります。

• AWS でフルスタックのウェブアプリケーションを作成し、ホストする。
• state、effects、props などの React の概念を実装する。
• AWS Amplify を使用して、AWS で認証、API、関数、ホスティングリソースを作成する。
• フロントエンドをバックエンドサービスと統合する。

所要時間

このラボの所要時間は約 60 分です。

アイコンキー

このラボでは、さまざまな種類の手順と注記への注意を促すため、各種アイコンが使用されています。以下のリストは、各アイコンの目的を説明したものです。

• コマンド: 実行する必要があるコマンド。
• 想定される出力: 出力のサンプルであり、コマンドまたは編集済みファイルの出力を確認するときに使用する。
• 注意: ヒントや重要なガイダンスを表す。
• 警告: 特記事項または重要な情報を表す (この情報を読み忘れても、機器やデータに問題が発生するというわけではありませんが、特定のステップを繰り返す必要が生じる可能性があります)。
• 検討: あるコンセプトを自分の環境でどのように応用できるかを考えたり、学習中のトピックについて議論したりする時間。
• ナレッジチェック: 知識を確認し、理解度をテストする。
• 更新: ウェブブラウザのページやリストを更新して、新しい情報を表示する必要があることを示す。
• タスク完了: ラボのまとめや要点を示す。