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 8.0.11 圧縮版のインストールチュートリアル

この記事では、MySQL 8.0.11のインストールチュートリアルを参考までに紹介します。具体的な内...

5つのクールで実用的なHTMLタグと属性の紹介

実はこれもクリックベイトのタイトルであり、「派手」とは言えません。ただ私が無知で、こうしたラベルを見...

win10にmysql 8.0.18-winx64をインストールする詳細な手順

1. まず公式ウェブサイトにアクセスしてMySQLインストールパッケージをダウンロードします参考: ...

MySQL で重複しない携帯電話番号テーブルをバッチ生成する方法のサンプルコード

序文多くの MySQL テスト シナリオでは、テスト用に一部のテスト データを手動で生成する必要があ...

要素の$notifyポイントについての簡単な説明

当初の意図は、element-ui の $notify 通知をコンポーネントにカプセル化することでし...

VMware 仮想マシンで Linux の IP アドレスを表示する方法

1. まず、コンピュータのデスクトップにある VMware アイコンをダブルクリックしてソフトウェア...

HTMLで下線を設定するには?HTMLでテキストに下線を付ける方法

HTML で下線を引くには、以前はテキストを <u></u> タグで囲む必要...

ウェブページからテキスト透かしを削除する2つの簡単な方法

<br /> 特定の Web サイトを閲覧して、優れた Web ページを見つけた場合、そ...

border-image を使用してテキストバブルの境界線を実装する方法のサンプルコード

開発中に、非常に単純なテキストバブル効果に遭遇しました。これは、おおよそ次のようになります。 うーん...

ネイティブJSで実装されたギャラリー機能

目次最初2番目Native Js はギャラリー機能を実装します。画像をクリックすると、対応する拡大画...

Windows Server 2008 R2 に MySQL 5.7.10 をインストールする手順

MSIインストールパッケージを使用してインストールするご使用のオペレーティング システムに応じて、対...

Linux でバックグラウンド タスクを実行するために nohup と screen を使用する例と違いの簡単な分析

SSH ターミナル (putty、xshell など) を使用して Linux サーバーに接続し、時...

HTML 5 スタイルシートのリセット

この CSS リセットは、Eric Meyers の CSS リセットに基づいて変更されており、特に...

MySQL のテーブル内のレコード数を制限する方法

目次1. トリガーソリューション2. パーティションテーブルソリューション3. 一般的な表領域ソリュ...