あなたの1ページ・アプリケーションをAzure devopsでアーチファクトに変えてください

6232 ワード
singlepageapplication azuredevops devops nx テキストリンク
Azure devopsのビルドの出力を後で使用するには、ビルドアーティファクトとして発行する必要があります.この記事では、その設定方法を示します.
この例では、Nx monorepo toolsを使用して角度ベースの単一ページアプリケーション(SPA)を使用しますが、ビルドコマンドを知っていれば、一般的なプロセスを任意のスパフレームワークに適用できます.

新しいAzureパイプラインを作成する
Azure devopsの
  • はパイプラインに行きます
  • 「新しいパイプライン」を選択します.
  • あなたのレポに接続します
  • 鉱山はAzure Repos Gitにあるので、私はそれを使用します
  • あなたのレポを選択
  • パイプラインテンプレートの設定
  • 私は私の例のために“角度でnode . js”オプションを選択しました.jsオプションは動作します
  • 完全なレビューをして保存して
  • 私は新しいフォルダを作成し、ユニークな名前
    • を与えた
  • 私はまた、ベストプラクティス
    • として、テスト中に新しいブランチを作成することを推奨します

    ノード、NPM、およびコマンドラインインターフェイス(CLI)をインストールします
  • NodeToolタスクをノードバージョンに更新
  • 私は、ノード14を使用しました.

  • スクリプトを作成する
  • は、『NPMインストールとビルド』スクリプトタスク
    • より上に新しいscriptタスクを加えます
  • は、あなたのプロジェクトを構築するためにマシン上で必要となるCLIを含むようにnpm install -g <ListOfCLIs>に最初の行を設定します
  • 私は、私のプロジェクト
    • のために角度(@angular/cli)とNX(@nrwl/cli)CLISを必要としました
  • プロジェクトに一致するCLIのバージョンを指定します
  • 鉱山は、角度とNX
    • の両方でバージョン12を使用しました
  • ディスプレー名をnpm install <yourCLIName> CLIに更新する
    私の例では、npm install Angular CLI and Nx CLI
  • ファイナルスクリプトタスクは次のようになります.
    •  - script: |
     npm install -g @angular/cli@12 @nrwl/cli@12
   displayName: 'npm install Angular CLI and Nx CLI'

  • スクリプトのタスクを更新する
  • は、npm installにタスクを簡素化します(我々はすでに上記のステップで必要とされるグローバルツールをインストールしています)
  • タスクは次のようになります.
    •   - script: |
     npm install
  displayName: 'npm install'

    パイプラインをビルドして発行する
    私は2つの異なる環境を構築し、公開し、'ステージング'と'生産'を持っているので、私はこれを2回行うと、それぞれの別々のサブフォルダを使用するつもりです.
  • 作成ビルドタスク
  • 「NPMインストール」スクリプトタスクをコピーし、新しいコピー
    • をペーストします
  • プロジェクトビルドコマンドでnpm installに置き換えます
  • 鉱山はnx build account-info-manager:build --configuration=staging --outputPath=dist/stagingです
  • アカウント情報マネージャは、私のプロジェクト
    • です
  • ステージングは、私のプロジェクト
    • で定義されたカスタム設定です
  • OutputPathは、典型的な角度distフォルダ
    • の下で「ステージング」と呼ばれている別々のフォルダをつくるためにセットされます
  • DisplayNameを「ビルドステージング」(または、環境に適した名前)
    • に変更します
  • 公開ビルドアーティファクトタスクを追加する
  • をクリックしてパイプラインにタスクを追加する
    「アーティファクト」
    • のための
  • の検索
  • 「ビルドアーティファクトタスクを発行」を選択し、「追加」をクリックします

  • 'ビルドステージング'タスクでビルドパスに基づいて値を設定します
  • 発行する私のパスは$(Agent.BuildDirectory)/s/dist/stagingに設定されます
  • マイアーティファクトの名前はstagingに設定されています
  • は、Azure Pipelinesとしてアーチファクト出版場所を保ちます
  • ボタンをクリックします

  • あなたのパイプライン
    • を保存します
  • 作成ビルドタスク
  • 'ビルドステージング'スクリプトタスクをコピーし、新しいコピー
    • をペーストします
  • あなたのビルドコマンドでstaging
  • 鉱山はproductionです
  • アカウント情報マネージャは、私のプロジェクト
    • です
  • の生産は、私のプロジェクト
    • で定義された構成です
  • OutputPathは、典型的な角度distフォルダ
    • の下で「生産」と呼ばれている別々のフォルダをつくるためにセットされます
  • 公開ビルドアーティファクトタスクを追加する
  • ビルドビルドに基づいてビルドビルドの値を設定します
  • 発行する私のパスはnx build account-info-manager:build --configuration=production--outputPath=dist/productionに設定されます
  • マイアーティファクトの名前は$(Agent.BuildDirectory)/s/dist/productionに設定されています
  • は、productionとしてアーチファクト出版場所を保ちます
  • をクリックして「追加」ボタン
  • 保存し、パイプライン
    • を実行します

    これで、Azure Devopsリリースで使用できるビルドアーティファクトがあります!(もちろん完成したら)
    あなたが新しく作成されたビルドをAzure Static Web Apps(そして、異なる環境+承認がある)に配備したいならば、その上で私のポストをチェックしてください

    Azure Static Web Apps from Azure DevOps Releases

    Blair Lierman ・ Aug 20 '21 ・ 5 min read

    #devops #staticwebapps #singlepageapplications #azurestaticwebapps
    Androidベース(18)
    フラスコ便利な拡張子