AWS の開始方法
基本的なウェブアプリケーションを構築する
ウェブアプリケーションをデプロイし、API やデータベースとの対話性を追加する
モジュール 1: ウェブアプリケーションを作成する
このモジュールでは、AWS Amplify コンソールを使用して、ウェブアプリケーションの静的リソースをデプロイします。
はじめに
このモジュールでは、AWS Amplify コンソールを使用して、ウェブアプリケーションの静的リソースをデプロイします。後続のモジュールでは、AWS Lambda と Amazon API Gateway を使用してこれらのページに動的機能を追加し、リモート RESTful API を呼び出します。(REST は「Representational State Transfer」の略で、ウェブサービスを作成するためのアーキテクチャパターンです。API は、アプリケーションプログラムインターフェイスを意味します。したがって、RESTful API はそのアーキテクチャパターンを実装するものです)。
静的ウェブコンテンツ (例: HTML、CSS、JavaScript、イメージなどのファイル) はすべて、AWS Amplify でホストされます。Amplify サービスを選択したのは、静的なウェブサイトをホストし、デプロイするのが簡単になるからです。その後、エンドユーザーは Amplify によって公開されている URL を使用してサイトにアクセスします。
新たに学ぶことがたくさんあることに不安を感じていらしゃっても、どうか心配しないでください。 現在、他の AWS のサービスを使用することはなく、ウェブサーバーを実行する必要もありません。 (「サーバー」とは、ウェブサイトを利用できるようにするために、ネットワークを介して行われたリクエストを受け入れて応答するソフトウェアまたはハードウェアデバイスのことです)。
ウェブサイトは非常にシンプルな「Hello World」ページになり、後のモジュールでさらに機能を追加します。
最も現実に近いアプリケーションでは、サイトをホストするためにカスタムドメインがよく使用されます。「カスタムドメイン」は、www.amazon.com などのウェブサイトを識別する固有のブランド名です。これにご興味がある場合、Amplify はカスタムドメインのサポートも提供しています。
学習内容
- Amplify アプリを作成する方法
- ウェブサイトのファイルを直接 Amplify にアップロードする方法
- Amplify を使用して新しいバージョンのウェブページをデプロイする方法
主要な概念
静的ウェブサイト 静的ウェブサイトは、動的ウェブサイトとは異なり、コンテンツが固定されています。静的ウェブサイトは最も基本的なタイプのウェブサイトで、作成が最も簡単です。必要なのは、いくつかの HTML ページを作成し、それらをウェブサーバーに公開することだけです。
ウェブホスティングはあなたのウェブサイトがインターネット上で閲覧されるのに必要なテクノロジーとサービスを提供します。
AWS リージョン AWS がインフラストラクチャを収容するために使用する個別の地理的エリア。これらは世界中に分散しているため、お客様は最も近いリージョンを選択して、クラウドインフラストラクチャをホストできます。
所要時間
5 分
使用するサービス
モジュールの前提条件
- テキストエディタ。以下に、人気の無料のテキストエディタをご紹介します (アルファベット順):
実装
-
Amplify コンソールでウェブアプリを作成する
- コンピューターでお気に入りのテキストエディタを開きます。新しいファイルを作成し、次の HTML を貼り付けます:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hello World</title> </head> <body> Hello World </body> </html>2.ファイルを index.html として保存します。
3.HTML ファイルのみを ZIP (圧縮) します。
4.新しいブラウザウィンドウで、Amplify コンソールにログインします。注意: このチュートリアルでは、オレゴン (us-west-2) リージョンを使用します。
5.[デプロイ] で、オレンジ色の [今すぐ始める] ボタンをクリックします。
6.[Git プロバイダーなしでデプロイ] を選択します。以下のように画面に表示されるはずです。
7.オレンジ色の [続行] ボタンをクリックします。
8.[App 名] フィールドに、「GettingStarted」と入力します。
9.環境名には、「dev」と入力します。
10.[ドラッグ & ドロップ] メソッドを選択します。以下のように画面に表示されるはずです。
11.[ファイルを選択] ボタンをクリックします。
12.手順 3 で作成した ZIP ファイルを選択します。
13.オレンジ色の [保存してデプロイ] ボタンをクリックします。
14.数秒後、「Deployment successful completed」(デプロイが問題なく完了しました) というメッセージが表示されます。
-
ウェブアプリをテストする
- [ドメイン] の下のリンクをクリックします。
- ウェブアプリが新しいブラウザタブに読み込まれ、「Hello World」が表示されます。 おめでとうございます。
- [ドメイン] の下のリンクをクリックします。
