附註：

• 此教學課程需要存取 Oracle Cloud。若要註冊免費帳戶，請參閱開始使用 Oracle Cloud Infrastructure Free Tier 。
• 它使用 Oracle Cloud Infrastructure 憑證、租用戶及區間的範例值。完成實驗室時，請以雲端環境特有的值取代這些值。

使用 OCI DevOps Service 和 OCI Object Storage 簡化前端 CI/CD

簡介

本教學課程：設定 Oracle Cloud Infrastructure (OCI) Object Storage 和 Oracle API Gateway for Static Website Hosting ，說明如何在 OCI Object Storage 和 Oracle API Gateway 上使用預先編譯 (AOT) 來代管靜態編譯的 JavaScript 應用程式。

若要建立完整的生產工作流程，本教學課程將引導您使用 Oracle Cloud Infrastructure DevOps 服務，為靜態前端網站設定健全的 CI/CD DevOps 管線。

OCI DevOps 服務是適用於開發人員的端對端持續整合和持續提供 (CI/CD) 平台。DevOps 工程師可以使用這項服務，輕鬆在 Oracle Cloud 上建置、測試及部署軟體和應用程式。DevOps 建置和部署管線可減少變更導向的錯誤，並減少客戶花費在建置和部署發行版本的時間。此服務還提供專用 Git 儲存區域來儲存您的程式碼，並支援連線至外部程式碼儲存區域。

目標

• 使用 OCI DevOps 服務和 OCI 物件儲存為靜態前端網站設定強大的 CI/CD DevOps 管線。

必要條件

• 存取 Oracle Cloud 租用戶。

作業 1：建立 OCI 物件儲存的儲存桶

在 OCI 物件儲存建立新的儲存桶。此儲存桶將用來代管您的靜態網站，如設定 OCI 物件儲存和 Oracle API Gateway for Static 網站託管中所述。

工作 2：建立 DevOps 專案

瀏覽至開發人員服務、DevOps 、專案、按一下建立 Devops 專案、輸入專案名稱、選取通知主題，然後按一下建立。

注意：如果您尚未建立新的通知主題，就必須加以建立。

工作 3：建立程式碼儲存區域

您可以選擇建立新的專用 Git 儲存區域，或鏡射 OCI 程式碼儲存區域中現有的儲存區域。

注意：請依照下列文件：設定儲存區域，與您的程式碼儲存區域進行互動。

使用下列程式碼在儲存區域中建立 build_spec.yaml 檔案。這將作為我們 DevOps 建置的建置規格。

version: 0.1
component: build
timeoutInSeconds: 1000
shell: bash
env:
  variables:
  # exportedVariables are made available to use as parameters in sucessor Build Pipeline stages
  # For this Build to run, the Build Pipeline needs to have a BUILDRUN_HASH parameter set
  exportedVariables:
    - BUILDRUN_HASH

steps:
  - type: Command
    name: "Define unique build tag"
    timeoutInSeconds: 140
    command: |
      echo "OCI_BUILD_RUN_ID: ${OCI_BUILD_RUN_ID}"
      export BUILDRUN_HASH=`echo ${OCI_BUILD_RUN_ID} | rev | cut -c 1-7`
      echo "BUILDRUN_HASH: " $BUILDRUN_HASH
  - type: Command
    name: "Install Nodejs"
    command: |
      sudo yum install -y oracle-nodejs-release-el7 oracle-release-el7
      echo "Installation Complete..."
  - type: Command
    name: "Frontend build"
    command: |
      npm install
      npm run build
      echo "Build Done..."
  - type: Command
    name: "Zip build files"
    command: |
      cd dist
      zip -r -j build.zip angular-conduit/*
      echo "Zip complete"
f
outputArtifacts:
  - name: static-website-build     # Change this to your artifact name.
    type: BINARY
    location: dist/build.zip

工作 4：建立使用者自建物件登錄

OCI Artifact Registry 是一項儲存區域服務，可用來儲存、共用和管理軟體開發套裝程式。您可以使用「使用者自建物件登錄」管理使用者自建物件，讓使用者自建物件變成不可變、使用安全雜湊識別使用者自建物件、新增版本、上傳與下載，以及擷取最新的控制可見性和權限。如需詳細資訊，請參閱物件登錄

1. 若要建立「使用者自建物件登錄」，請瀏覽至 OCI 主控台、 Developer Services 、 Containers and Artifacts 、 Artifacts Registry ，然後按一下建立儲存區域，輸入下列詳細資訊，然後按一下建立。這會建立空白的使用者自建物件登錄以儲存您的使用者自建物件。

   

   

2. 若要建立「部署使用者自建物件」，我們將使用 DevOps Shell 容器程式實際執行將組建使用者自建物件部署到 OCI 物件儲存。若要這麼做，我們將建立部署規格。如需詳細資訊，請參閱部署規格。

   命令規格 - deployemnt_spec.yaml

   version: 0.1
   component: command
   timeoutInSeconds: 6000
   shell: bash
   
   inputArtifacts:
     - name: "static-artifact"
       type: GENERIC_ARTIFACT
       registryId: "<Artifact Registry OCID>"                # replace this with your Artifact Registry OCID
       path: "build/static-website.zip"                      # replace this with your Build Artifact Path
       version: ${version}
       location: /workspace/input/build.zip
   
   steps:
     - type: Command
       timeoutInSeconds: 600
       name: "unzip artifact"
       command: |
         echo "unzipping..."
         ls -latr /workspace/input
         mkdir -p /workspace/output
         unzip /workspace/input/build.zip -d /workspace/output
         ls -latr /workspace/output
   
     - type: Command
       name: "Bucket cleanup"
       timeoutInSeconds: 140
       command: |
         oci os object bulk-delete --force --bucket-name <bucket_name>     # replace this with your bucket name.
         echo "delete complete..."
   
     - type: Command
       name: "Static Website Deployment"
       timeoutInSeconds: 140
       command: |
         oci os object bulk-upload --bucket-name  <bucket_name> --content-type auto --src-dir /workspace/output/  # replace this with your bucket name.
         echo "deployment complete..."
   

   注意： -content-type 自動參數會顯示並設定正在上傳之檔案的內容類型 (若未指定)，上傳之檔案的內容類型會設為 octet-stream。

3. 瀏覽至 OCI 主控台、 Developer Services 、 Artifact Registry ，選取步驟 1 中建立的「登錄」，按一下上傳使用者自建物件，然後輸入使用者自建物件路徑名稱作為 download-artifact 、版本作為 1 ，然後按一下上傳以上傳部署規格。

   

作業 5：建立組建和部署管線

組建管線：這是您的應用程式程式碼編譯、測試及封裝的位置。在 OCI DevOps 中，您可以定義組建管線，指定建置應用程式所需的步驟。這通常包括執行自動化測試，以確保程式碼品質。

建置管線：這是建置的使用者自建物件建置到各種環境 (例如測試、暫存和生產) 的位置。在 OCI DevOps 中，部署管線可讓您定義部署應用程式的程序，包括指定不同部署策略 (例如藍綠或金絲雀偵測部署) 的能力。我們將繼續設定組建和部署管線。

1. 存取使用者自建物件登錄和 IAM 原則。

   您可以從 DevOps 服務存取儲存在「使用者自建物件登錄」中的使用者自建物件。您可以在「使用者自建物件登錄」中建立三種類型之使用者自建物件的參照：執行處理群組部署組態、一般使用者自建物件以及 Kubernetes 清單。您的管理員必須將讀取所有物件權限授予管線資源。

   我們需要新增數個 IAM 原則，以便 DevOps 服務的建置和部署管線和容器服務可以存取使用者自建物件登錄，以上傳和下載使用者自建物件。如需詳細資訊，請參閱 DevOps IAM 原則

2. 建立建置管線。如需有關 OCI 組建管線的詳細資訊，請參閱管理組建管線。

   1. 瀏覽至 OCI 主控台、開發人員服務、DevOps 、選取您的專案、選取建立管線，然後按一下建立組建管線，然後開啟您建立的管線。

      

   2. 若要管理組建，請按一下新增階段、受管理的組建、下一步，輸入下列詳細資訊，然後按一下新增。

      • 階段名稱：npm build

      • 建置執行程式資源配置：Default Shape

      • 基礎容器映像檔：Oracle Linux 7 x86_64 standard:1.0 (您可以視需要加以變更)

      • 建立規格檔案路徑：build_spec.yaml 主要代碼儲存庫 - 按一下「選取來源連線」類型 - OSI 代碼儲存庫，選取表格中的儲存區域，

      • 分支：main。

        注意：您可以視需要變更組建機器。

      

      

      

   3. 新增另一個階段傳遞使用者自建物件。按一下「受管理的組建」階段下方的加號，選取傳遞使用者自建物件，然後按一下下一步。

      

      輸入階段名稱作為儲存物件，按一下建立物件並輸入下列詳細資訊。

      • 名稱：save-artifacts

      • 類型：General Artifact

      • 物件位置：Set a custom artifact location and Version

      • 物件路徑：build/static-website.zip

      • 版本：${version}

      • 在將組建使用者自建物件與組建結果建立關聯底下，輸入組建組態 / 結果使用者自建物件名稱作為 static-website-build，然後按一下新增。

        

        

      注意：請確定組建使用者自建物件名稱與「組建規格」輸出「使用者自建物件」階段中的名稱相同。

3. 建立部署管線。如需有關部署管線的詳細資訊，請參閱管理部署管線。

   1. 瀏覽至 DevOps ，選取您的專案，選取部署管線，按一下建立部署管線，輸入必要資訊，然後按一下建立。

      

   2. 按一下新增階段並選取整合作為「執行 Shell 命令」，然後按下一步，輸入階段名稱，然後將我們在「任務 4.2」中建立的人工因素設為命令規格。

      

   3. 選取部署規格，我們已上傳至任務 4.2 中的物件登錄。

      

   4. 選取 Shell 階段的容器執行處理資源配置和大小，然後按一下新增。

      

4. 觸發部署管線階段。我們已建立組建和部署管線，因此必須從組建管線觸發部署管線。若要這麼做，我們將返回組建階段，並新增觸發部署類型的其他階段。

   1. 若要新增階段，請按一下傳遞人工因素下方的加號，然後選取觸發部署。

      

   2. 輸入階段名稱作為部署至 oss ，選取選取部署管線，然後按一下新增。

      

      我們已為部署管線新增觸發程式。現在我們的組建和部署管線已完成。

      

作業 6：新增參數

我們會將建置版本新增至參數，以便使用每個建置版本號碼追蹤每個建置版本。瀏覽至在「工作 5.1」中建立的組建管線，移至參數，將名稱新增為「版本」，將預設值新增為「0」，將描述新增為「使用者自建物件版本」，然後按一下加號，將參數新增至組建。

作業 7：測試

移至我們建立的組建管線，然後按一下開始手動執行。

您可以看到執行日誌，如下所示。

注意：

• 如果您收到找不到使用者自建物件錯誤，請確定您具備所有必要的 IAM 原則，且使用者自建物件路徑和版本正確無誤。

• 請確定組建和下載設定中的使用者自建物件名稱與「使用者自建物件登錄」中的使用者自建物件名稱相同。

相關連結

• OCI DevOps 總覽

• 組建規格

• 物件登錄

• 部署規格

• OCI DevOps IAM 原則

• 管理組建管線

• 管理部署管線

認可

• 作者 - Mayank Kakani (OCI 雲端架構師)

其他學習資源

瀏覽 docs.oracle.com/learn 的其他實驗室，或前往 Oracle Learning YouTube 頻道存取更多免費學習內容。此外，請造訪 education.oracle.com/learning-explorer 以成為 Oracle Learning Explorer。

如需產品文件，請造訪 Oracle Help Center 。

---

標題與著作權資訊

Streamline Frontend CI/CD with OCI DevOps Service and OCI Object Storage

F90963-01

December 2023

Copyright © 2023, Oracle and/or its affiliates.