搜尋
首頁web前端js教程與Docker建造跨平台CI/CD動作

上週,我被頭痛擊中 - 我們完美調整的lingo.dev github Actions Workflow無法在貢獻者的gitlab實例上運行。然後,我意識到,無論平台如何,我實際上都想在任何地方運行相同的自動化。

>因此,我進行了一個任務,以構建在Github,Gitlab和Bitbucket上運行的跨平台CI自動化(也可能還有其他!)。該解決方案最初是一種簡單的github操作,但在我們需要支持多個代碼託管平台時發展成為功能更強大的東西。 Building Cross-Platform CI/CD Actions with Docker

我將帶您完成確切的過程:

開始簡單,我將展示GitHub Action的工作

升級以構建可重複使用的docker image

>最後,我將向您展示如何在每個平台上運行此操作
  1. >按照步驟構建和運送您的第一個跨平台動作。或為文章添加書籤以
  2. tl; dr請參閱模板存儲庫???

1。啟動簡單:在github操作中運行javascript

運行github動作

讓我們從最簡單的github操作開始 - 一個運行JavaScript文件的操作。首先,在您的存儲庫的根部創建index.js:
>

現在創建一個工作流文件.github/workflows/hello.yml:


這個動作將:

console.log("Hello World");

觸發到主要分支

>查看您的存儲庫
name: Hello World
on:
  push:
    branches:
      - main

jobs:
  hello:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Say Hello
        run: node index.js

>設置node.js環境

    運行腳本
  1. 使其可重複使用
  2. 現在,讓我們通過將其移動到單獨的存儲庫來重複使用此操作。使用這些文件創建一個新的github存儲庫(例如,像我的示例一樣hello-world-action):
  3. index.js(與之前相同):

Action.yml:

  1. >現在您可以通過在工作流中引用任何存儲庫中的此操作:>
console.log("Hello World");

    關鍵差異是:
動作以自己的存儲庫生活
name: "Hello World Action"
description: "A simple action that says hello"
runs:
  using: "node20"
  main: "index.js"

Action.yml定義如何運行動作


其他存儲庫可以使用以下用途來引用它:your-username/hello-world-action@ref

name: Use Hello Action
on:
  push:
    branches:
      - main

jobs:
  hello:
    runs-on: ubuntu-latest
    steps:
      - name: Say Hello
        uses: your-username/hello-world-action@main

2。升級:dockerized打字稿操作

    現在,讓我們創建一個更複雜的操作,以運行打字稿代碼。我們需要幾個文件:
  1. >初始化項目並設置打字稿:

>更新您的軟件包。

  1. 然後,將我們的index.js重命名為index.ts使用Typescript代替JavaScript並將其移動到SRC目錄。


    pnpm init                # Creates package.json
    pnpm add -D typescript   # Install TypeScript as dev dependency
    
    
    >創建tsconfig.json以配置打字稿彙編:>

  2. 創建一個dockerfile:
    {
      "scripts": {
        "build": "tsc"
      }
    }
    
    
console.log("Hello World");

  1. >重新定義動作中的動作:yml:
name: Hello World
on:
  push:
    branches:
      - main

jobs:
  hello:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Say Hello
        run: node index.js

在本地運行Docker圖像

>要在本地dockerfile中構建並運行圖像,您需要Docker Desktop應用程序。然後,假設Docker在本地運行,您可以:

  1. 構建圖像:
console.log("Hello World");

  1. >運行它:
name: "Hello World Action"
description: "A simple action that says hello"
runs:
  using: "node20"
  main: "index.js"

3。跨平台支持

現在是最有趣的部分 - 在其他平台上運行您的操作。我們需要:

  1. >構建並將我們的Docker圖像推到註冊表
  2. >
  3. >用平台特定的配置引用它

建築和出版Docker圖像

首先,創建一個工作流程以在每個版本上構建和推動Docker映像。我們將使用您的github隨附的GitHub容器註冊表(GHCR)(公共存儲庫免費,500MB用於免費計劃的私人存儲庫)。
>

name: Use Hello Action
on:
  push:
    branches:
      - main

jobs:
  hello:
    runs-on: ubuntu-latest
    steps:
      - name: Say Hello
        uses: your-username/hello-world-action@main

github動作

要在另一個存儲庫的github操作中使用此操作,請在.github/workflows/hello..yml中創建一個工作流文件(請參閱GitHub Actions WorkFlow語法文檔):
>

pnpm init                # Creates package.json
pnpm add -D typescript   # Install TypeScript as dev dependency

>僅需在github操作上執行此操作,則無需構建和推動Docker映像。 github操作將直接從操作中指定的dockerfile直接構建docker容器。這更有效,因為它避免了推動和從容器註冊表中拉出的額外步驟。但是,如果您打算在Gitlab或Bitbucket等其他CI平台上使用此操作,則需要發佈如上圖所示的Docker映像。

GitHub的免費計劃提供了三個平台之間最慷慨的CI/CD分鐘分配。它包括:

    >公共存儲庫的無限分鐘
  • >私人存儲庫的每月2,000分鐘
GitLab CI配置

create .gitlab-ci.yml(請參閱Gitlab CI/CD文檔):>


>您的gitlab免費計劃包括每月400 CI/C的計算分鐘,無論存儲庫是公共的還是私人的。
{
  "scripts": {
    "build": "tsc"
  }
}

>

Bitbucket管道

create bitbucket-pipelines.yml(請參閱Bitbucket Pipeelines文檔):


Bitbucket的免費計劃每月僅包括50分鐘的構建分鐘,而不管存儲庫是公共還是私人,這使其成為所有三個平台中最低的免費層。

其他CI/CD平台
{
  "compilerOptions": {
    "target": "ES2022",
    "module": "commonjs",
    "outDir": "./build",
    "rootDir": "./src",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "exclude": ["node_modules", "build", "**/*.test.ts"]
}

>由於我們在公共Github容器註冊表中發布了Docker映像,因此我們可以在支持Docker Images的任何平台上運行此圖像。這是由:

支持的

circle ci(docs)

travis ci(docs)
  • >讓我知道如果您在其他地方運行,我對您的用例感到好奇!
  • >

    ?你能做什麼?

    >我們在任何CI平台上為您的Web和移動應用程序運行自動lingo.DEV本地化。在每個提交中,它都使用lingo.dev本地化引擎更新整個存儲庫中的翻譯 - 作為新提交或通過打開拉請請求(DOCS)。

    github的示例:


console.log("Hello World");


>無論您使用的代碼託管平台如何,您都可以構建可重複使用的操作,並輕鬆地將它們集成到工作流程中。以下是給您的一些想法:

    >跨平台測試記者(編排端到端測試會話)
  • 自定義代碼質量檢查器(考慮格式,覆蓋,測試)
  • >
  • >發行說明生成器(在您的網站上發布更改式?)
  • >
您將使用什麼?

>

? 獎勵:模板存儲庫

>如果您不想閱讀文章的其餘部分,則可以在此處找到帶有所有代碼的模板入門存儲庫。它包含動作 - 您可以在github,gitlab和bitbucket上運行它。

>

https://github.com/mathio/awesome-actory-starter

?提示:克隆回購,使其成為您自己動作的起點:

…或者只是從我的模板中創建一個新的存儲庫。
name: Hello World
on:
  push:
    branches:
      - main

jobs:
  hello:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: "20"
      - name: Say Hello
        run: node index.js

然後,只需在src/index.ts文件中實現自己的操作邏輯。

結論

>我們已經看到瞭如何從簡單的基於殼的github動作發展到可以在任何地方運行的複雜的打字稿動作。關鍵要點是:

啟動Simple從Shell命令開始,以驗證您的自動化邏輯

dockerize您的操作以使其可移植
  1. >使用容器註冊表在平台上分發您的操作
  2. >在保持docker中的核心邏輯時,調整每個平台的配置
  3. 這種方法使您可以靈活地在維護單個代碼庫的同時,在任何地方運行自動化。快樂自動化!
  4. >我偶爾在Twitter上發布有關技術內容和新的lingo.dev功能的信息 @Mathio28。讓我們保持聯繫。
>

以上是與Docker建造跨平台CI/CD動作的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
JavaScript應用程序:從前端到後端JavaScript應用程序:從前端到後端May 04, 2025 am 12:12 AM

JavaScript可用於前端和後端開發。前端通過DOM操作增強用戶體驗,後端通過Node.js處理服務器任務。 1.前端示例:改變網頁文本內容。 2.後端示例:創建Node.js服務器。

Python vs. JavaScript:您應該學到哪種語言?Python vs. JavaScript:您應該學到哪種語言?May 03, 2025 am 12:10 AM

選擇Python還是JavaScript應基於職業發展、學習曲線和生態系統:1)職業發展:Python適合數據科學和後端開發,JavaScript適合前端和全棧開發。 2)學習曲線:Python語法簡潔,適合初學者;JavaScript語法靈活。 3)生態系統:Python有豐富的科學計算庫,JavaScript有強大的前端框架。

JavaScript框架:為現代網絡開發提供動力JavaScript框架:為現代網絡開發提供動力May 02, 2025 am 12:04 AM

JavaScript框架的強大之處在於簡化開發、提升用戶體驗和應用性能。選擇框架時應考慮:1.項目規模和復雜度,2.團隊經驗,3.生態系統和社區支持。

JavaScript,C和瀏覽器之間的關係JavaScript,C和瀏覽器之間的關係May 01, 2025 am 12:06 AM

引言我知道你可能會覺得奇怪,JavaScript、C 和瀏覽器之間到底有什麼關係?它們之間看似毫無關聯,但實際上,它們在現代網絡開發中扮演著非常重要的角色。今天我們就來深入探討一下這三者之間的緊密聯繫。通過這篇文章,你將了解到JavaScript如何在瀏覽器中運行,C 在瀏覽器引擎中的作用,以及它們如何共同推動網頁的渲染和交互。 JavaScript與瀏覽器的關係我們都知道,JavaScript是前端開發的核心語言,它直接在瀏覽器中運行,讓網頁變得生動有趣。你是否曾經想過,為什麼JavaScr

node.js流帶打字稿node.js流帶打字稿Apr 30, 2025 am 08:22 AM

Node.js擅長於高效I/O,這在很大程度上要歸功於流。 流媒體匯總處理數據,避免內存過載 - 大型文件,網絡任務和實時應用程序的理想。將流與打字稿的類型安全結合起來創建POWE

Python vs. JavaScript:性能和效率注意事項Python vs. JavaScript:性能和效率注意事項Apr 30, 2025 am 12:08 AM

Python和JavaScript在性能和效率方面的差異主要體現在:1)Python作為解釋型語言,運行速度較慢,但開發效率高,適合快速原型開發;2)JavaScript在瀏覽器中受限於單線程,但在Node.js中可利用多線程和異步I/O提升性能,兩者在實際項目中各有優勢。

JavaScript的起源:探索其實施語言JavaScript的起源:探索其實施語言Apr 29, 2025 am 12:51 AM

JavaScript起源於1995年,由布蘭登·艾克創造,實現語言為C語言。 1.C語言為JavaScript提供了高性能和系統級編程能力。 2.JavaScript的內存管理和性能優化依賴於C語言。 3.C語言的跨平台特性幫助JavaScript在不同操作系統上高效運行。

幕後:什麼語言能力JavaScript?幕後:什麼語言能力JavaScript?Apr 28, 2025 am 12:01 AM

JavaScript在瀏覽器和Node.js環境中運行,依賴JavaScript引擎解析和執行代碼。 1)解析階段生成抽象語法樹(AST);2)編譯階段將AST轉換為字節碼或機器碼;3)執行階段執行編譯後的代碼。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

mPDF

mPDF

mPDF是一個PHP庫,可以從UTF-8編碼的HTML產生PDF檔案。原作者Ian Back編寫mPDF以從他的網站上「即時」輸出PDF文件,並處理不同的語言。與原始腳本如HTML2FPDF相比,它的速度較慢,並且在使用Unicode字體時產生的檔案較大,但支援CSS樣式等,並進行了大量增強。支援幾乎所有語言,包括RTL(阿拉伯語和希伯來語)和CJK(中日韓)。支援嵌套的區塊級元素(如P、DIV),

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

Dreamweaver Mac版

Dreamweaver Mac版

視覺化網頁開發工具