【AWS Amplify】を使い静的ウェブサイトをホスティング(手動デプロイ)

はじめに

AWS コンソールで AWS Amplify を使った静的ウェブサイトのホスティングについての手順です。

Gitリポジトリを使わず、デスクトップからフォルダをドラッグアンドドロップすれば完了します。

下記、AWSの公式ガイドを参考にさせていただきました。
AWSのAmplifyコンソールユーザーガイド

これより設定手順になります。

事前準備

最低条件として、ファイルアップロード用のHTMLファイルが必要です。

簡単な内容のHTMLでOKです。

下記のように Web フォルダ内に index.html を作成した構造でOK。

Web/
┃
┗ index.html

【AWS Amplify】静的ウェブサイトを手動デプロイ

AWS Amplify コンソールへ遷移

AWS マネジメントコンソールにログイン

1. AWS マネジメントコンソールにログインします。
2. ログイン後、［▼すべてのサービス］を押下します。

［AWS Amplify］のコンソールへ遷移

1. 〔▼全てのサービス〕→〔モバイル〕下の［AWS Amplify］を押下します。

AWS Amplify のコンソール画面へ遷移するはずです。

AWS Amplify 【GET STARTED】

1. ［GET STARTED］ボタンを押下します。

画面の下にスライドします。

1. 【Deliver】
   【Host your web app】下の
   ［Get started］ボタンを押下します。

AWS Amplify 【GET STARTED】

【How your app web】の画面へ遷移するはずです。

1. 【From your existing code】のセクションの
   ［Deploy without Git provider］を選択する。
   
   
2. ［Continue］ボタンを押下します。

【Manual deploy】(手動デプロイ)

【Manual deploy】の画面へ遷移しているはずです。

【Start a manual deployment】セクション

1. App name
   ① アプリケーション名を入力します。
   例：［practice-amplify］
   
   
2. Environment name
   ② 環境名を入力します。
   開発の場合は「development」、運用(本番)は「 production」など
   例：［development］
   
   
3. Method
   ③ファイル指定の方法を選択します。
   　ここでは ［Drag and drop］を選択します。
   
   
4. ファイルをアップロード
   ④ フォルダをドラッグアンドドロップします。
   　これから公開しようとしているPC内のファイルをフォルダごとドロップします。
   　フォルダ直下の index.html がドキュメントルートファイルになります。
   
   
5. ［Save and deploy］ボタンを押下します。

完了

下記が表示されれば、完了です。

「Deployment successfully completed.」

【Domain】下にURLが表示されているので、URLを押下すればWebページが表示されるはずです。

これで、設定完了です。

アプリを削除する場合

1. ①【すべてのアプリ】下のアプリを押下します。
2. 画面右上の ②【アクション▼】［アプリの削除］を押下します。
3. モーダル画面が出てきますので、【テキストボックス】に ③［delete］を入力します。
4. ④［Delete］ボタンを押下します。

あとがき

ドメインを設定することも可能です。

設定には、ドメインと【Amazon Route 53】のサービス登録が必要です。