託管靜態網站

在 AWS 上託管您的簡單行銷網站或 Web 應用程式

簡介

靜態網站可將 HTML、JavaScript、影像、影片及其他檔案交付給您的網站訪客。靜態網站的成本很低、可靠性極高、幾乎不需要 IT 管理,而且它可擴展來處理企業級流量,無須額外的工作。

如需詳細資訊,請參閱常見問題集 >>

您將學到的內容

  • 在 AWS Console 中使用 AWS Amplify 託管靜態網站。AWS Amplify 針對靜態網站和 Web 應用程式提供全受管託管。Amplify 的託管解決方案利用 Amazon CloudFront 和 Amazon S3 透過 AWS 內容交付網路 (CDN) 提供您的站點資產。
  • 設定持續部署:Amplify 提供一個基於 Git 的工作流程,具有持續部署功能,可讓您在每次執行程式碼時自動部署更新到您的站點。

 AWS 經驗

初階

 完成時間

10 分鐘

 完成教學的成本

在 AWS 託管靜態網站的總成本取決於您的用量
  • 超出 AWS 免費方案限制:通常為 1-3 USD/月。
  • 在 AWS 免費方案限制內:通常為 0.50 USD/月。

若要查看所用服務明細及其相關成本,請參閱 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 (儲存並部署) 將您的 Web 應用程式部署到全球內容交付網路 (CDN)。您的前端建置通常需要 1 到 2 分鐘,但因應用程式大小而異。

恭喜您!

您已完成在 AWS 上託管靜態網站教學。

後續步驟

您可遵循下方的後續步驟部分,繼續您的 AWS 旅程。

本頁對您是否有幫助?