分離のVue + SpringBootのドッキングウィンドウ・コン事業展開のフロントエンド

I.はじめに

この記事ではしますdocker-composenginxのに、実行中のバックエンドとフロントエンドのVue SpringBootプロジェクトは、プロジェクトを展開します

基本的なサーバー環境：

1. CentOS7.3
2. Dokcer
3. MySQLの

二、分離のVue + SpringBootのドッキングウィンドウ・コン事業展開のフロントエンド

ここでは、プロジェクト全体のコンフィギュレーション構造は、元のプロジェクトの構造に影響を与えませんので、すべての設定ファイルがドッキングウィンドウ提案したフォルダに保存されているが、そのノートされていることdocker-compose、ファイルがプロジェクト全体ああのルートに配置する必要があります！

1、新しいバックエンドの設定ファイルが必要api-Dockerfile

# 指定基础镜像
FROM maven:3.5.4-jdk-8
# 维护者信息
MAINTAINER zhengqing "[email protected]"

RUN echo "-------------------- api环境配置 --------------------"

# 暴露9101端口
EXPOSE 9101
# 设置环境编码UTF-8
ENV LANG C.UTF-8
# 运行 - 配置容器，使其可执行化
#ENTRYPOINT ["java", "-jar", "app.jar","--spring.profiles.active=dev"]

2、新しいコンフィギュレーション・ファイルのフロントエンドは、Vueのが必要web-Dockerfile、nginx.conf、.dockerignore

web-Dockerfile ：、依存関係をインストールしたファイルにアクセスするために必要なリソースを生成するために、パッケージを実行し、実行しているnginxの下のhtmlディレクトリに保存されています

# node镜像
FROM node:latest as build-stage
# 维护者信息
MAINTAINER zhengqing "[email protected]"

RUN echo "-------------------- web环境配置 --------------------"

# 指定接下来的工作路径为/app  - 类似于cd命令
WORKDIR /app
# 拷贝前端项目到app目录下
COPY ./code-web .

# 设置淘宝npm镜像
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安装依赖
RUN cnpm install

# 打包 - 目的：丢到nginx下跑
RUN cnpm run build:prod

# 前端项目运行命令
#CMD ["npm","run","start"]


# ======================== 上：npm打包  下：nginx运行 ========================
# nginx镜像
FROM nginx:1.15.3-alpine as production-stage
# 维护者信息
MAINTAINER zhengqing "[email protected]"

# 移除nginx容器的default.conf文件、nginx配置文件
RUN rm /etc/nginx/conf.d/default.conf
RUN rm /etc/nginx/nginx.conf
# 把主机的nginx.conf文件复制到nginx容器的/etc/nginx文件夹下
COPY ./docker/web/nginx.conf /etc/nginx/
# 拷贝前端vue项目打包后生成的文件到nginx下运行
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 暴露8101端口
EXPOSE 8101

# 注：CMD不同于RUN，CMD用于指定在容器启动时所要执行的命令，而RUN用于指定镜像构建时所要执行的命令。
#    RUN指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，可以在构建时指定--no-cache参数，如：docker build --no-cache

# 使用daemon off的方式将nginx运行在前台保证镜像不至于退出
CMD ["nginx", "-g", "daemon off;"]

nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;

    keepalive_timeout  65;

    # include /etc/nginx/conf.d/*.conf;

    server {
        listen       8101;
        charset utf-8;
        server_name  www.zhengqing520.com;# 服务器地址或绑定域名

        # start ---------------------------------------------------------------------------------------------

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

        # end ---------------------------------------------------------------------------------------------

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
   }
}

.dockerignore 役割：ドッカエンジンに渡されたときに不要なファイルやフォルダを無視します。

/code-web/node_modules

3、docker-compose.ymlアクション：プログラムを実行するドッキングウィンドウに関して実行のコンテナ配列順序は、より便利に実行します

version: '3'
services:
  api:                                  # 后端springboot容器
    container_name: xiao-xiao-su-api    # 容器名为'xiao-xiao-su-api'
    restart: always                     # 重启策略: 容器退出时总是重启容器
    build:
      context: ./                       # 指定设定上下文根目录，然后以该目录为准指定Dockerfile
      dockerfile: ./docker/api-Dockerfile
    working_dir: /app                   # 设置工作目录为容器内的app文件夹
    environment:
      TZ: Asia/Shanghai
    volumes:                            # 挂载文件
      - ./code-api:/app                 # 将主机的code-api文件夹(java代码)映射到容器内的app文件夹
      - ./logs/:/app/log                # 映射容器产生的日志到主机的logs文件夹
    ports:                              # 映射端口
      - "9101:9101"
    command: mvn clean spring-boot:run -Dspring-boot.run.profiles=dev '-Dmaven.test.skip=true' # 容器创建后执行命令运行springboot项目

  web:                                  # 前端node容器(运行nginx中的Vue项目)
    container_name: xiao-xiao-su-web    # 容器名为'xiao-xiao-su-web'
    restart: always                     # 重启策略: 容器退出时总是重启容器
    build:
      context: ./                       # 指定设定上下文根目录，然后以该目录为准指定Dockerfile
      dockerfile: docker/web/web-Dockerfile
    environment:
      TZ: Asia/Shanghai
    ports:
      - "8101:8101"                      # 映射端口
    depends_on:                          # 依赖于api容器，被依赖容器启动后此web容器才可启动
      - api

第三に、サーバーを実行

サーバー上でスローされた項目は、次のコマンドを実行するために、プロジェクトのルートを入力してください

# 1. 构建镜像
docker-compose build
# 2. 运行服务
docker-compose up -d

暖かいヒント：初めての建物では、ハーブティーのカップに座ることができ、非常に遅いああになります -

第四に、テストアクセス

フロントページ：http://www.zhengqing520.com:8101/xiao-xiao-su/dashboard

バックエンドインターフェース：http://www.zhengqing520.com:9101/swagger-ui.html#

V.の概要

1. 展開VUEプロジェクト：npm希望する項目依存性を引っ張っnode_modules-生成>パッケージdistフォルダ- >にコピーしnginx、実行
2. Springboot展開プロジェクト：小扁は、ここで実行することのmavenコマンドで、それも続けることができますmvn install -Dmaven.test.skip=true- > cd target- > java -jar ***.jarファイル名を指定して実行
3. docker-compose配置、実行順序について①②フロントエンドのWebバックエンドのAPIコンテナ船
4. 分散型サーバによってdocker-compose buildビルドイメージ- > docker-compose up -dスタートアプリケーションサービス

Dockerfileコマンドの理解、それをより興味深いビューを表示するには、オンラインここに掲載

ケースデモのソースコード

https://github.com/zhengqingya/xiao-xiao-su