フロントエンドとバックエンド分離プロジェクトのDockerデプロイメントの実装例

フロントエンドとバックエンド分離プロジェクトのDockerデプロイメントの実装例

1. 環境整備

サーバ

Alibaba Cloud Server 1コア + 2GB

ソフトウェア

このデプロイメントでは Docker が使用されるため、ソフトウェア環境は Docker 上にあります。

MySQL 8.0.x、Redis、Nginxが必要です。事前にイメージをダウンロードしてください。

2. イメージを実行する

MySQLのインストール

私は MySQL のバージョン 8.0.x を使用しました。デプロイメント プロセス中にいくつかの問題が発生しました。ここでその問題を共有したいと思います。

docker 実行 \
-p 3306:3306 \
--name mysql \
--privileged=true \
--停止しない限り再起動する \
-v /home/mysql8.0.20/mysql:/etc/mysql \
-v /home/mysql8.0.20/logs:/logs \
-v /home/mysql8.0.20/data:/var/lib/mysql \
-v /home/mysql8.0.20/mysql-files:/var/lib/mysql-files \
-v /etc/localtime:/etc/localtime \
-e MYSQL_ROOT_PASSWORD=123456 \
-d mysql:8.0.20 \
--小文字テーブル名=1

コマンドの説明:

 -p ポート マッピング --privileged=true ファイルの権限設定をマウントします --restart except-stopped 起動後にコンテナーを自動的に再起動するように設定 -v /home/mysql8.0.20/mysql:/etc/mysql 構成ファイルをマウントします -v /home/mysql8.0.20/logs:/logs \ ログをマウントします -v /home/mysql8.0.20/data:/var/lib/mysql \ データ ファイルをホストに永続的にマウントします -v /home/mysql8.0.20/mysql-files:/var/lib/mysql-files MySQL8 は後でこのフォルダーを同期する必要があります -v /etc/localtime:/etc/localtime コンテナーの時間はホストと同期されます -e MYSQL_ROOT_PASSWORD=123456 パスワードを設定します -d mysql:8.0.20 バックグラウンドで開始、mysql
--lower_case_table_names=1 MySQL で大文字と小文字を区別しないようにする (0: 大文字と小文字を区別する、1: 大文字と小文字を区別しない)

--lower_case_table_names=1が設定される前に、 Table XX.QRTZ_LOCKS doesn't exist 的問題が発生します。

Baidu で検索したところ、MySQL 5.x と 8.x の設定が若干異なることがわかりました。

PS: MySQL 8.0.2 の起動時に、サーバー ('1') とデータ ディクショナリ ('0') の lower_case_table_names 設定が異なることが報告されます。

MySQL 8.0.20 をインストールした後、初期化中に my.cnf で lower_case_table_names=1 が設定され、起動時にエラーが報告されました。

ここに画像の説明を挿入

次のように

ここに画像の説明を挿入

MySQL の公式ドキュメントを確認すると、次のような記録があります。

lower_case_table_namesは、初期化時にのみ設定できます。
サーバー。サーバーの後にlower_case_table_names設定を変更する
初期化は禁止されています。

これは、初期化中に lower_case_table_names=1 が設定されている場合にのみ有効です。例:

--initialize --小文字のテーブル名=1

見る

参考:

問題を解決する

バックアップを作成し、元の MySQL コンテナを削除して、MySQL を再実行し、コマンドの最後に--lower_case_table_names=1を追加します。

MySQL 8以降では、このステップは初期化中に設定する必要があります。

Redis のインストール

docker run -p 6379:6379 --name redis -v /home/redis/data/:/data -d redis:3.2 redis-server --appendonly yes

コマンドの説明

-v /home/redis/data/:/data データディレクトリをマウント --appendonly yes Redisの永続性を有効にする

Nginx のインストール

ディレクトリをマウントする必要があったので、次のコマンドを実行しました。

docker 実行 \
-d \
-p 80:80 \
--name nginx \
-v /home/nginx/conf:/etc/nginx \
-v /home/nginx/html:/usr/share/nginx/html \
-v /home/nginx/logs:/var/log/nginx \
nginx

実行してみると、常に自動終了してしまうことが分かりました。ログ情報を確認し、Baidu で検索したところ、nginx 起動時にマウントするディレクトリを先に作成しておく必要があり、そうしないと自動終了してしまうことが分かりました。

したがって、まずマウントディレクトリを作成し、コマンドを実行する必要があります。

3. パッケージプロジェクト

フロントエンド

vue.config.jsdevServerノード マッピング ポートをバックエンド ポートと一致するように変更します。

次のコマンドを実行します。

npm 実行ビルド:prod

distディレクトリがローカルに生成されます

後部

  • application.ymlポートとファイルのアップロードパスを変更する
  • logback.xmlログ生成パスlog.pathを変更する
  • MySQLとRedisのアドレスを変更する

次のコマンドを実行します。

mvnクリーン
mvn パッケージ

ruoyi-admintargetの下にjarパッケージが生成されます。これが必要なものです。

IV. 展開

フロントエンド

nginx を設定します。/nginx/conf/conf.d/default.conf /nginx/conf/conf.d/default.conf設定を開始しましたが、設定が有効になっていないことがわかりました。その後、 /nginx/conf/conf.d/nginx.confの下に設定されました。具体的な設定は次のとおりです。

 サーバー{
        聞く 80;
        server_name localhost; # 場所の代わりにサーバーのIPアドレスを使用できます / {
            ルート /usr/share/nginx/html/dist/;
            インデックス index.html index.htm インデックス ログイン;
            try_files $uri $uri/ /index.html last;
        }
        場所 /prod-api/ {
            proxy_set_header ホスト $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header リモートホスト $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_pass http://localhost:7777/; # サーバーの IP に置き換えることができます}
     }

デプロイした後、ルート ディレクトリ以外のディレクトリで更新すると、 404 Not Foundエラーが表示されることがわかりました。次の解決策を見つけました。

場所を設定するときは、 try_files $uri $uri/ /index.html last;

後部

私はミラーデプロイメント方式でパッケージ化されたDockerfile + jarを使用します

Dockerファイル

java:8より

ボリューム/江

ruoyi-admin.jar app.jar を追加します

エクスポーズ7777

エントリポイント ["java","-jar","app.jar"]

サーバーにフォルダを作成し、そこにDockerfile 和jar包を配置し、次のコマンドを実行してイメージを生成します。

ruoyi-vue を実行します。

注: 最後にもう 1 つあります.

この時点では、生成されたイメージを実行するだけです

docker run -d -p 7777:7777 --name nflj-vue ruoyi-vue

フロントエンドとバックエンドを分離したプロジェクトのDockerデプロイメントの実装例については、これで終わりです。フロントエンドとバックエンドを分離したプロジェクトのDockerデプロイメントの関連については、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き閲覧してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません:
  • docker-compsoe を使用してフロントエンドとバックエンドを分離したプロジェクトをデプロイする方法

<<:  ElementUI の el-dropdown に複数のパラメータを実装する方法

>>:  Web ページでパラメータ名によって ActiveX コントロールのプロパティに値を割り当てる例

推薦する

WeChatアプレットが計算機機能を実装

この記事では、WeChatアプレットの計算機機能を実装するための具体的なコードを参考までに紹介します...

MySQL データベースの詳細な説明 - 複数テーブル クエリ - 内部結合、外部結合、サブクエリ、相関サブクエリ

複数テーブルクエリ複数のテーブルから関連するクエリ結果を取得するには、単一の SELECT ステート...

Vueトップタグ閲覧履歴の実装

目次ナンセンス実装された機能文章要点ナンセンスデモプレビュー実装された機能デフォルトでホームページが...

Javascript ファイルと Blob の詳細な説明

目次ファイル()文法パラメータ例ブロブ()文法パラメータ財産方法例要約するファイル() File()...

MySQL のマスター スレーブ レプリケーション オプションをオンラインで変更する方法

序文: MySQL で最も一般的に使用されるアーキテクチャは、マスター スレーブ レプリケーションで...

MySQLトランザクションとMySQLログの詳細な説明

取引特性1. アトミック性: トランザクションの開始後、すべての操作が完了するか、まったく実行されな...

vue WatchとComputedの使用の概要

目次01. リスナーウォッチ(1)機能(2)特性と方法(3)監視対象(4)リスニングアレイ02. 計...

WeChatアプレットが9マスグリッド効果を実現

この記事では、WeChatアプレットの9マスグリッド効果を実現するための具体的なコードを参考までに紹...

MySQL8の再帰メソッドの使い方を教える

以前、カスタム関数を使用して MySQL でツリー構造を再帰的にクエリする方法についての記事を書きま...

Linux nslookup コマンドの使用方法の詳細な説明

[nslookup とは?] 】 nslookup コマンドは、Linux で非常によく使用されるネ...

JavaScript を学ぶときに知っておくべき 3 つのヒント

目次1. 魔法の拡張演算子1. 配列をコピーする2. 配列を結合する3. オブジェクトを展開する2....

CSSの幅と高さのデフォルト値の詳細な説明:autoと%

結論は幅の%: 包含ブロック(親要素)の幅に基づいて、親の制限を超える幅のパーセンテージを定義します...

Vue Routerはバックグラウンドデータに応じて異なるコンポーネントをロードします

目次実際のプロジェクトで遭遇する要件実装が間違っているところもある私は個人的に、実装するより良い方法...

表示しているページのスナップショットを Baidu が保存できないように設定する方法

今日、Baidu でページを検索したところ、ページが削除されていたため、当然 Baidu スナップシ...

HTML チュートリアル: HTML 水平線分

<br />このタグを使用すると、画面上に水平線を表示して、ページのさまざまな部分を区切...