Jenkins を使用した Vue プロジェクトのワンクリック パッケージングと公開の実装

Jenkins を使用した Vue プロジェクトのワンクリック パッケージングと公開の実装

Jenkinsのインストール

Jenkins は、ソフトウェアの構築、テスト、デプロイなどのさまざまなタスクを自動化するために使用されるオープンソースの CI&CD ソフトウェアです。

Jenkins は、システム パッケージ、Docker、またはスタンドアロン Java プログラムを通じてさまざまな実行方法をサポートしています。

インストール

ここでのオペレーティングシステムは WSL Ubuntu です。他のシステムのインストールについては、Jenkins の公式ドキュメントを参照してください。

wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key を追加 -
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'
sudo apt-getアップデート
sudo apt-get でジェンキンスをインストールします

ポート番号を変更します(デフォルトのポートは8080です)

jenkinsの設定ファイルは/etc/default/jenkinsにあります。HTTP HTTP-PORT見つけて変更します。

走る

sudo systemctl ジェンキンスを起動します
# または
sudoサービスジェンキンス開始

マシンを自動的に起動したい場合

sudo systemctl ジェンキンスを有効にする

実行時に次のエラーが発生した場合は、まずjdkをインストールしてください。

基本設定

起動が成功したら、対応するアドレス(ip:port)を入力して、 jenkins管理界面に入ります(以下を参照)。

上圖中紅色字體對應的文件内のデフォルトの管理者パスワードを取得します - 特定のコマンド

cat /var/lib/jenkins/secrets/initialAdminPassword

コマンドを実行すると、次の図が返されます。

パスワードを入力したら、自定義Jenkinsインターフェースに入ります(下図参照)。

このインターフェースでは、安裝推薦的插件プラグインのインストールが開始されます。以下に示すように

插件安裝完成后設置用戶名密碼インターフェースが自動的に表示されます(下図参照)。

入力が完了したら、保存并完成ボタンをクリックして、次のインターフェース實例配置を入力します。

保存并完成ボタンをクリックして、新しいインターフェースに入ります。Jenkins開始使用Jenkinsボタンをクリックしてjenkins的主界面に入ります (下図参照)。これで、Jenkins のインストールと基本構成は完了です。

Vueプロジェクトをリリースする

> Vue プロジェクトをパッケージ化するには、Node.js が必要です。パッケージ化後、パッケージ化されたファイルを SSH 経由でターゲット サーバーにアップロードする必要があります。そこで、以下では、Jenkins nodejs プラグインと Publish Over SSH プラグインをインストールします。

プラグインNode.jsをインストールする

Jenkinsのメインインターフェース工作臺で、系統管理>插件管理をクリックして、プラグイン管理インターフェースに入ります(以下を参照)。

検索結果は以下のとおりです

プラグインをチェックして「インストール」をクリックすると、プラグインのダウンロードインターフェースが表示されます(下図参照)。

Node.jsプラグインを設定する

Jenkinsのメインインターフェース工作臺で、系統管理>全局工具設置をクリックしてプラグイン管理インターフェースに入り、NodeJsオプションを見つけます(以下を参照)。

Publish Over SSHプラグインをインストールして設定する

Publish Over SSHプラグインのインストールはnodejs插件と同じです。インストールが完了したら、プラグインの設定を開始します。

Jenkinsのメインインターフェース工作臺で、系統管理>系統配置クリックしてプラグイン構成インターフェースに入り、 Publish over SSHまでスクロールして、 SSH Serversの下の新增按鈕をクリックします(以下を参照)。


高級ボタンをクリックすると、次のようなインターフェースが表示されます。

タスクを作成する

この時点で、vue のパッケージ化に必要な Jenkins プラグインがインストールされています。次に、vue プロジェクトをパッケージ化するタスクの作成を開始します。

具体的な操作は以下のとおりです

確定ボタンをクリックすると、以下のように表示されます。

上図に示す構成をインストールした後、保存ボタンをクリックして、作成したタスクの詳細インターフェイスに移動します。

これまで、フロントエンド プロジェクト用に、シンプルなワンクリック パッケージング Jenkins 構成を実装しました。

Jenkins を使用して Vue プロジェクトをワンクリックでパッケージ化して公開する方法についての記事はこれで終わりです。Jenkins による Vue プロジェクトのパッケージ化と公開に関する関連コンテンツをさらにご覧になりたい場合は、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続きご覧ください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • 初心者向けに Docker に Jenkins をインストールする方法を詳しく説明したチュートリアル
  • Jenkinsをすぐに使い始め、自動デプロイメントを実現できるように支援します
  • Python で Jenkins を使用してエンタープライズ WeChat 通知を送信する実装
  • Jenkins+Docker継続的インテグレーションの実装
  • フロントエンドアプリケーションのjenkins+gitlab+nginxデプロイメント
  • Jenkins + Docker + ASP.NET Core の自動デプロイメントの問題について (落とし穴を避ける)
  • Docker+K8S+GitLab/SVN+Jenkins+Harbor をベースにした継続的インテグレーション配信環境の構築に関する詳細なチュートリアル
  • Jenkins ダッシュボードプラグインを使用してデプロイメントを視覚化する方法
  • Jenkinsを使用してSpringbootプロジェクトをデプロイする方法
  • Jenkinsプラグインのダウンロード失敗の解決策
  • Windows 環境で Jenkins を展開する方法の詳細なチュートリアル
  • Jenkins システムでデータをバックアップする方法

<<:  Dockerコンテナのディスクがいっぱいになった場合の状況のまとめ

>>:  mysql8.0.11 winx64 のインストールと設定方法のグラフィック チュートリアル (win10)

推薦する

MySQL の結合インデックスと左端一致原則の詳細な説明

序文これまでインターネットでMySQLジョイントインデックスの最左接頭辞マッチングに関する記事をたく...

MySQL InnoDBエンジンのインデックスとストレージ構造の詳細な説明

序文Oracle や SQL Server などのデータベースには、ストレージ エンジンが 1 つだ...

Linux ハードウェア構成コマンドの例

ハードウェア ビュー コマンドシステム # uname -a # カーネル/オペレーティング システ...

JavaScript ESの新機能letとconstキーワードに基づく

目次1. letキーワード1.1 基本的な使い方1.2 変動昇進はない1.3 一時的なデッドゾーン1...

ルート変更を監視するJavaScriptの詳細な説明

目次歴史pushState() メソッドpushState() の使用シナリオreplaceStat...

MySql におけるプロセス制御関数/統計関数/グループ化クエリの使用法の分析

これからの道のりは長く困難ですが、私は探求を続けます。また週末がやってきました。引き続き、皆さんと一...

HTML で div+CSS を使用してシンプルな矢印アイコンを実装するコード

ウェブデザインでは、ウェブページを美しく見せるために矢印を装飾としてよく使用します。現在、多くのウェ...

WeChatミニプログラムがいいねサービスを実装

この記事では、WeChatアプレットの具体的なコードを参考までに紹介します。具体的な内容は次のとおり...

MySQL で大量のデータ (数千万) を素早く削除するためのいくつかの実用的なソリューションの詳細な説明

著者は最近、仕事でパフォーマンスのボトルネックの問題に遭遇しました。MySQL テーブルには毎日約 ...

jQueryチェーン呼び出しの詳細な説明

目次チェーン呼び出し小さなケースチェーン呼び出しjQuery オブジェクトが任意のメソッド (ノード...

JavaScript で右クリック メニューを統合する layim のサンプル コード

目次1. 効果の実証2. 実装チュートリアル3. 最後に、完全なコードを添付します4. その他の右ク...

VM VirtualBox 仮想マシンのマウント共有フォルダ

一つの環境CentOS 7にVMware Toolsをインストールしてホストの共有フォルダへのアクセ...

Vue のすべてのカプセル化方法の簡単な概要

目次1. カプセル化API 2. グローバルツールコンポーネントを登録する3. グローバル関数をカプ...

HTML タイトルに二重引用符を追加する方法

<a href="https://www.jb51.net/" title...

CSS ハック \9 と \0 は IE11\IE9\IE8 のハッキングには機能しない可能性があります

Web ページやフォームを設計するたびに、さまざまなブラウザ、特に IE ファミリの互換性の問題に悩...