Java フロントエンド分離プロジェクトの展開

1. ウィンドウ環境の展開

フロントエンドの導入

1. まずプロジェクトをパッケージ化します。

npm ビルドを実行します。

2.nginxの設定

Vue プロジェクトのエントリポイントはindex.html であり、nginx ルートはこのファイルを通過する必要があるため、nginx.conf ファイルを設定する必要があります。

localhost を見つけて、最後に try_files $uri $uri/ /index.html というコード行を追加します。

location / {
   root   html;
   try_files $uri $uri/ /index.html last;
   index  index.html index.htm;
}

3.nginxを再起動します

nginx.exe -s 再起動

バックエンドの展開

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

mvn clean package -Dmaven.test.skip=true

2. プロジェクトを開始するだけです

java -jar vueblog-0.0.1-SNAPSHOT.jar --spring.profiles.active=default

2. Linux環境の導入

1. 本番環境でバックエンドプロジェクトの yml を設定する

spring:
  datasource:
    type: com.alibaba.druid.pool.DruidDataSource
    driver-class-name: com.mysql.cj.jdbc.Driver
    url: jdbc:mysql://mysql:3306/simple_blog?&useSSL=false&serverTimezone=UTC&allowPublicKeyRetrieval=true
    username: root
    password: 123456

mybatis-plus:
  mapper-locations: classpath:/mapper/*.xml
#  configuration:
#    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl

shiro-redis:
  enabled: true
  redis-manager:
    host: redis:6379

mysql、redis、およびバックエンドプロジェクトは同じネットワーク下に配置されているため、指定された IP アドレスの代わりに配置の名前を使用できます。

2.バックエンドプロジェクトをパッケージ化する

mvn clean package -Dmaven.test.skip=true

3. バックエンドイメージを構築するための Dockerfile を作成する

FROM java:8
EXPOSE 8081
ADD simpleBlog-0.0.1-SNAPSHOT.jar app.jar
RUN bash -c 'touch /app.jar'
ENTRYPOINT ["java", "-jar", "app.jar", "--spring.profiles.active=pro"]

注: プロジェクト内のサードパーティサービスが他のサービスにデプロイされている場合は、バックエンドプロジェクトで指定されたアドレスを構成するだけでよく、残りの手順はすべてのサービスがサーバー上の同じ Linux

4. docker-compose.yml を作成します。

version: "3"
services:
  nginx: 
    image: nginx:latest  
    ports:
    - 80:80  
    volumes: 
    - ./nginx/html:/usr/share/nginx/html
    - ./nginx/nginx.conf:/etc/nginx/nginx.conf
    privileged: true 
    image: mysql:8.0.29-oracle
    ports:
    - 3306:3306
    volumes:
      - ./mysql/data:/var/lib/mysql
      - ./mysql/config/my.cnf:/etc/my.cnf
    environment: 
      - MYSQL_ROOT_PASSWORD=123456
  redis:
    image: redis:latest
  vueblog:
    image: vueblog:latest
    build: . 
    ports:
    - 8081:8081

mysql と nginx はどちらもデータボリュームを使用してホストマシンの外部にマウントします。そうしないと、コンテナーが起動されるたびに最後のデータと構成されたフロントエンドプロジェクトが失われます。

nginx: まずホストに html フォルダーを作成し、次に html フォルダー内のフロントエンドプロジェクトによってパッケージ化された dist フォルダー内のすべてのファイルを配置して、nginx.conf を変更します。

mysql: まず data フォルダーと config フォルダーを作成し、次に config フォルダーに my.cnf ファイルを作成します。

nginx.conf

#user  root;
worker_processes  1;
events {
  worker_connections  1024;
}
http {
  include       mime.types;
  default_type  application/octet-stream;
  sendfile        on;
  keepalive_timeout  65;
  server {
      listen       80;
      server_name  localhost;
      location / {
          root   /usr/share/nginx/html;
          try_files $uri $uri/ /index.html last; 
          index  index.html index.htm;
      }
      error_page   500 502 503 504  /50x.html;
      location = /50x.html {
          root   html;
      }
  }
}

my.cnf

[mysqld]
user=mysql
default-storage-engine=INNODB
character-set-server=utf8
[client]
default-character-set=utf8
[mysql]
default-character-set=utf8

5. 準備したファイルを同じディレクトリにアップロードします

ここに画像の説明を挿入

6. コマンドを実行してプロジェクトを配置すると、下図の内容が表示されます。

docker-compose up -d