SpringBoot + Vue プロジェクトを Linux サーバーにデプロイするための詳細なチュートリアル

序文

SpringBoot + Vueのフロントエンドとバックエンドを分離したプロジェクトをどのようにデプロイしたかを紹介します。使用したLinuxディストリビューションはCentOS7.5です。

ElementUI に基づく e コマース バックエンド管理システムを使用すると、同様のバックエンドの開発がはるかに簡単になります。しかし、以前のシステムのバックエンドはノードを使用して完成しており、これは私たちJava開発者にとって役に立ちません。 ElementUIの使い方を学んだだけで十分で、その後はSpringBootを使ってバックエンドサービスをすべて自分で完成させることができます。

最近、Vue3の正式版がリリースされたようです。お時間があれば、ご覧になってみてください。

ヒント：以下はこの記事の主な内容です。以下のケースを参考にしてください。

1. Vue パッケージ化されたプロジェクトをデプロイするにはどうすればいいですか?

1.1 Vueプロジェクトのパッケージ化

ヒント: コンピュータに Vue がインストールされていない場合は、まず Node をインストールしてください。次のExpress (サーバーをすばやく構築する機能を提供する http フレームワーク) も Node に基づいています。具体的なインストール方法はBaiduでご確認ください。ここではインストール方法は紹介しません。

私のプロジェクトはvue cli4を使用して構築されており、これはscaffoldingを使用して構築されたプロジェクトです。vue cliのバージョンがわからない場合は、次のコマンドを入力して確認できます。

ビュー -V 

スキャフォールディングを使用する利点は、すべてが視覚化されることです。 ワンクリックでプロジェクトを開始し、ワンクリックでプロジェクトをコンパイルし、依存関係のインストールが非常に便利になります。効果図は以下のとおりです

ビルドをクリックしてから実行をクリックすると、プロジェクトがビルドされた後、プロジェクトのルート パスに dist フォルダーが生成されます。このファイルには、vue プロジェクト パッケージのすべてのコンテンツが保存されます。

1.2 Expressを使用して静的リソースファイルをプロキシする

もちろん、静的リソースをプロキシする方法はたくさんあります。これは比較的簡単な解決策だと思います。では、どのように行うのでしょうか?

ヒント: Linux 環境でも Windows 環境でも、次のソリューションは普遍的です (前提として、node と npm がすでにインストールされている必要があります。環境をインストールするには npm パッケージを使用する必要があります)

• 次のような新しいフォルダを作成します: myapp mkdir myappそしてそのフォルダに移動します: cd myapp
• 次にノード環境を初期化します: npm init 、
• 次に、JSON情報を設定するかどうかを選択します。
• 次に、Express 環境をインストールします: npm install express --save 、 --save は現在の環境でのみ使用されることを意味します。 jsファイルを作成するように求められますが、無視するか、作成することができます。
• 次に、app.js ファイルを作成します: touch app.js dist フォルダーと同じディレクトリに配置します。
• Expressプロキシの静的リソースのコードを記述します。Windows環境ではテキストエディタ、Linux環境ではvimエディタを使用します。

定数 express = require('express')
const app = express()

// プロキシ静的リソース app.use(express.static('./dist'))

// リソースのアクセスパスとしてポート4000をリッスンします app.listen(4000, () => {
 console.log('http://127.0.0.1:4000 でサーバーが稼働しています')
})

編集後、コードを保存します。プロジェクト管理ツールキットpm2を使用します。

ウィンドウズ

これをインストールすると、プロジェクトのステータスをリアルタイムで確認できます

これを使用すると、node app.js でプロジェクトを実行する必要がなくなります。直接実行することの欠点は、シェルまたは Linux シェルを閉じると、プロジェクトが自動的に閉じられることです。これにより、プロジェクト管理が非常に便利になります

2. SpringBoot プロジェクトをデプロイするにはどうすればいいですか?

2.1 データベースの導入で起こりうる問題

• まず、MySQLデータベースがサーバーにインストールされていることを確認してください
• 次に、データベースの関連構成、リモート アクセスの設定などを行います。
• データベースはデフォルトではリモート接続をサポートしていません。必要な場合は有効にしてください。% を設定すると、外部ユーザーがアクセスできるようになります。

mysql> update mysql.user set host='%' where user='root' and host='localhost';
mysql> 権限をフラッシュします。

// 上記が機能しない場合は、このコマンドを入力してください。これにより、リモート アクセスの問題が解決されるはずです。mysql> grant all privileges on *.* to root@'%' identified by 'your database login password';

2.2 SpringBootプロジェクトパッケージのアップロード

オンラインで検索したところ、SpringBoot プロジェクトをパッケージ化する方法には 2 つの方法があることがわかりました。

• 組み込みTomcatを使用して直接実行
• 組み込みのTomcatは使用せず、プロジェクトをwarパッケージにパッケージ化し、Tomcatにデプロイして実行します。

Java EEの段階では2番目のソリューションを使用しましたが、現在は1番目のソリューションを使用しています

プロジェクトをパッケージ化するには、Maven pom 依存関係に次のプラグインを追加する必要があります。

<ビルド>
 <プラグイン>
 <プラグイン>
 <groupId>org.springframework.boot</groupId>
 <artifactId>spring-boot-maven-plugin</artifactId>
 </プラグイン>
 </プラグイン>
 </ビルド>

アイデアを開き、右側のパッケージをクリックしてパッケージ化を完了します。生成されたファイルはターゲット ディレクトリにあります。

次に、コマンドを使用してコマンド ラインでプロジェクトを直接実行できます。

java -jar xxx.jar 

java -jar xxxx.war

3. サーバー構成

3.1 Linux環境でのSpringBootプロジェクトの起動と停止

ここで、パッケージ化された SpringBoot プロジェクトと vue プロジェクトをサーバーにアップロードします。

vue プロジェクトは上記の手順に従いますが、これは Windows および Linux プラットフォームに共通です。

java -jar を使用してプロジェクトを実行するのが便利なのはわかっていますが、Linux Shell が閉じられるとサービスも閉じられるという問題も発生します。そのため、プロセス (SpringBoot サービス) がバックグラウンドで実行され続けるようにするには、スクリプトを使用する必要があります。

bashスクリプトを記述します。demo-0.0.1-SNAPSHOTを独自のエクスポートしたjarパッケージに置き換えるだけです。

#!/bin/sh
nohup java -jar デモ-0.0.1-SNAPSHOT.jar &

ここで & は省略できません。つまり、デーモン プロセスはバックグラウンドで実行できます。

スクリプトを保存して実行する

sh スタートアップ.sh

ps: ここでコマンドを実行できない場合は、このフォルダに読み取りおよび書き込み権限を付与する必要がありますchmod 777 *

プロセスが実行中かどうかを確認する

ps -ef | grep java

プロジェクト名を見つけます。最初の列はPIDです。
Javaプロジェクトを停止するにはkill -9 pidと入力します。

3.2 Nginx リバース プロキシ SpringBoot サービス

一部のビジネスでは https サービスを使用する必要があるため、バックエンド サービスを https サービスにリバース プロキシする必要があります。

前提として、以下の環境が設定されていることを前提としています。設定されていない場合は、NginxのインストールとSSLの設定に進んでください。

• Nginxサーバーをインストールしました
• SSL証明書を設定し、httpsサービスを実装しました。方法がわからない場合は、この記事を確認してください。

http でバックエンド サービスのエイリアスを設定します。SpringBoot プロジェクトのエイリアスでは '_' は使用できません。

アップストリーム tikuApiServer {
 	サーバー 127.0.0.1:9999;
 }

次に、サーバー443のサービスで次のように構成します。

 サーバー{
 443 ssl http2 default_server をリッスンします。
 listen [::]:443 ssl http2 default_server;
 server_name ドメイン名;
 ルート https プロジェクトへのパス。
 インデックス index.html index.htm;
#
 ssl_certificate "certificate.crt";
 ssl_certificate_key "証明書キー";
 ssl_session_cache 共有:SSL:1m;
 ssl_session_timeout 10分;
 ssl_ciphers HIGH:!aNULL:!MD5;
 ssl_prefer_server_ciphers をオン;

 # デフォルトのサーバー ブロックの構成ファイルを読み込みます。
 /etc/nginx/default.d/*.conf を含めます。
 mime.types を含めます。
		デフォルトタイプ アプリケーション/オクテットストリーム;
		
		// =================== ここ =======================
 場所 /tiku/
 	proxy_pass http://tikuApiServer/api/v1/;
 }

 エラーページ 404 /404.html;
 場所 = /40x.html {
 }

 エラーページ 500 502 503 504 /50x.html;
 場所 = /50x.html {
 }
 }

このようにして、バックエンドAPIはhttps://domain/tiku/xxxxから直接アクセスできるようになります。

要約する

ヒント: 記事の要約は次のとおりです。

1. フロントエンドとバックエンドの分離 SpirngBoot + Vue 統合デプロイメント
2. Bash スクリプト (デーモン実行プロジェクト)
3. MySQL リモート アクセス

SpringBoot + Vue プロジェクトを Linux サーバーにデプロイする方法についての記事はこれで終わりです。Linux サーバーへの SpringBoot + Vue のデプロイに関する関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM をよろしくお願いいたします。