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 をよろしくお願いいたします。