序文 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 パッケージを使用する必要があります)
定数 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> 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 つの方法があることがわかりました。
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 プロジェクトをサーバーにアップロードします。
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 -ef | grep java プロジェクト名を見つけます。最初の列はPIDです。 3.2 Nginx リバース プロキシ SpringBoot サービス 一部のビジネスでは https サービスを使用する必要があるため、バックエンド サービスを https サービスにリバース プロキシする必要があります。 前提として、以下の環境が設定されていることを前提としています。設定されていない場合は、NginxのインストールとSSLの設定に進んでください。
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から直接アクセスできるようになります。 要約する ヒント: 記事の要約は次のとおりです。
SpringBoot + Vue プロジェクトを Linux サーバーにデプロイする方法についての記事はこれで終わりです。Linux サーバーへの SpringBoot + Vue のデプロイに関する関連コンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Antd+vueは円形属性フォームの動的検証のアイデアを実現します
削除する方法はいくつかあります:リンクを直接追加するonfocus="this.blur(...
目次1. 必要な環境をインストールする //gccをインストールする yum で gcc-c++ を...
キーボードで文字を入力すると、対応するプロセスにどのように送信されるのでしょうか? ps や who...
この記事の例では、ふるい抽選を実装するためのミニプログラムの具体的なコードを参考までに共有しています...
目次1. はじめに2. 準備3. スクリプトプロジェクトの構築4. コードの作成と実行5. まとめと...
WeChatアプレットフォームの検証、参考までに具体的な内容は次のとおりです。プラグインWxVali...
最近、Rich Harris の <Rethinking Reactivity> ビデオ...
インターネットは人々の生活にますます欠かせないものになってきていると思います。 Ajax や fle...
目次序文1. パンくずリストはなぜ必要なのでしょうか? 2. 一次包装1. 実装のアイデア2. コー...
目次序文:システム要件:インストール環境:古いバージョンをアンインストールします: yum は具体的...
問題の説明:フロントエンドがデータの一部を削除したり、新しいデータを追加したりすると、バックエンドの...
まず、例を挙げてみましょう(読みたくない場合は、以下の要約だけ読んでください)。 order_typ...
序文テキスト検索ツールといえば、Linux で最も便利でよく使われるツールの 1 つである grep...
Flappy Bird は、誰もがアプリでプレイしたことがある非常にシンプルな小さなゲームです。ここ...
目次順序1. 集中ルーティング2. ファイルディレクトリ3. CompileRouterを作成する4...