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 コンソールでウェブアプリを作成する
    1. コンピューターでお気に入りのテキストエディタを開きます。新しいファイルを作成し、次の 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 プロバイダーなしでデプロイ] を選択します。以下のように画面に表示されるはずです。

    full-stack amplify console module one AmplifyAppSetup

    7.オレンジ色の [続行] ボタンをクリックします。

    8.[App 名] フィールドに、「GettingStarted」と入力します。

    9.環境名には、「dev」と入力します。

    10.[ドラッグ & ドロップ] メソッドを選択します。以下のように画面に表示されるはずです。

    full-stack amplify console module one AmplifyManualDeploy

    11.[ファイルを選択] ボタンをクリックします。

    12.手順 3 で作成した ZIP ファイルを選択します。

    13.オレンジ色の [保存してデプロイ] ボタンをクリックします。

    14.数秒後、「Deployment successful completed」(デプロイが問題なく完了しました) というメッセージが表示されます。

  • ウェブアプリをテストする
    1. [ドメイン] の下のリンクをクリックします。
    2. ウェブアプリが新しいブラウザタブに読み込まれ、「Hello World」が表示されます。 おめでとうございます。

アプリケーションのアーキテクチャ

現在のアーキテクチャは次のとおりです。

full-stack amplify console arch diagram module 1

現時点では AWS Amplify コンソールのみを使用しているため、これはかなり最小限です。これで、ユーザーが操作できるライブウェブアプリケーションができました。次に、Lambda 関数を作成します。

このモジュールは役に立ちましたか?

ありがとうございます
このチュートリアルで良かった点をお聞かせください。
閉じる
ご期待に添えず申し訳ありません
古い説明、わかりにくい説明、間違った説明はございませんでしたか? このチュートリアルの改善のために、ぜひフィードバックをお寄せください。
閉じる

サーバーレス関数を構築する