Amazon CodeCatalyst 不再向新客戶開放。現有客戶可以繼續正常使用該服務。如需詳細資訊，請參閱[如何從 CodeCatalyst 遷移](migration.md)。 本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。 # 教學課程：使用 GitHub 動作的 Lint 程式碼 在本教學課程中，您將[超級層 GitHub 動作](https://github.com/marketplace/actions/super-linter)新增至 Amazon CodeCatalyst 工作流程。Super-Linter 動作會檢查程式碼、尋找程式碼發生錯誤、格式化問題和可疑建構的區域，然後將結果輸出到 CodeCatalyst 主控台）。將 linter 新增至工作流程後，您會執行工作流程，將範例 Node.js 應用程式 (`app.js`) 內嵌。然後，您可以修正報告的問題，並再次執行工作流程，以查看修正是否有效。 **提示** 考慮使用 Super-Linter 來內嵌 YAML 檔案，例如 [CloudFormation 範本](https://docs.aws.amazon.com/AWSCloudFormation/latest/UserGuide/template-guide.html)。 **Topics** + [先決條件](#integrations-github-action-tutorial-prereqs) + [步驟 1：建立來源儲存庫](#integrations-github-action-tutorial-create-source-repo) + [步驟 2：新增 app.js 檔案](#integrations-github-action-tutorial-add-appjs) + [步驟 3：建立執行 Super-Linter 動作的工作流程](#integrations-github-action-tutorial-create-workflow) + [步驟 4：修正 Super-Linter 發現的問題](#integrations-github-action-tutorial-fix-probs) + [清除](#integrations-github-action-tutorial-cleanup) ## 先決條件 開始之前，您將需要： + 已連線的 CodeCatalyst **空間** AWS 帳戶。如需詳細資訊，請參閱[建立空間](spaces-create.md)。 + CodeCatalyst 空間中的空專案，稱為 `codecatalyst-linter-project`。選擇**從頭開始**選項以建立此專案。 ``` ``` 如需詳細資訊，請參閱[在 Amazon CodeCatalyst 中建立空專案](projects-create.md#projects-create-empty)。 ## 步驟 1：建立來源儲存庫 在此步驟中，您會在 CodeCatalyst 中建立來源儲存庫。您將使用此儲存庫來存放`app.js`本教學課程的範例應用程式來源檔案 。 如需來源儲存庫的詳細資訊，請參閱 [建立來源儲存庫](source-repositories-create.md)。 **建立來源儲存庫** 1. 在 https：//[https://codecatalyst.aws/](https://codecatalyst.aws/) 開啟 CodeCatalyst 主控台。 1. 導覽至您的專案 `codecatalyst-linter-project`。 1. 在導覽窗格中，選擇**程式碼**，然後選擇**來源儲存庫**。 1. 選擇**新增儲存庫**，然後選擇**建立儲存庫**。 1. 在**儲存庫名稱**中，輸入： ``` codecatalyst-linter-source-repository ``` 1. 選擇**建立**。 ## 步驟 2：新增 app.js 檔案 在此步驟中，您會將 `app.js` 檔案新增至來源儲存庫。`app.js` 包含函數程式碼，其中有一些 linter 會發現的錯誤。 **新增 app.js 檔案** 1. 在 CodeCatalyst 主控台中，選擇您的專案 `codecatalyst-linter-project`。 1. 在導覽窗格中，選擇**程式碼**，然後選擇**來源儲存庫**。 1. 從來源儲存庫清單中，選擇您的儲存庫 `codecatalyst-linter-source-repository`。 1. 在**檔案中**，選擇**建立檔案**。 1. 在文字方塊中，輸入下列程式碼： ``` // const axios = require('axios') // const url = 'http://checkip.amazonaws.com/'; let response; /** * * Event doc: https://docs.aws.amazon.com/apigateway/latest/developerguide/set-up-lambda-proxy-integrations.html#api-gateway-simple-proxy-for-lambda-input-format * @param {Object} event - API Gateway Lambda Proxy Input Format * * Context doc: https://docs.aws.amazon.com/lambda/latest/dg/nodejs-prog-model-context.html * @param {Object} context * * Return doc: https://docs.aws.amazon.com/apigateway/latest/developerguide/set-up-lambda-proxy-integrations.html * @returns {Object} object - API Gateway Lambda Proxy Output Format * */ exports.lambdaHandler = async (event, context) => { try { // const ret = await axios(url); response = { statusCode: 200, 'body': JSON.stringify({ message: 'hello world' // location: ret.data.trim() }) } } catch (err) { console.log(err) return err } return response } ``` 1. 針對**檔案名稱**，輸入 `app.js`。保留其他預設選項。 1. 選擇 **Commit** (遞交)。 您現在已建立名為 的檔案`app.js`。 ## 步驟 3：建立執行 Super-Linter 動作的工作流程 在此步驟中，您會建立工作流程，在將程式碼推送至來源儲存庫時執行 Super-Linter 動作。工作流程包含下列建置區塊，您在 YAML 檔案中定義： + **觸發**條件 – 當您將變更推送至來源儲存庫時，此觸發條件會自動啟動工作流程執行。關於觸發條件的詳細資訊，請參閱 [使用觸發程序自動啟動工作流程執行](workflows-add-trigger.md)。 + **「GitHub 動作」動作** – 在觸發時，**GitHub 動作**動作會執行超級互動動作，進而檢查來源儲存庫中的所有檔案。如果 linter 發現問題，工作流程動作會失敗。 **建立執行 Super-Linter 動作的工作流程** 1. 在 CodeCatalyst 主控台中，選擇您的專案 `codecatalyst-linter-project`。 1. 在導覽窗格中，選擇 **CI/CD**，然後選擇**工作流程**。 1. 選擇**建立工作流程**。 1. 針對**來源儲存庫**，選擇 `codecatalyst-linter-source-repository`。 1. 針對**分支**，選擇 `main`。 1. 選擇**建立**。 1. 刪除 YAML 範例程式碼。 1. 新增下列 YAML： ``` Name: codecatalyst-linter-workflow SchemaVersion: "1.0" Triggers: - Type: PUSH Branches: - main Actions: SuperLinterAction: Identifier: aws/github-actions-runner@v1 Configuration: Steps: github-action-code ``` 在上述程式碼中，將 *github-action-code* 取代為 Super-Linter 動作程式碼，如此程序的下列步驟所述。 1. 前往 GitHub Marketplace 中的 [Super-Linter 頁面](https://github.com/marketplace/actions/super-linter)。 1. 在 `steps:`（小寫） 下，尋找程式碼並將其貼到 `Steps:`（大寫） 下的 CodeCatalyst 工作流程中。 調整 GitHub 動作程式碼以符合 CodeCatalyst 標準，如下列程式碼所示。 您的 CodeCatalyst 工作流程現在如下所示： ``` Name: codecatalyst-linter-workflow SchemaVersion: "1.0" Triggers: - Type: PUSH Branches: - main Actions: SuperLinterAction: Identifier: aws/github-actions-runner@v1 Configuration: Steps: - name: Lint Code Base uses: github/super-linter@v4 env: VALIDATE_ALL_CODEBASE: "true" DEFAULT_BRANCH: main ``` 1. （選用） 選擇**驗證**，以確保 YAML 程式碼在遞交之前有效。 1. 選擇**遞交**，輸入**遞交訊息**，選擇您的`codecatalyst-linter-source-repository`**儲存庫**，然後再次選擇**遞交**。 您現在已建立工作流程。由於工作流程頂端定義的觸發條件，工作流程執行會自動啟動。 **檢視進行中工作流程執行** 1. 在導覽窗格中，選擇 **CI/CD**，然後選擇**工作流程**。 1. 選擇您剛建立的工作流程：`codecatalyst-linter-workflow`。 1. 在工作流程圖表中，選擇 **SuperLinterAction**。 1. 等待動作失敗。預期會發生此失敗，因為 linter 在程式碼中發現問題。 1. 保持 CodeCatalyst 主控台開啟，並前往 [步驟 4：修正 Super-Linter 發現的問題](#integrations-github-action-tutorial-fix-probs)。 ## 步驟 4：修正 Super-Linter 發現的問題 Super-Linter 應該在`app.js`程式碼以及來源儲存庫中包含`README.md`的檔案中找到問題。 **修正 linter 找到的問題** 1. 在 CodeCatalyst 主控台中，選擇 **Logs** 索引標籤，然後選擇 **Lint Code Base**。 隨即顯示超級燒錄動作產生的日誌。 1. 在 Super-Linter 日誌中，向下捲動到行 90 周圍，您可以在其中找到問題的起點。它們看起來類似以下內容： ``` /github/workspace/hello-world/app.js:3:13: Extra semicolon. /github/workspace/hello-world/app.js:9:92: Trailing spaces not allowed. /github/workspace/hello-world/app.js:21:7: Unnecessarily quoted property 'body' found. /github/workspace/hello-world/app.js:31:1: Expected indentation of 2 spaces but found 4. /github/workspace/hello-world/app.js:32:2: Newline required at end of file but not found. ``` 1. 修正來源儲存庫`README.md`中的 `app.js` 和 ，並遞交您的變更。 **提示** 若要修正 `README.md`，請將 `markdown`新增至程式碼區塊，如下所示： ``` ```markdown Setup examples: ... ``` ``` 您的變更會自動開始另一個工作流程執行。等待工作流程完成。如果您修正所有問題，工作流程應該會成功。 ## 清除 在 CodeCatalyst 中清除 ，以從環境中移除此教學課程的追蹤。 **在 CodeCatalyst 中清除** 1. 在 https：//[https://codecatalyst.aws/](https://codecatalyst.aws/) 開啟 CodeCatalyst 主控台。 1. 刪除 `codecatalyst-linter-source-repository`。 1. 刪除 `codecatalyst-linter-workflow`。 在本教學課程中，您已了解如何將超級層 GitHub 動作新增至 CodeCatalyst 工作流程，以便內嵌一些程式碼。