Webサイト構築・Webシステムやスマホに関する情報を発信しています。

【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】のサービス登録が必要です。






0 件のコメント:

人気記事

ラベル

このブログを検索

Profile

大阪在住、年齢50代のWebプログラマーです。