Docker が SpringBoot+Vue プロジェクトをデプロイする

1. プロジェクト展開計画

        1. バックエンドのマルチモジュール プロジェクトのブログと各モジュールの実行ポート:

フロントエンドサービスモジュールsaneng-blog->7777、バックエンドサービスモジュールsanengg-admin->8989、パブリックモジュールsaneng-framework

        2. フロントエンド Vue プロジェクト: sg-blog-vue->80

        3. フロントエンドおよびバックエンド Vue プロジェクト: sg-vue-admin->81

        4.Dockerに必要なイメージ

                java:17（jdk17）

                mysql:8.0.19

                リディス:6.0.8

                nginx:1.18.0

        5. プロジェクトの展開

                ドッカーをインストールする

                java:8 イメージをプルし、Maven を使用してバックエンド プロジェクトをパッケージ化し、jar パッケージをサーバー上の指定されたディレクトリ /mydata にアップロードし、Dockerfile ファイルを書き込み、バックエンド プロジェクトをイメージ ファイルにフォーマットします。

                mysql:8.0.19、redis:6.0.8、nginx:1.18.0 イメージをプルします。

                docker-compose.yml ファイルを作成し、docker-compose コンテナー オーケストレーションを使用してコンテナーの実行を管理します。

                mysqlを設定してSQLファイルをインポートする

                Redis を構成し、redis.conf ファイルを変更する

                nginx を構成し、パッケージ化された Vue プロジェクトを html ディレクトリに配置し、nginx.conf ファイルを構成します。

                テスト走行

                Alibaba Cloud Image Warehouse への画像のアップロード

        6. ツールを使用する

                アイデア

                ナビキャット

                モバクスターム

2. 事前作業

        2.1バックエンド プロジェクトは Maven を使用してパッケージ化されます

        2.2プロジェクトのパッケージ化、jar パッケージのテストをローカルで実行する

ターゲット ディレクトリを入力し、ファイル検索ボックスに「cmd」と入力して Dos ウィンドウに入り、コマンドを使用して jar パッケージを実行します。

java -jar jar包

エラーが報告されない場合は、jar パッケージに問題はありません。

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

npm run build

        2.4 ローカルでテストしてNginxに入れる テストが正常であれば使用可能です。

        2.6 セキュリティグループルールの構成

クラウドサーバーのセキュリティグループにルールを追加する

これは Alibaba Cloud ECS で、私が追加したのは受信方向のルールです。

3.Dockerのインストール

Docker オペレーティング環境では、システムが 64 ビットであり、Linux システム カーネル バージョンが 3.8 以降である必要があります。

インストールを開始します:

1: gcc環境をセットアップする

yum -y install gcc
yum -y install gcc-c++

2: 必要なソフトウェア パッケージをインストールする

yum install -y yum-utils

3: ミラーウェアハウスを設置する

ただし、Docker サーバーが海外にあるため、ウェアハウスからイメージをダウンロードするときに接続が拒否されたり、接続がタイムアウトしたりする場合があるため、Alibaba Cloud Image Warehouse を使用できます。

yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo

4: yum パッケージのインデックスを更新する

yum makecache fast

5: Docker エンジンをインストールする

yum install docker-ce docker-ce-cli containerd.io docker-compose-plugin

6: Docker を起動する

systemctl start docker

Docker サービスを表示する

Docker のバージョン情報を表示する

docker version

7: Alibaba Cloud Image Acceleration 構成

Alibaba Cloud アクセラレータを設定するには、まず Alibaba Cloud アカウントを持っている必要があります。Alibaba Cloud にログインした後、Alibaba Cloud のコンテナ イメージ サービス ページ https://cr.console.aliyun.com を開き、対応するページを見つけて、指定された手順に従って構成を完了します。

 NetEase Cloud Accelerator を設定するには、Alibaba Cloud Accelerator 設定手順のレジストリミラー アドレスを次のアドレスに置き換えるだけです: http://hub-mirror.c.163.co 

(段階的に入力する必要があることに注意してください。私が入力した内容を参照してください) 

7. HelloWorld イメージをテストする

「Docker からのこんにちは!」を参照してください。フィールド 説明 インストール手順に問題はなく、Docker は正常にインストールされました。

4.画像をプルします

イメージをプル java:17 (JDK17)

docker pull openjdk:17

イメージ mysql:8.0.19 をプルします。

docker pull mysql:8.0.19

イメージをプルします redis:6.0.5

docker pull redis:6.0.5

イメージをプルします nginx:1.18.0

docker pull nginx:1.18.0

現在の画像をすべて表示:

5. Dockerfile を作成してイメージをビルドする 

1. まず、jar パッケージをサーバーの指定されたディレクトリに転送します

ルートディレクトリにmydataディレクトリを作成しました。

2. mydata ディレクトリに Dockerfile ファイルを作成し、Dockersfile ファイルを書き込みます

ここでは、2 つの jar パッケージをそれぞれ 2 つのイメージに作成します。ディレクトリ内に存在できる Dockerfile ファイルは 1 つだけであるため、最初のイメージがビルドされた後に、対応する Dockerfile ファイルが変更されます。

vimモードで :set paste貼り付けたテキストデータは乱雑になりません

最初の Dockerfile

#基础镜像使用jdk17
FROM openjdk:17
#作者
MAINTAINER gj
# VOLUME 指定临时文件目录为/tmp，在主机/var/lib/docker目录下创建了一个临时文件并链接到容器的/tmp
VOLUME /tmp
# 将jar包添加到容器中并更名
ADD sangeng-blog.jar sangeng_blog.jar
# 运行jar包
RUN bash -c 'touch /sangeng_blog.jar'
ENTRYPOINT ["java","-jar","/sangeng_blog.jar"]
#暴露7777端口作为微服务
EXPOSE 7777

3. イメージを構築する

docker build -t sangeng_blog:1.0 .

4. 2 番目の Dockerfile

#基础镜像使用jdk17
FROM openjdk:17
#作者
MAINTAINER gj
# VOLUME 指定临时文件目录为/tmp，在主机/var/lib/docker目录下创建了一个临时文件并链接到容器的/tmp
VOLUME /tmp
# 将jar包添加到容器中并更名
ADD sangeng-admin.jar sangeng_admin.jar
# 运行jar包
RUN bash -c 'touch /sangeng_admin.jar'
ENTRYPOINT ["java","-jar","/sangeng_admin.jar"]
#暴露8989端口作为微服务
EXPOSE 8989

5. イメージを構築する

docker build -t sangeng_admin:1.0 .

6. 構築されたイメージを表示する

docker images

6. Docker-composeコンテナオーケストレーションを使用する

6.1 Docker-compose をインストールします (新しいバージョンの Docker がデフォルトでインストールされます)

注: Compose の下位バージョンの場合は、次のバージョンの間にある必要がありますdocker。compose-

        1. まず、ホストに docker-compose 環境があるかどうかを確認します。

docker compose version

そうでない場合はインストールしてください

        2. インストールコマンド

DOCKER_CONFIG=${DOCKER_CONFIG:-$HOME/.docker} 

mkdir -p $DOCKER_CONFIG/cli-plugins 

curl -SL https://github.com/docker/compose/releases/download/v2.11.2/docker-compose-linux-x86_64 -o $DOCKER_CONFIG/cli-plugins/docker-compose

chmod +x $DOCKER_CONFIG/cli-plugins/docker-compose

6.2 nginxファイルの設定

1. / ディレクトリの下に app ディレクトリを作成し、app ディレクトリに入ります

2. まず、設定をコピーするために nginx コンテナを作成します

# 1.运行容器
docker run -p 80:80 --name nginx -d nginx:1.18.0

# 2.将容器内的配置文件拷贝到当前目录/app中:
docker container cp nginx:/etc/nginx .
# 3.将文件nginx修改为conf
mv nginx conf
# 4.创建文件夹nginx
mkdir nginx
# 5.将conf目录拷贝到nginx目录
cp -r conf nginx/
# 6.删除conf目录
rm -rf conf
# 3.停止并删除容器
docker stop nginx && docker rm nginx 

6.4 docker-compose.yml ファイルを作成する

1. /mydata ディレクトリに docker-compose.yml ファイルを作成し、docker-compose.yml ファイルを書き込みます

vimモードで :set paste貼り付けたテキストデータは乱雑になりません

#compose版本
version: "3"  
 

services:
  sangeng_blog:
#微服务镜像  
    image: sangeng_blog:1.0
    container_name: sangeng_blog
    ports:
      - "7777:7777"
#数据卷
    volumes:
      - /app/sangeng_blog:/data/sangeng_blog
    networks: 
      - blog_network
    depends_on: 
      - redis
      - mysql
      - nginx


  sangeng_admin:
#微服务镜像
    image: sangeng_admin:1.0
    container_name: sangeng_admin
    ports:
      - "8989:8989"
#数据卷
    volumes:
      - /app/sangeng_admin:/data/sangeng_admin
    networks:
      - blog_network
    depends_on:
      - redis
      - mysql
      - nginx
     
#redis服务
  redis:
    image: redis:6.0.8
    ports:
      - "6379:6379"
    volumes:
      - /app/redis/redis.conf:/etc/redis/redis.conf
      - /app/redis/data:/data
    networks: 
      - blog_network
    command: redis-server /etc/redis/redis.conf
 
 #mysql服务
  mysql:
    image: mysql:8.0.19
    environment:
      MYSQL_ROOT_PASSWORD: 'xu.123456'
      MYSQL_ALLOW_EMPTY_PASSWORD: 'no'
      MYSQL_DATABASE: 'sg_blog'
      MYSQL_USER: 'root'
      MYSQL_PASSWORD: 'xu.123456'
    ports:
       - "3306:3306"
    volumes:
       - /app/mysql/db:/var/lib/mysql
       - /app/mysql/conf/my.cnf:/etc/my.cnf
       - /app/mysql/init:/docker-entrypoint-initdb.d
    networks:
      - blog_network
    command: --default-authentication-plugin=mysql_native_password #解决外部无法访问

 #nginx服务
  nginx:
    image: nginx:1.18.0
    ports:
      - "80:80"
      - "8093:8093"
      - "8094:8094"
    volumes:
      - /app/nginx/html:/usr/share/nginx/html
      - /app/nginx/logs:/var/log/nginx
      - /app/nginx/conf:/etc/nginx
    networks:
      - blog_network
    

 
 #创建自定义网络
networks: 
   blog_network: 

2. カレントディレクトリのcompose.ymlに構文エラーがないか確認する

docker compose config -q

3. すべての docker-compose サービスを開始し、バックグラウンドで実行します。

docker compose up -d

 実行中のコンテナインスタンスを表示する

注: MySQL と Redis がまだ構成されていないため、コンテナーがハングする可能性があります。この場合、MySQL と Redis が構成されるまで待ってから、コンテナー インスタンスを再起動できます。

7. MySQL の構成

1. SQL ファイルを/app/mysql/dbディレクトリ (MySQL コンテナ インスタンスと同じコンテナ データ ボリュームの場所) に転送します。

ネイティブ Navicat は SQL ファイルをエクスポートし、/app/mysql/dbディレクトリに転送します

2. MySQL コンテナインスタンスを入力します。

docker exec -it 容器ID bash

/var/lib/mysqlディレクトリにSQL ファイルがあるかどうかを確認します (例ではあります)

3. MySQL にログインします。

パスワードは docker-compose.yml ファイルで構成されます

4. 対応するデータベースを使用して SQL ファイルをインポートします

use sg_blog;
source /var/lib/mysql/sg_blog.sql;

5.データベースを正常にインポートします

 8. Redis の構成

1. 対応するバージョンの Redis の構成ファイルを取得します。

docker によってプルされた Redis イメージには redis.conf ファイルがないためです。したがって、公式 Web サイトで対応するバージョンの redis.conf 構成ファイルを見つける必要があります。

Redis 設定ファイル 公式ウェブサイトRedis設定 | Redis

私の Redis バージョンは 6.0.8 なので、6.0 の構成ファイルを選択します。

2./app/redisディレクトリを入力します

vim コマンドを使用して vim エディターに入り、redis 構成ファイルの内容をそこに貼り付けます。

vimモードで :set paste貼り付けたテキストデータは乱雑になりません

3. 設定ファイルの内容を変更する

• Redis パスワードを追加 (パスが必要)

• バインドを 0.0.0.0 に変更します (どのマシンでもアクセス可能)

• docker の -d パラメータとの競合を避けるために、バックグラウンド起動を no (デーモン化 no) に設定します。

• 保護モードをオフにする (保護モード no)

 

 9. バックエンドインターフェイスをテストする

 テストOK

10. Nginxの設定

10.1 distフォルダの操作

        1. パッケージ化された 2 つの dist フォルダーの名前を変更し、/app/nginx/htmlディレクトリに送信します。

2. nginx.conf 構成ファイルを変更する

conf フォルダーに入り、nginx.conf ファイルを開きます。

http{.......}2 つを追加する場合はserver
、ルート パスがコンテナ内の dist ファイル パスであることに注意してください。

   server {
        listen       80;
        server_name  localhost;

        #charset koi8-r;
        #
        #       #access_log  logs/host.access.log  main;

              location / {
                     root   /usr/share/nginx/html/blog_dist;
                     index  index.html index.htm;
                     try_files $uri $uri/ /index.html;
                   }

        }

    server {
        listen       81;
        server_name  localhost;

        #charset koi8-r;
        #
        #       #access_log  logs/host.access.log  main;

              location / {
                     root   /usr/share/nginx/html/admin_dist;
                     index  index.html index.htm;
                     try_files $uri $uri/ /index.html;
                   }

        }

10. プロジェクトのテスト

監視80をしていたため、設定した監視80が反映されなかったのかもしれません。最終的にはhtml直下に置きましたが、原因がわかったら変更します。

対応するIPとポートにアクセスし、プロジェクトに問題がないか確認します。

フロント

 バックステージ