静的ウェブサイトをホストする

シンプルなマーケティングウェブサイトまたはウェブアプリケーションを AWS でホストします。

はじめに

静的ウェブサイトは、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 時間以内に作成されたアカウントには、このチュートリアルに必要なサービスへのアクセス権がまだ付与されていない可能性があります。

 最終更新日

2022 年 9 月 27 日

実装

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

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

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

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

    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 コンソールにログインし、ページの上部にある [使用開始] を選択して、次に [Amplify ホスティング] の下の [使用開始] を選択します。

    amplify-getstarted

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

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

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

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

お疲れさまでした。

AWS で静的ウェブサイトをホストする」チュートリアルを終了しました。

次のステップ

以下のセクションの次のステップに従って、AWS でのジャーニーを続けることができます。

このページはお役に立ちましたか?