託管靜態網站
在 AWS 上託管您的簡單行銷網站或 Web 應用程式
簡介
靜態網站可將 HTML、JavaScript、影像、影片及其他檔案交付給您的網站訪客。靜態網站的成本很低、可靠性極高、幾乎不需要 IT 管理,而且它可擴展來處理企業級流量,無須額外的工作。
您將學到的內容
- 在 AWS Console 中使用 AWS Amplify 託管靜態網站。AWS Amplify 針對靜態網站和 Web 應用程式提供全受管託管。Amplify 的託管解決方案利用 Amazon CloudFront 和 Amazon S3 透過 AWS 內容交付網路 (CDN) 提供您的站點資產。
- 設定持續部署:Amplify 提供一個基於 Git 的工作流程,具有持續部署功能,可讓您在每次執行程式碼時自動部署更新到您的站點。
AWS 經驗
初階
完成時間
10 分鐘
完成教學的成本
- 超出 AWS 免費方案限制:通常為 1-3 USD/月。
- 在 AWS 免費方案限制內:通常為 0.50 USD/月。
若要查看所用服務明細及其相關成本,請參閱 AWS Amplify 和 Amazon Route 53 的定價
教學先決條件
- 有管理員等級存取權限的 AWS 帳戶* 註冊 AWS。
- Git 提供者:您可以使用 AWS CodeCommit (包含在 AWS 免費方案中) 或 GitHub。
上次更新日期
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 託管下的開始使用。
連接您的 GitHub、Bitbucket、GitLab 或 AWS CodeCommit 儲存庫。您也可以選擇手動上傳建置成品,而無需連接 Git 儲存庫 (請參閱手動部署)。在授權 Amplify 主控台後,Amplify 會從儲存庫提供者擷取存取字符,但不會將字符儲存在 AWS 伺服器上。Amplify 僅會使用特定儲存庫中安裝的部署金鑰存取您的儲存庫。
您連接儲存庫服務提供者後,選擇儲存庫,然後選擇對應的分支來建置和部署。
-
確認建置設定
對於所選的分支,Amplify 會檢查您的儲存庫,以自動偵測要執行的建置命令的順序。確認您的建置設定並按一下 Next (下一步)。
-
儲存並部署
檢閱您的所有設定,確保已正確設定每一項。選擇 Save and deploy (儲存並部署) 將您的 Web 應用程式部署到全球內容交付網路 (CDN)。您的前端建置通常需要 1 到 2 分鐘,但因應用程式大小而異。
恭喜您!
您已完成在 AWS 上託管靜態網站教學。