如何託管靜態網頁 到 AWS S3, 搭配 CloudFront(上)

如何託管靜態網頁 到 AWS S3, 搭配 CloudFront(上)
How to use AWS S3 to Static Web Hosting and CloudFront(1)?

本文章將介紹如何將靜態網頁掛載到 s3 上,並透過 CloudFront處理導覽問題


準備好靜態網頁(如果有自己的靜態網站包可以跳過)

我們先使用 angular6 產出一份 SPA 靜態網頁

如果沒有自己的靜態網頁可以 clone 我的樣板

如果 clone 樣板 記得先使用 npm i 安裝依賴

打包:

1
ng build --prod

打包指令

打包指令

打包執行

打包執行

打包後檔案

打包後檔案

登入你的 AWS 並且 到 S3 控制台

創建儲存桶

依照指示建立一個新的S3儲存桶

按下創建儲存桶

下一步到底,不用更改預設

輸入儲存桶資訊

見到剛剛的儲存桶已經產生

儲存桶建立完成

上傳檔案

將剛剛產出的檔案,或自己的網站,全數檔案上傳到裡面

上傳視窗
選取上傳檔案

記得權限設置公共讀取,不然沒有人可以讀你的網站呦

設定公共讀取權限

設置儲存桶為靜態網站託管

  1. 點選屬性標籤
  2. 開啟靜態網站託管項目

  3. 設定索引檔案為你的首頁,這個範例中是 index.html,並且保存

設置靜態網站託管

保存後打開 他指定的網址(在剛剛設置 index.html 的最上面那一串網址))

完成!

網站成果

完成!

恭喜,您已經掛載了你的網站到 s3 上囉!
系列下一篇將介紹搭配 CloudFront 管理路由及 https