最近做了一个小项目。很简单的几个页面。
用的框架是若依前后端分离的,但是不想部署的时候还要前后端分开部署,要搭nginx等。
1.首先前端运行 npm run build 打成dist包(具体的打包命令,看package.json文件中定义的语句)
2.找到后端项目的resource 目录,我整个项目的jar包是生成在admin模块下,此处可能不存在static文件夹,直接创建以一个,然后将dist里面的文件复制到static下(是里面,不包括dist)
3.直接点击右侧的package 打包后端项目,我的项目在pom文件中配置的是打成jar包
4.打包完成后,就会多出来一个target目录,这里面就是打包完成的后端项目。
5.打开jar包看看文件是否打包进去,可以看到之前的前端文件已经加进去了,
目录在BOOT-INF\classes\static下6.这时候,不需要再部署前端项目,运行启动后端的jar包,就可以访问整个项目了。
(使用:nohup java -jar jar包名 >>test.log&
就能让jar包在服务器上不挂断后台运行,输出的日志到test.log里)
我本地的后端项目使用的是8088端口,我的前端访问路径就是:后端路径+index.html
如:http://localhost:8088/index.html
访问成功了!(地址不是index.html是因为前端重定向到了登录页)
可以登录进系统了。
这种方式部署,还有不少的问题,我图片还有部分图标路径都有问题,还需要调整,总的来说前后端分离的项目,老老实实使用nginx分离部署比较好。
图标,图片的问题,如果后端做了拦截,需要配置放行,例如element-ui 的图标,系统的图标,首页的图片等。如图,两个后缀为.woff 和.ttf的文件就是打包生成的el图标文件,需要配置放行。
在WebSecurityConfigurerAdapter的子类实现中,将这些文件放行。
代码如下,根据自己需求配置:
@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
// 注解标记允许匿名访问的url
ExpressionUrlAuthorizationConfigurer<HttpSecurity>.ExpressionInterceptUrlRegistry registry = httpSecurity.authorizeRequests();
permitAllUrl.getUrls().forEach(url -> registry.antMatchers(url).permitAll());
httpSecurity
// CSRF禁用,因为不使用session
.csrf().disable()
// 认证失败处理类
.exceptionHandling().authenticationEntryPoint(unauthorizedHandler).and()
// 基于token,所以不需要session
.sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS).and()
// 过滤请求
.authorizeRequests()
// 对于登录login 注册register 验证码captchaImage 允许匿名访问
.antMatchers("/login", "/register", "/captchaImage").anonymous()
// 静态资源,可匿名访问
.antMatchers(HttpMethod.GET, "/", "/*.html", "/**/*.html", "/**/*.css", "/**/*.js","/**/*.png","/**/*.jpg","/**/*.ttf","/**/*.woff").permitAll()
.antMatchers(sysConfig.getUrls()).permitAll()
.antMatchers("/swagger-ui.html", "/swagger-resources/**", "/webjars/**", "/*/api-docs", "/druid/**").permitAll()
.antMatchers("/websocket/**").permitAll()
// 除上面外的所有请求全部需要鉴权认证
.anyRequest().authenticated()
.and()
.headers().frameOptions().disable();
// 添加Logout filter
httpSecurity.logout().logoutUrl("/logout").logoutSuccessHandler(logoutSuccessHandler);
// 添加JWT filter
httpSecurity.addFilterBefore(authenticationTokenFilter, UsernamePasswordAuthenticationFilter.class);
// 添加CORS filter
httpSecurity.addFilterBefore(corsFilter, JwtAuthenticationTokenFilter.class);
httpSecurity.addFilterBefore(corsFilter, LogoutFilter.class);
}
这样的话前端的图标以及图片就可以正常访问了。
前端的静态文件放置位置,public下不会参与压缩,assets下会被压缩。如图bgimg.png打包后名称会变。但是引用的路径打包后也会跟着变化,所以放在两个文件夹下都可以。
前端的路由还要配置为hash模式,否则的话刷新会报错。
如果放在其他路径,打包后很容易产生错误,文件名称被压缩后访问不到,路径不对等问题,还是建议统一放在静态资源文件夹下。