SpringBoot のフロントエンドとバックエンドの分離プロジェクト、パッケージ化とサーバーへの展開の詳細なグラフィック プロセス

実装手順

1. 設定ファイルのアドレスを変更します。

1. MySQL 構成を変更する

MySQL アドレスを変更し、デプロイする必要があるデータ名、アカウント、パスワードを変更します。
ここに画像の説明を挿入します

2. Redis 構成を変更する

Redis アドレスを変更し、展開する必要がある Redis パスワードを変更します (必要な場合)。
ここに画像の説明を挿入します

3. ログパスと文字セット構成を変更する

logback.xmlのログの保存先アドレスを変更する
ここに画像の説明を挿入します

ログの文字セットをリセットします (サーバーに配置された後にログが文字化けするのを防ぐため)
ここに画像の説明を挿入します
ここに画像の説明を挿入します

2. ソースコードを圧縮してサーバーにアップロードします

1. フロントエンドファイルをアップロードする

  • 完全なソース コード ファイルを事前にローカルで .zip 形式に圧縮します。
  • プロジェクトのソース コードを保存するフォルダー (/workspace) をサーバー上に作成します。
  • xftp ツールを使用して、パッケージ化されたフロントエンド プロジェクトのソース コードをサーバーの対応するフォルダーにアップロードします。
  • コマンドを使用してunzip ruoyi-ui.zipプロジェクトのソース コードを解凍する
  • コマンドを使用してrm -rf ruoyi-ui.zip元の圧縮ファイルを削除します
  • コマンドを使用してcd ruoyi-ui/ソースコードフォルダーに移動します

2. バックエンド ファイルをアップロードします (上記と同じ)

3. フロントエンドプロジェクトのパッケージ化

1. 依存関係をインストールする

  • コマンド cd ruoyi-ui/ を使用してソース コード フォルダーに移動します。
  • npm install --unsafe-perm --registry=https://registry.npm.taobao.orgフロントエンド プロジェクトの依存関係をインストールします (node.js がサーバーにインストールされている必要があります)
  • --unsafe-perm権限の問題を防ぐ
  • --registry=https://registry.npm.taobao.orgタオバオのミラーソース、中国での方が速い

2. プロジェクトのパッケージ化

  • コマンドを使用するnpm run build:prod
  • パッケージ化が完了すると、dist ディレクトリが生成されます (デフォルトのディレクトリ名は dist)。
    ここに画像の説明を挿入します

4. バックエンドプロジェクトのパッケージ化

1. プロジェクトのパッケージ化(jarパッケージ)

  • コマンドを使用しますmvn package(サーバーに Maven 環境をインストールする必要があります)
  • コマンドを使用してcd target/ディレクトリに入ると、準備された jar パッケージが表示されます (ここでの jar パッケージは ruoyi.jar です)。
  • ターゲット ディレクトリのクリーニングによって jar パッケージが失われるのを防ぐために、jar パッケージを上位のディレクトリにコピーします。

2. プロジェクトのパッケージ化(戦争パッケージ)

  • pomファイルを変更する
    ここに画像の説明を挿入します

  • 組み込み Tomcat を除外して、外部 Tomcat にデプロイできるようにします。
    ここに画像の説明を挿入します

  • 元のスタートアップ クラスを指す新しいスタートアップ クラスを追加します。
    ここに画像の説明を挿入します

  • 変更した 2 つのファイルをサーバーにアップロードします (対応するファイルをアップロードして置き換えるだけです)。

  • コマンドを使用してmvn cleanディレクトリをクリーンアップする

  • コマンドを使用してmvn packagewar パッケージをビルドする

  • コマンドを使用してcd target、このディレクトリで war パッケージを見つけます。

5. フロントエンドプロジェクトをデプロイする

1. Nginx を使用してフロントエンド プロジェクトをデプロイする

  • コマンドを使用してcd /usr/local/nginx/nginx ディレクトリに移動します
    ここに画像の説明を挿入します

  • Nginx 設定ファイルを変更します (conf フォルダー内の nginx.conf ファイルを変更します)。

  • 場所のルートに続くパスを、パッケージ化されたフロントエンド プロジェクトのファイル アドレスに変更します。
    ここに画像の説明を挿入します

  • 権限関連の問題を防ぐには、ファイルの先頭のユーザーを root に変更します。
    ここに画像の説明を挿入します

  • コマンドを使用してcd sbin/、対応するディレクトリに移動します

  • コマンドを使用して./nginxnginxを起動します

  • この時点で、対応する IP アドレスをブラウザに入力してフロントエンドにアクセスできます。

6. バックエンドプロジェクトをデプロイする

1.jarパッケージのデプロイ方法

  • 対応するディレクトリ内のコマンドを使用して、nohup java -jar ruoyi.jar &バックエンド プロジェクトをバックグラウンドで実行します。

  • 現時点では、フロントエンド プロジェクトは依然としてエラー 404 を報告する可能性があります。これは、フロントエンドとバックエンドのアドレスが関連していないためです。

  • nginx.conf ファイルでプロキシを再構成します。
    ここに画像の説明を挿入します

  • nginx ディレクトリに移動してリロードします。nginx/usr/local/nginx/sbin/nginx -s reload

  • 現時点では、フロントエンド プロジェクトに再度アクセスしても、エラーは報告されなくなります。

  • プロジェクトのデプロイメントが完了しましたこと、おめでとうございます。

2. warパッケージの導入方法

  • ps -aux | grep java現在の Java プロセスを表示する
  • kill -9 进程号プロセスをシャットダウンする
  • Tomcat フォルダーに移動しますcd /usr/local/tomcat/
  • パッケージ化した war パッケージを webapps ディレクトリに配置します
  • cd webapps/次に、コマンドを実行してcp /root/workspace/ruoyi/ruoyi.war ./war パッケージを現在のディレクトリにコピーします。
  • 起動するtomcatservice tomcat start
  • このとき問題が発生します。IP に直接アクセスすると Tomcat のホームページが開きます。バックエンドにアクセスするには、元のアドレスの後に /ruoyi を追加する必要があります。
  • この問題を解決するには、tomcat 構成を変更し、tomcat フォルダーの下の conf ディレクトリに移動して、server.xml を見つける必要があります。
  • 新しい構成情報を追加して、元のアクセス方法をルート ディレクトリ アクセスに変更します。
    ここに画像の説明を挿入します
  • Tomcatを停止しservice tomcat stopて再起動しますservice tomcat start

3. クラスターを構成する

  • nginx.confファイルを変更する
    ここに画像の説明を挿入します

  • 上記で変更したアップストリームへのプロキシ転送構成を変更します。
    ここに画像の説明を挿入します

  • 再起動nginx/usr/local/nginx/sbin/nginx -s reload

  • ログをリアルタイムで監視して、現在どのバックエンドがアクセスされているかを確認しますtail -f 日志文件名

導入に関する考慮事項

フロントエンド ページの非ホームページ部分が更新されると、ページ 404 問題が発生します。

nginx 構成ファイルを変更し、次のコードを nginx に追加します。

location / {
    
    
    ……
    try_files $uri $uri/ /index.html; ---解决页面刷新404问题
}

参考記事:https://www.jb51.net/article/261803.htm

デプロイバックエンドプロジェクトの開始に失敗しました

バックエンドプロジェクトのポート番号が占有されていないか確認する
netstat -anp | grep 端口号

サーバースペースを節約する

フロントエンドとバックエンドのプロジェクトのパッケージ化は両方ともローカルで完了できます。アップロード サーバーは、jar パッケージと dist フォルダーのアップロードを最小限に抑えることができます。この方法により、サーバー スペースのリソースが最も節約されます。

  • バックエンド プロジェクト用の jar パッケージはそのままにしておきます
  • フロントエンド プロジェクトは dist フォルダーを保持するだけで済みます

おすすめ

転載: blog.csdn.net/zwb568/article/details/131609429