一、项目背景

        该项目是几年前的一个项目，项目初始以为是个很简单的产品，没有使用前后端分离进行开发（当时的公司技术栈也不是分离架构），项目使用的是 thymeleaf 作为模板引擎。

        随着业务的发展，该项目的功能一直在迭代，中间有机会进行架构升级，但是因为各种原因导致升级架构搁置。目前项目中的静态文件资源已经达到300M，这样就导致每一次启动项目开发，打包构建，生成镜像，以及项目启动加载的时间很长。

二、优化前

1、项目静态资源目录

        

2、打包构建时间和生成镜像时间如图：

        

        镜像大小：

        

          如上图可知：每一次项目进行部署，打包，生成镜像，推送，集群拉取镜像，启动。整个流程跑下来，每次都需要15分钟以上。耗费大量时间。

        开发人员在本地开发，只要进行重新编译，每次也需要耗费大量时间。

        

三、优化后

1、项目静态资源目录

         

   2、本地开发项目配置

  配置项目启动加载静态文件夹，开发使用；

@Configuration
@Profile("dev")
public class LocalFilePathConfig {

	/**
	 * 上传文件存储在本地的根路径
	 */
	private String localFilePath = "/static";

	@Bean
	public WebMvcConfigurer webMvcConfigurerAdapter() {
		return new WebMvcConfigurer() {

			/**
			 * 外部文件访问<br>
			 */
			@Override
			public void addResourceHandlers(ResourceHandlerRegistry registry) {
				registry.addResourceHandler(  localFilePath + "/**")
						.addResourceLocations(ResourceUtils.FILE_URL_PREFIX + "./statics" + File.separator);
			}

		};
	}

注意：有权限框架的需要把 /static/** 设置为无权限访问；

3、页面JS、CSS等资源路径修改（idea工具，全局查找替换即可）

原有配置：
<link href="/css/**.css" type="text/css"/>
<script src="/js/**.js"></script>

更改后：
<link href="/static/css/**.css" type="text/css"/>
<script src="/static/js/**.js"></script>

 4.容器化部署架构：

        nginx + 项目 两个服务启动，由nginx进行反向代理到项目

nginx 配置：

user  root;
worker_processes  auto;

events {
    worker_connections  1024;
}

http {
    include /etc/nginx/mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;
    client_body_buffer_size 128k;

    server {
        listen      80;  
        server_name localhost;
		location /static/ {
			alias /usr/share/nginx/html/static/;
		}
        #集群内部访问方式
		location / {
			proxy_pass http://服务名.命名空间:端口;    
		}  
	}
}

5.优化后部署时间

        

        1）只部署项目（在不增加静态文件时，仅部署项目即可）

        2）项目和静态文件同部署

写在最后：动静分离后，访问系统能明显感受到响应速度变快。这里我没有进行测试响应时间了。有想法的同学可以，自行探索测试，进行比较。