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

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

以下もご興味があるかもしれません:
  • Linux に Springboot をデプロイしてサーバー リソースにアクセスする方法
  • Springboot を Linux サーバーにパッケージ化してデプロイする方法
  • SpringbootプロジェクトをLinuxサーバーに正常にデプロイする方法を教えます

<<:  Antd+vueは円形属性フォームの動的検証のアイデアを実現します

>>:  MySQL での実行計画の詳細分析

推薦する

リンクをクリックしたときに表示される点線のボックスを削除するいくつかの方法

削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...

Linux 環境に nginx をインストールするチュートリアル

目次1. 必要な環境をインストールする //gccをインストールする yum で gcc-c++ を...

Linux TTY/PTS の違いの概要

キーボードで文字を入力すると、対応するプロセスにどのように送信されるのでしょうか? ps や who...

ふるい抽選を実施するミニプログラム

この記事の例では、ふるい抽選を実装するためのミニプログラムの具体的なコードを参考までに共有しています...

ノードスクリプトで自動サインインと抽選機能を実現

目次1. はじめに2. 準備3. スクリプトプロジェクトの構築4. コードの作成と実行5. まとめと...

WeChatアプレットがフォーム検証を実装

WeChatアプレットフォームの検証、参考までに具体的な内容は次のとおりです。プラグインWxVali...

Svelte の Defer Transition を Vue で実装する方法

最近、Rich Harris の <Rethinking Reactivity> ビデオ...

ページスピードの最適化の概要

インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...

Vue3 でパンくず関数コンポーネントをカプセル化するいくつかの方法

目次序文1. パンくずリストはなぜ必要なのでしょうか? 2. 一次包装1. 実装のアイデア2. コー...

CentOS 8.4 に Docker をインストールする詳細なチュートリアル

目次序文:システム要件:インストール環境:古いバージョンをアンインストールします: yum は具体的...

Vueリストデータを削除した後、ページを自動的に更新する方法と更新方法の詳細な説明

問題の説明:フロントエンドがデータの一部を削除したり、新しいデータを追加したりすると、バックエンドの...

SQL 文を使用してデータを収集する場合の sum 関数と count 関数の if 判定条件の使用法の説明

まず、例を挙げてみましょう(読みたくない場合は、以下の要約だけ読んでください)。 order_typ...

Linux 最速のテキスト検索ツール ripgrep (grep の最良の代替)

序文テキスト検索ツールといえば、Linux で最も便利でよく使われるツールの 1 つである grep...

VUEはFlappy Birdゲームのサンプルコードを実装します

Flappy Bird は、誰もがアプリでプレイしたことがある非常にシンプルな小さなゲームです。ここ...

反応自動構築ルーティングの実装

目次順序1. 集中ルーティング2. ファイルディレクトリ3. CompileRouterを作成する4...