託管靜態網站

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

簡介

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

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

您將學到的內容

  • 在 AWS 主控台中使用 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 小時內建立的帳戶可能尚未有權存取本教學課程所需的服務。

實作

  • 建立並連接儲存庫

    要成為本教學,您將需要建立和初始化儲存庫。最簡單的方法是使用命令 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 (儲存並部署) 將您的 Web 應用程式部署到全球內容交付網路 (CDN)。您的前端建置通常需要 1 到 2 分鐘,但因應用程式大小而異。

    8-saveanddeploy

本教學對您是否有幫助?

感謝您
請告訴我們您喜歡的部分。
關閉
抱歉,讓您失望
是有內容過時、令人困擾,或不準確嗎? 請提供意見回饋,協助我們改進此教學課程。
關閉

使用 Amazon S3 託管靜態網站

您也可以使用 Amazon S3 託管您的靜態網站。在 Amazon S3 上託管靜態網站可提供高效能和可擴展的網站,而成本僅為傳統 Web 伺服器的一小部分。

若要在 Amazon S3 上託管靜態網站,請針對網站託管設定 Amazon S3 儲存貯體並上傳您的網站內容。使用 AWS 管理主控台,您可以將 Amazon S3 儲存貯體設定為靜態網站,而無需撰寫任何程式碼。視您的網站需求而定,您還可以使用一些選擇性的組態,包括重新導向、Web 流量記錄,以及自訂錯誤文件。

如需有關在 Amazon S3 上託管靜態網站的詳細資訊,包括指示和逐步演練,請參閱實作指南

恭喜您!

您已成功在 AWS 上建立靜態 Web 應用程式! 下一步,深入了解 AWS Amplify 並查看用於在 AWS 上開發行動和 Web 應用程式的完整工具和服務集。