静的ウェブサイトをホスティングする

静的ウェブサイトをホスティングする

はじめに

静的ウェブサイトは、HTML、JavaScript、画像、動画などのファイルをウェブサイトの訪問者に提供します。静的ウェブサイトは非常に低コストで、信頼性が高く、IT 管理はほとんど必要ありません。また、追加作業を行うことなく、エンタープライズレベルのトラフィックを扱えるようスケールすることができます。

よくある質問については、こちらを参照してください >>

学習内容

  • AWS コンソールで AWS Amplify を使って静的ウェブサイトをホスティングします。AWS Amplify は、静的ウェブサイトおよびウェブアプリにフルマネージドのホスティングを提供します。Amplify のホスティングソリューションは、Amazon CloudFront と Amazon S3 を使って、AWS コンテンツ配信ネットワーク (CDN) を介してサイトアセットを提供します。
  • 継続的デプロイをセットアップします。Amplify は、継続的デプロイで Git ベースのワークフローを提供します。それにより、コードコミットごとに、サイトに自動的に更新をデプロイすることができます。

 AWS 経験

初心者

 所要時間

10 分

 完了までのコスト

AWS で静的ウェブサイトをホスティングする際の総コストは、使用状況によって異なります。

使用されているサービスと関連コストの内訳については、AWS AmplifyAmazon Route 53 の料金を参照してください。

 チュートリアルの前提条件

 
[*] 過去 24 時間以内に作成されたアカウントには、このチュートリアルに必要なサービスへのアクセス権がまだ付与されていない可能性があります。

実装

  • リポジトリの作成と接続

    このチュートリアルでは、リポジトリを作成して初期化する必要があります。create-react-app コマンドを使用するのが最も簡単に行う方法です。コマンドプロンプトまたはターミナルで次のコマンドを使用して、このパッケージをインストールします。

    接続するリポジトリを既に持っている場合 ステップ c までスキップします。
    Git プロバイダーに接続せずにデプロイしますか? こちらをクリックして開始します。
    npx create-react-app amplifyapp
    cd amplifyapp
    npm start

    このステップでは、GitHub レポジトリを作成してコードをレポジトリにコミットします。このステップを完了するには、GitHub アカウントが必要です。まだお持ちでない場合はこちらでサインアップしてください。

    a.アプリ用の新しい GitHub レポジトリを作成します (リンク)

    Front End GitHub Repository Module 1

    b.Git を初期化して、コマンドラインインターフェイスで以下のコマンドを実行する新しい GitHub レポジトリにアプリケーションをプッシュします。

    git init
    git remote add origin git@github.com:username/reponame.git
    git add .
    git commit -m “initial commit”
    git push origin master

    c.リポジトリを接続するには、Amplify コンソールにログインして、[Deploy (デプロイ)] から [Get started (使用開始)] を選択します。

    1-gettingstarted

    GitHub、Bitbucket、GitLab、AWS CodeCommit のリポジトリを接続します。また、Git リポジトリを接続せずにビルドアーティファクトを手動でアップロードすることもできます (「手動デプロイ」を参照)。Amplify コンソールを承認すると、Amplify がリポジトリプロバイダーからアクセストークンを取得しますが、AWS サーバーにはトークンを保存しません。Amplify は、特定のリポジトリにインストールされているデプロイキーのみを使用してリポジトリにアクセスします。

    2-connectrepository

    リポジトリサービスプロバイダーを接続したら、リポジトリを選択し、構築およびデプロイするブランチを選択します。

    3-repositorybranch
  • ビルド設定を確認する

    Amplify は、選択したブランチのリポジトリを検査し、実行するビルドコマンドのシーケンスを自動的に検出します。ビルド設定を確認して、[Next (次へ)] をクリックします。

    next-host
  • 保存してデプロイする

    すべての設定を確認して、すべてが正しく設定されていることを確認します。[Save and deploy (保存してデプロイ)] を選択して、ウェブアプリをグローバルなコンテンツ配信ネットワーク (CDN) にデプロイします。フロントエンドのビルドには通常 1~2 分かかりますが、アプリのサイズによって異なる場合があります。

    8-saveanddeploy

このチュートリアルは役に立ちましたか?

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

Amazon S3 を使用して静的ウェブサイトをホスティングする

Amazon S3 を使って静的ウェブサイトをホスティングすることもできます。Amazon S3 で静的ウェブサイトをホスティングすると、きわめて高性能かつスケーラブルなウェブサイトを、従来のウェブサーバーよりも少ないコストで実現できます。

Amazon S3 で静的ウェブサイトをホスティングするときは、Amazon S3 バケットをウェブサイトホスティング用に設定し、そこにウェブサイトのコンテンツをアップロードします。AWS マネジメントコンソールを使えば、コードを書かなくても Amazon S3 バケットを静的ウェブサイトとして設定することができます。ウェブサイトの要件に応じて、リダイレクト、ウェブトラフィックログ記録、カスタムエラードキュメントといった任意の設定を使用することも可能です。

Amazon S3 での静的ウェブサイトのホスティングに関する詳細 (手順やステップバイステップのチュートリアルを含む) については、実装ガイドを参照してください。

おめでとうございます

AWS で静的ウェブアプリケーションを構築できました。 次のステップでは、AWS Amplify を深く掘り下げ、AWS でモバイルおよびウェブアプリを開発する際の、充実したツールやサービスについてご紹介します。