前書き: 最近、Jenkins のデプロイメントの人気が比較的高いため、Jenkins を使用してフロントエンドとバックエンドの分離プロジェクトをデプロイする方法についての記事を思いつきました。この記事では、完全なプロセスを構成、構築、デプロイする方法を記録します。ステップバイステップ. 各行のコードはテストされ、説明されており、グラフィックとテキストの指導を通じて皆と共有するブログとして書かれています。
Blogger の他の導入チュートリアル:
1. Docker がフロントエンドとバックエンドの分離プロジェクトをデプロイする: Docker を通じてフロントエンドとバックエンドの分離プロジェクトをデプロイします (プロテストが利用可能)
2. Linux システム導入 Tomcat: Linux システム導入 Tomcat 詳細チュートリアル (図による説明)
3. Linux システムでの Nginx の展開: Linux システムでの Nginx の展開に関する詳細なチュートリアル (図による説明)
4. Linux システム構成 Maven: Linux システム構成 Maven 環境詳細チュートリアル (図解説明)
5. Linuxシステム構成Node.js：Linuxシステム構成Node.js環境詳細チュートリアル（図解解説）
6. Linux システムのインストールと MySQL の展開: Linux システムのインストールと MySQL の展開に関する完全なチュートリアル (画像とテキストによる詳細な説明)
7. Linux システムのインストールと Redis のデプロイメント: Linux システムのインストールと Redis のデプロイメントに関する完全なチュートリアル (画像とテキストによる詳細な説明)
8. Linux システムのインストールと MongoDB のデプロイメント: Linux システムのインストールと MongoDB のデプロイメントに関する完全なチュートリアル (画像とテキストによる詳細な説明)
9. Linux システムのインストールと Jenkins のデプロイメント: Linux システムのインストールと Jenkins のデプロイメントの詳細なチュートリアル (図による説明)
10. パゴダパネル展開フロントエンド分離プロジェクト：パゴダパネル展開フロントエンド分離プロジェクトを使用した実践指導（詳細）
目次
1. 環境構築
Jenkins を使用してフロントエンドとバックエンドの分離プロジェクトをデプロイする場合は、最初にこれら 6 つのリンクを準備する必要があります。
1.1. JDKのインストール
インストールされているバージョンは JDK11 です。yum を直接使用してワンクリックでインストールします
yum install java-11-openjdk-devel1.2. Git のインストール
次のコマンドを直接実行してワンクリックでインストールします
yum install git1.3、Maven 環境を構成する
インストールされていない場合は、このブログに移動してください。
Linuxシステム構成 Maven環境詳細チュートリアル（図解解説）
1.4. Node.js 環境の構成
インストールされていない場合は、このブログに移動してください。
Linuxシステム構成 No.js環境詳細チュートリアル（図解解説）
1.5. Nginx のデプロイ
インストールされていない場合は、このブログに移動してください。
1.6. Tomcat のデプロイ
インストールされていない場合は、このブログに移動してください。
Linux システム導入 Tomcat の詳細なチュートリアル (図による説明)
2. Jenkins インストール パッケージを準備する
公式ダウンロード Web サイト: Jenkins のダウンロードとデプロイメント
左側の安定版をクリックしてダウンロードしてください
3. Jenkins のデプロイ
1. Tomcat の webapps ディレクトリを見つけて、ダウンロードした war パッケージ (Xftp) をアップロードします。
2. Tomcat の bin ディレクトリに入り、次のコマンドを実行して Tomcat を再起動します。
停止
sh shutdown.sh起動する
sh startup.sh再起動すると、複数の jenkins フォルダーが見つかります。次のステップでは、Tomcat を介して Jenkins にアクセスします。
3. ブラウザアクセス: http://IP アドレス:8080/jenkins
注: セキュリティ グループはポート 8080 を解放する必要があります。
このようにして、ジェンキンスがデプロイされます
4. Jenkinsの初期化
1. プロンプトに従って以下のコマンドを実行し、管理者パスワードを取得します。
cat /root/.jenkins/secrets/initialAdminPassword2. 左側でワンクリックインストールを選択します
注: 最初の起動時に白い画面が表示される場合があります。解決するには、URL の後に再起動を追加します (例: http://ip アドレス:8080/jenkins/restart)。その後、Enter キーを押します。この問題が発生しました。そして私はそれをここに記録します！
3. インストールが完了するまで静かに待ちます
4. 基本情報を入力した後、ここで管理者アカウントを使用して続行することを選択します。次回ログインするとき、デフォルトのユーザー名は admin で、パスワードは上で取得した管理者パスワードです。保存を選択した場合は、完了すると次回ログイン時 ユーザー名とパスワードは今回作成した情報でログインされます
5. 「保存して終了」をクリックします。
6. クリックして Jenkins の使用を開始します
7. このようにして、独自の Jenkins が初期化されます。
5.ジェンキンスの構成
Vue および SpringBoot プロジェクトをデプロイする前に、必ず Jenkins を構成してください
4.1. Maven プラグインのインストール
1. 左側の「Jenkins の管理」をクリックします
2.「プラグイン」をクリックします
3. Maven を検索してインストールします。必ずチェックを入れてください。
4. インストールが完了するまで静かに待ち、クリックしてホームページに戻ります。
4.2. Node.js プラグインのインストール
1. 前の手順を繰り返します。今回はインストールする NodeJ を検索します。忘れずにチェックしてください。
2. Jenkins を確認して再起動し、Maven とこの Node.js のインストールを完了します。
3. 再起動後、アカウント番号とパスワードを入力して再度ログインし、左側のシステム管理を選択して、グローバルツールを設定します
4.3、JDKの設定
yum によってインストールされた JDK ソース ディレクトリを見つけて、次のコマンドを順番に実行する必要があります。
1. Javaの場所を確認する
which java2. ソフトリンクを確認する
ls -l /usr/bin/java3. JDK ソース ディレクトリを確認します。
ls -l /etc/alternatives/java
見つかったソースディレクトリは次のとおりです
/usr/lib/jvm/java-11-openjdk-11.0.19.0.7-1.el7_9.x86_64
4. [JDK の追加] をクリックして自動インストールをキャンセルし、最後にソース ディレクトリを Jenkins 構成に貼り付けます。
以上でJDKの設定は完了です。
4.4、Maven を設定する
1. 次のコマンドを入力して、Maven ウェアハウスを見つけます。
mvn -v
見つかったソースディレクトリは次のとおりです
/maven/apache-maven-3.8.8
2. [Maven の追加] をクリックして自動インストールをキャンセルし、最後にソース ディレクトリを Jenkins 構成に貼り付けます。
このようにして、Maven が設定されました。
4.5. Node.js の設定
1. Node.js がインストールされているソース ディレクトリを見つけます。
ソースディレクトリは次のとおりです。
/nodejs/node-v15.0.0-linux-x64
2. [NodeJs の追加] をクリックして自動インストールをキャンセルし、最後にソース ディレクトリを Jenkins 構成に貼り付けます。
このようにして、Node.js も設定されました。
上記 3 つの設定が完了したら、一番下に戻って [保存] をクリックします。
6. SpringBootプロジェクトをデプロイする
1. SpringBoot プロジェクトによってパッケージ化された Jar パッケージのストレージ アドレスを作成します。ここでの絶対パスは次のとおりです。
/プロジェクト/スプリングブート
2. ホームページに戻り、「新しいタスク」をクリックします。
3. プロジェクト名を入力し、Maven プロジェクトのビルドを選択して、最後に「OK」をクリックします。
4. ソース コード管理を選択し、Git ウェアハウスのアドレスを入力します。ウェアハウスがプライベートの場合は、Git アカウントとパスワードである認証情報を手動で追加する必要があります。私のプロジェクトはオープンソースなので、追加する必要はありません。 、デフォルトでブランチが選択されます。
5. [ビルド] を選択し、[目標とオプション] に次のコマンドを追加します。
clean install -Dmaven.test.skip=true詳細コマンド
| パラメータ | 説明する |
|---|---|
| クリーン | プロジェクトをクリーンアップすると、ターゲット ディレクトリ target 内のファイルが削除されます |
| インストール | プロジェクトをローカル ウェアハウスにインストールし、最初にコンパイル、テスト、その他の目標を実行してから、パッケージ化された jar をローカル ウェアハウスにアップロードします |
| -Dmaven.test.skip=true | このパラメータは、テスト コードのコンパイルと実行をスキップすることを示します。 |
6. [Post Steps] を選択し、シェルの実行を選択します。
次のコマンドを追加します
mv /root/.jenkins/workspace/springboot-jenkins/target/springboot-docker-0.0.1-SNAPSHOT.jar /project/springboot/springboot-docker-0.0.1-SNAPSHOT.jar
cd /project/springboot/
BUILD_ID=dontKillMe nohup java -Xms512m -Xmx512m -jar springboot-docker-0.0.1-SNAPSHOT.jar &注記：
1. /root/.jenkins/workspace/springboot-jenkins の springboot-jenkins は、このビルドのプロジェクト名です。
2. 事前に新しい /project/springboot ディレクトリを作成する必要があります
3. springboot-docker-0.0.1-SNAPSHOT.jar は、maven パッケージ化後のデフォルトのファイル名ですが、パッケージ名がわからない場合は、タイプミスを防ぐために事前にパッケージ名を確認してください。
詳細コマンド
| パラメータ | 説明する |
|---|---|
| mv /root/.jenkins/workspace/springboot-jenkins/target/springboot-docker-0.0.1-SNAPSHOT.jar /project/springboot/springboot-docker-0.0.1-SNAPSHOT.jar | この行は、Jenkins ワークスペースにビルドされた Spring Boot プロジェクトの jar ファイルを、実行のために /project/springboot ディレクトリに移動します。 |
| cd /プロジェクト/スプリングブート/ | ディレクトリを、前の手順で jar パッケージを移動したディレクトリに切り替えます。 |
| BUILD_ID=dontKillMe nohup java -Xms512m -Xmx512m -jar springboot-docker-0.0.1-SNAPSHOT.jar & | BUILD_ID=dontKillMe は、タスクの完了後に Jenkins が開始プロセスを強制終了するのを防ぎ、nohup を使用してバックグラウンドで jar ファイルを実行し、Spring Boot アプリケーションを開始します。 |
7. 「保存」をクリックします。
8. [今すぐビルド] をクリックすると、左下隅に読み込みアニメーションが表示されます。
9. クリックした後、コンソール出力をクリックします。
10. 最初のデプロイメントは遅くなります。Maven ウェアハウスが空であるため、Maven はほとんどの時間 Alibaba Cloud ミラーから Jar パッケージをダウンロードしているため、しばらく待ちます。
このようにして、展開は成功しました。
注: ポート番号 9090 は解放されています
10. postman を使用してインターフェイスをテストする
OK、完了です!
7. Vue プロジェクトをデプロイする
1. 新しい Vue プロジェクトのストレージ アドレス。ここでは絶対パスは次のとおりです。
/プロジェクト/vue/dist
これは、Nginx サーバーが読み取るように構成した Web サイトのディレクトリです
2. nginx.conf ファイルを構成します。ただし、ポート番号、読み取りパス、リバース プロキシの 3 つの場所が必要です。
location /api/ {
proxy_pass http://ip:端口/;
}写真が示すように
設定方法がわからない場合は、上記のセクション 1.5 で Nginx のデプロイメントを参照してください。
注: セキュリティ グループはポート 88 を解放する必要があります。
3. Nginx を起動して、次のサイトにアクセスします。
dist フォルダーには何もないので、403 が正常です
4. 前の手順を繰り返し、プロジェクト名を入力し、フリー スタイル ソフトウェア プロジェクトを選択して、最後に [OK] をクリックします。
5. [ソース コード管理] をクリックし、プロジェクト アドレスを貼り付けてブランチを指定します。ここではオープン ソースのデモを提供しているため、資格情報を追加する必要はありません。
6. [Build Steps] をクリックし、シェルの実行を選択します。
7. 以下のコマンドを実行します。
npm install
rm -rf ./dist/*
npm run build
rm -rf /project/vue/dist/*
cp -rf ./dist/* /project/vue/dist
chmod -R 777 /project/vue/distコマンドの詳細:
| パラメータ | 説明する |
|---|---|
| npmインストール | npm install を実行して、必要なノード モジュールの依存関係をインストールします。 |
| rm -rf ./dist/* | ローカルの dist ディレクトリを空にし、以前のビルド結果を削除します。 |
| npm ビルドを実行する | npm run build コマンドを実行してプロジェクトをパッケージ化およびビルドし、最新の dist フォルダーを生成します。 |
| rm -rf /プロジェクト/vue/dist/* | サーバー展開ディレクトリ内の古い dist を削除し、展開前にクリーンアップ作業を実行します。 |
| cp -rf ./dist/* /project/vue/dist | 新しく構築されたローカル dist ディレクトリをサーバー デプロイメント ディレクトリにコピーして、デプロイメントを完了します。 |
| chmod -R 777 /プロジェクト/vue/dist | デプロイメント ディレクトリのアクセス許可を 777 に変更して、jenkins ユーザーがデプロイメント ディレクトリに書き込むための十分なアクセス許可を持っていることを確認します。 |
8.「保存」をクリックします。
9. [Build Now] をクリックすると、左下隅に読み込みアニメーションが表示されます。
10. クリックした後、コンソール出力をクリックします。
11. 成功が表示されれば、展開は成功しています。
12. デプロイしたばかりの Nginx Web サイトに再度アクセスします (Nginx を再起動する必要はありません。ホット デプロイメントです)。
この時点で、フロントエンドとバックエンドのプロジェクトはすべてデプロイされました。
8. プロジェクト Gitee のソース コード
このブログで使用されているプロジェクトのソース コードをここで共有します。ご自身で試してみてください。
フロントエンド: Docker による Vue プロジェクトのデプロイ: Docker を使用して、単純な Vue プロジェクトのソース コード共有をデプロイします。
バックエンド: Docker が SpringBoot プロジェクトをデプロイする: Docker を使用して単純な SpringBoot プロジェクトのソース コード共有をデプロイする
9. まとめ
上記は、Jenkins のデプロイメントを使用した私自身のフロントエンドとバックエンドの分離に関する技術的な共有です。ご質問がある場合は、コメント エリアでお気軽にお問い合わせください。