ホームページ > ウェブフロントエンド > jsチュートリアル > Dockerを使用してクロスプラットフォームCI/CDアクションを構築します

Dockerを使用してクロスプラットフォームCI/CDアクションを構築します

DDD
リリース: 2025-01-30 00:31:09
オリジナル
933 人が閲覧しました

Building Cross-Platform CI/CD Actions with Docker

先週、頭痛に見舞われました。完全に調整されたLingo.dev Githubアクションワークフローは、寄稿者のGitLabインスタンスで実行できませんでした。それから私は、プラットフォームに関係なく、どこでも同じ自動化を実行したいと本当に気づきました。

それで、私はGitHub、Gitlab、およびBitbucketで実行されるクロスプラットフォームCIオートメーションを構築するための探求に進みました(そして、おそらく他のものも!)。ソリューションは単純なGitHubアクションとして始まりましたが、複数のコードホスティングプラットフォームをサポートする必要がある場合、より強力なものに進化しました。

正確なプロセスについて説明します:

    シンプルを開始すると、githubアクションがどのように機能するかを紹介します
  1. 再利用可能なDockerイメージを構築するためのレベリング
  2. 最後に、各プラットフォームでこれを実行する方法をお見せします
  3. 手順に従って、最初のクロスプラットフォームアクションを構築して出荷します。または、後で記事をブックマークします

tl; drテンプレートリポジトリを参照してください???

1. Simpleの開始:GitHubアクションでJavaScriptを実行します

GitHubアクションを実行します

可能な限り単純なGitHubアクション(JavaScriptファイルを実行するアクション)から始めましょう。まず、リポジトリのルートでindex.jsを作成します:


Workflowファイルを作成します。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

ログイン後にコピー
ログイン後にコピー
ログイン後にコピー

リポジトリをチェックしてください
  1. node.js環境をセットアップ
  2. スクリプトを実行します
  3. 再利用可能にします
  4. さあ、別のリポジトリに移動することにより、このアクションを再利用可能にしましょう。これらのファイルを使用して、新しいgithubリポジトリ(私の例のようなハローワールドアクションなど)を作成します。

index.js(前と同じ):

  1. action.yml:
console.log("Hello World");

ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
    ワークフローに参照することにより、このアクションを任意のリポジトリで使用できます:
name: "Hello World Action"
description: "A simple action that says hello"
runs:
  using: "node20"
  main: "index.js"

ログイン後にコピー
ログイン後にコピー
重要な違いは次のとおりです


アクションは、独自のリポジトリ

に存在します
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

ログイン後にコピー
ログイン後にコピー
Action.ymlは、アクションの実行方法を定義します

その他のリポジトリは、使用を使用してそれを参照できます
  1. 2。レベルアップ:Dockerized TypeScriptアクション
  2. さあ、TypeScriptコードを実行するより洗練されたアクションを作成しましょう。いくつかのファイルが必要です:

プロジェクトを初期化して、タイプスクリプトをセットアップします:

  1. パッケージを更新して、ビルドスクリプトを追加してください:

    pnpm init                # Creates package.json
    pnpm add -D typescript   # Install TypeScript as dev dependency
    
    
    ログイン後にコピー
    ログイン後にコピー
  2. その後、index.jsをindex.tsに変更して、javascriptの代わりにtypescriptを使用し、srcディレクトリに移動します。

    tsconfig.jsonを作成して、タイプスクリプトコンパイルを構成します:
    {
      "scripts": {
        "build": "tsc"
      }
    }
    
    
    ログイン後にコピー
    ログイン後にコピー
  3. dockerfileを作成:
console.log("Hello World");

ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
  1. action in Action.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デスクトップアプリが必要です。次に、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. プラットフォーム固有の構成で参照してください

Docker画像の構築と公開

最初に、すべてのリリースでDocker画像を構築およびプッシュするワークフローを作成します。 GitHub(Public Repositories用は無料、無料プランのプライベートリポジトリ用500MB)に付属のGitHub Containerレジストリ(GHCR)を使用します。

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アクションワークフロー構文ドキュメントを参照):


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

ログイン後にコピー
ログイン後にコピー
GitHubアクションのみでこのアクションを実行する必要がある場合は、Docker画像を構築およびプッシュする必要はありません。 GitHub Actionsは、各ワークフローの実行でAction.ymlファイルで指定されたDockerFileから直接Dockerコンテナを構築します。これは、コンテナレジストリを押して引っ張る余分なステップを回避するため、より効率的です。ただし、GitlabやBitbucketなどの他のCIプラットフォームでこのアクションを使用する場合は、上記のようにDocker画像を公開する必要があります。

Githubの無料プランは、3つのプラットフォーム間で最も寛大なCI/CD分の割り当てを提供します。含まれています:

公開リポジトリの無制限の議事録
    プライベートリポジトリの場合は
  • 2,000分/月
  • Gitlab CI構成

create .gitlab-ci.yml(gitlab ci/cdドキュメントを参照):


gitlab無料プランには、リポジトリがパブリックまたはプライベートであるかどうかに関係なく、月額400 CI/CDコンピューティング分が含まれています。
{
  "scripts": {
    "build": "tsc"
  }
}

ログイン後にコピー
ログイン後にコピー
Bitbucketパイプライン

BitBucket-Pipelines.ymlを作成します(BitBucket Pipelinesドキュメントを参照):


Bitbucketの無料プランには、リポジトリがパブリックまたはプライベートであるかどうかに関係なく、1か月あたり50分間のビルド分が含まれているため、3つのプラットフォームすべての中で最も低いフリー層になります。

他の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画像をサポートする任意のプラットフォームでこれを実行できます。これは次のとおりです

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-action-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

ログイン後にコピー
ログイン後にコピー
ログイン後にコピー
結論

シンプルなシェルベースのGitHubアクションから、どこでも実行できる洗練されたタイプスクリプトアクションに進化する方法を見てきました。重要なポイントは次のとおりです

自動化ロジックを検証するためにシェルコマンドで簡単に起動します

アクションを作成して、ポータブルにします

    コンテナレジストリを使用して、プラットフォーム全体にアクションを配布します
  1. dockerのコアロジックを維持しながら、各プラットフォームの構成を適応
  2. このアプローチにより、単一のコードベースを維持しながら、どこでも自動化を実行する柔軟性が得られます。幸せな自動化!
  3. TwitterでTwitterに @Mathio28として、Tech Stuffと新しいLingo.Dev機能について時々投稿します。連絡を取り合いましょう。

以上がDockerを使用してクロスプラットフォームCI/CDアクションを構築しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:dev.to
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート