? ? ? ? 首先聲明下，使用“CodeBuild”部署并不是“正統”的方案，因為AWS提供了“CodeDeploy”。如果不希望引入太多基礎設施，可以考慮直接使用CodeBuild進行部署。（轉載請指明出于breaksoftware的csdn博客）

創建構建項目

? ? ? ? kronos是我們項目的名稱，因為之前已經建好測試環境，所以本次我們使用“online”作為其屬性。

? ? ? ??

? ? ? ? 因為需要通過一套代碼去自動化構建和部署，還要區分“生產”和“測試”環境，所以我們引入環境變量來做區分。我們的“生產”環境部署在us-east-1區域上，于是我們設置

? ? ? ? 其他使用默認設置，但是需要確認如下幾點：

• 選擇使用Buildspec文件

• 記錄下角色名稱

添加buildspec文件

? ? ? ? 進入代碼工程，在根目錄添加名字為“buildspec.yml”的文件。由于我們是Vue項目，需要使用npm構建，于是寫入以下內容

version: 0.2phases:install:runtime-versions:nodejs: 12commands:pre_build:commands:build:commands:- npm install- npm run build- aws s3 sync dist --region $REGION s3://$REGION-kronos-web/

? ? ? ? 其中$REGION是上個步驟中設置的環境變量。

? ? ? ? 由于我們將“生產”和“測試”環境部署在不同的區域中，可以使用region作為“切換條件”。相應的，如果這套代碼在“測試”環境的自動化部署中執行時，上述使用aws上傳文件的流程將會把文件提交到“測試”環境對應的存儲桶中。(關于使用S3存儲桶托管靜態網頁的方案見《AWS攻略——使用S3托管靜態網頁》）

? ? ? ? 最后將該文件提交到代碼庫。我們使用的是CodeCommit（關于如何使用CodeCommit見《AWS攻略——使用CodeCommit托管代碼》）。

配置角色權限

? ? ? ? 進入IAM管理頁面，在角色中找到第一步中角色名稱。

? ? ? ? 點擊其策略，對策略進行編輯。

? ? ? ? 為了簡單起見，我們讓該策略擁有所有S3的所有資源和權限。（實際使用時，要做好權限管理，不要這么粗放）

構建和部署

? ? ? ? 進入kronos_online部署頁面，點擊“啟動部署”。部署成功后，我們會看到如下界面

總結

以上是生活随笔為你收集整理的AWS攻略——使用CodeBuild进行自动化构建和部署静态网页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。