【實作紀錄】AWS S3 雲端佈署 × Angular

Dec 2, 2021

嘗試過Heroku以及GitHub Page的佈署，最後使用AWS S3佈署。原因是

Heroku在一段時間沒有被使用後會被伺服器unloaded，所以下次啟動時需要再重新加載，就需要等待那段加載的時間。

GitHub Page若要託管靜態網站，則需要Open Source，意即一般狀態下若要託管，則倉庫必須不能是Private。

AWS S3，沒有以上兩個問題，只是要流量用超過要付錢。(費率文檔)

Amazon S3 是 AWS 免費方案的一部分，您可以免費開始使用。註冊後，AWS 的新客戶可獲得一年期每月 5 GB 的 S3 標準儲存類別 Amazon S3 儲存；20,000 個 GET 請求；2,000 個 PUT、COPY、POST 或 LIST 請求；以及 15 GB 的資料傳出。

主要流程：

建立存放網頁的AWS貯體
將Angular專案上傳到AWS上
設定存取權
啟用

建立存放網頁的AWS貯體

1. 到Amazon S3 建立儲存貯(ㄓㄨˇ)體

2.填寫貯體名稱跟存放的地方

兩個欄位填完後直接拉到最下面，點擊儲存貯體

上傳Angular專案

選擇一個已有的專案(或建立一個新專案)打包後上傳

ng build --prod

回到AWS

1.選擇剛剛建立的貯體

2.上傳

選擇上傳檔案，把"dist/<資料夾>”下的都選起後，拉到最底案上傳

設定存取權

1.打開許可

2.點擊編輯後把所有存取權打開後按儲存變更

3.接著在同頁編輯儲存貯體政策

預設的規則

把他替換為

{     
  "Version": "2012-10-17",     
  "Statement": [         
    {             
      "Sid": "PublicReadGetObject",             
      "Effect": "Allow",             
      "Principal": "*",             
      "Action": "s3:GetObject",             
      "Resource": "arn:aws:s3:::<貯體名稱>/*"         
    }     
  ] 
}