title: Docker 部署 spring boot + Vue 项目实战
date: -5-23
updated: -5-23
tags:
LinuxDockerdocker-composeVue
categories:DockerDocker 部署 spring + Vue 项目实战
一、整体架构
二、 打包项目
2.1 打包 Vue 项目
在 Vue 项目路径运行npm run build命令即可打包，打包完成后在项目路径会出现一个名为dist的文件夹，该文件夹就是打包好的 Vue 项目。
2.2 打包 spring boot 项目
在 Vue 项目路径运行mvn package命令即可打包，打包完成后在项目路径/target会出现一个名为***.jar的文件，该文件夹就是打包好的 spring boot项目。
三、编写 Dockerfile
目的是创建一个含有这运行着 spring boot 项目的自定义镜像。
在/root/admin-vue/spring_dockerfile路径下创建Dockerfile，并将刚才达成jar包的 spring boot 项目上传到当前该目录。
编写Dockerfile：
FROM openjdk:8-jdk # 使用 jdk8 的镜像EXPOSE 8080 # 暴露 8080 端口方便后面映射到宿主机上面的端口WORKDIR /java/app # 设置工作路径 COPY ./vueadmin-java-0.0.1-SNAPSHOT.jar vueadmin.jar # 将当前路径下（相对于 Dockerfile 而言）的vueadmin-java-0.0.1-SNAPSHOT.jar 拷贝到工作路径并重新命名为 vueadmin.jarCMD ["java","-jar","vueadmin.jar"] # 运行该项目FROM openjdk:8-jdkEXPOSE 8080WORKDIR /java/appCOPY ./vueadmin-java-0.0.1-SNAPSHOT.jar vueadmin.jarCMD ["java","-jar","vueadmin.jar"]
四、编写 docker-compose.yml
通过 Compose 来编排 nginx、redis、mysql、spring boot 这些服务。
在/root/admin-vue路径下创建docker-compose.yml文件。
version: "3.7"services:admin-vue-springboot:build: # 通过Docker 构建镜像和容器context: ./spring_dockerfiledockerfile: Dockerfilecontainer_name: admin-vue-springbootports:- "8081:8080"depends_on:- mysql- redis- nginxnetworks:- adimn_vuemysql:image: mysql:5.5.62container_name: mysqlports:- "3306:3306"environment:- MYSQL_ROOT_PASSWORD=root # 设置 MySQL 密码volumes:- mysql_datadir:/var/lib/mysql # 映射 mysql 存储数据的目录networks:- adimn_vueredis:image: redis:5.0.10container_name: redisports:- "6380:6379"command: "redis-server /usr/local/etc/redis/redis.conf --appendonly yes" # 开启持久化和加载自定义配置文件volumes:- redis_data:/data # redis 持久化目录- redis_conf:/usr/local/etc/redis # redis 配置文件目录networks:- adimn_vue# nginx 服务nginx:image: nginxcontainer_name: nginxports:- "8080:80"volumes:- nginx_content:/usr/share/nginx/html # 映射静态资源目录- nginx_conf:/etc/nginx # 映射配置文件目录networks:- adimn_vue#声明 数据卷volumes:mysql_datadir:nginx_content:nginx_conf:redis_data:redis_conf:# 声明网桥networks:adimn_vue:
编写完成后再docker-compose.yml同级目录下运行docker-compose up -d --build命令（如果自定义的镜像不存在需要加上--build来构建自定义镜像），即可创建各服务。
运行成功后 docker 会在宿主机的/var/lib/docker/volumes目录下自动创建docker-compose中映射的数据卷。
五、部署 Vue
5.1 添加 Vue 项目到 nginx
将我们打包好的 Vue 项目上传到/var/lib/docker/volumes/admin-vue_nginx_content/_data/目录下。
5.2 编辑 nginx 配置文件
编辑/var/lib/docker/volumes/admin-vue_nginx_conf/_data/conf.d/路径下名为default.conf的配置文件。
server {listen 80;listen [::]:80;server_name localhost;# 方式一location / {try_files $uri $uri/ @router; #需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404root /usr/share/nginx/html/dist; # 静态资源路径index index.html index.htm;}#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件#因此需要rewrite到index.html中，然后交给路由在处理请求资源location @router {rewrite ^.*$ /index.html last;}# 方式一# 方式二location / {root /usr/share/nginx/html/mkhb/dist;try_files $uri $uri/ /index.html;index index.html index.htm;}# 方式二 location /prod-api/{proxy_set_header Host $http_host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://ip:8080/;}}
解决 nginx 部署 Vue 项目出现 404 问题。参考博客：/qingmuchuanqi48/p/11831389.html?ivk_sa=1024320u
六、配置 Redis
由于 Redis 不自带配置文件需要我们自己去下载对应版本的redis.conf配置文件。
下载完毕后需要设置配置文件中bind 0.0.0.0，开放所有 ip 连接。
设置完毕后将redis.conf配置文件上传至/var/lib/docker/volumes/admin-vue_nginx_conf/_data/conf.d/后重启 redis 服务即可。
七、测试
八、解决 VUE 项目打包上线因 chunk.js 文件过大导致页面加载缓慢解决方案
8.1 安装 compression-webpack-plugin 插件
npm install --save-dev compression-webpack-plugin@5.0.0
此处需要添加版本号，不然默认会安装最新版而报错：
Cannot read property ‘tapPromise‘ of undefined。参考博客
8.2 修改 vue.config.js 文件
添加 configureWebpack 配置使其可以对 js 文件进行压缩。
const path = require('path');const webpack = require('webpack')const CompressionWebpackPlugin = require('compression-webpack-plugin')const productionGzipExtensions = ['js', 'css']const isProduction = process.env.NODE_ENV === 'production'module.exports = {devServer: {disableHostCheck: true},configureWebpack: {resolve: {alias: {'@': path.resolve(__dirname, './src'),'@i': path.resolve(__dirname, './src/assets'),}},plugins: [new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),// 下面是下载的插件的配置new CompressionWebpackPlugin({algorithm: 'gzip',test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),threshold: 10240,minRatio: 0.8}),new webpack.optimize.LimitChunkCountPlugin({maxChunks: 5,minChunkSize: 100})]}}
打包后的文件大小对比
8.3 修改 nginx 配置文件
修改配置文件，开启 nginx 对 js 文件的压缩。
server{```gzip on;gzip_min_length 1k;gzip_comp_level 9;gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;gzip_vary on;gzip_disable "MSIE [1-6]\.";```}
注意这里
application/x-javascript application/javascript顺序不能颠倒，否则 nginx 的 gzip 压缩 js 无效。参考博客
