页面静态化的应用
什么是页面静态化
课程预览功能通过模板引擎技术在页面模板中填充数据，生成html页面，这个过程是当客户端请求服务器时服务器才开始渲染生成html页面，最后响应给浏览器，服务端渲染的并发能力是有限的。
页面静态化则强调将生成html页面的过程提前，提前使用模板引擎技术生成html页面，当客户端请求时直接请求html页面，由于是静态页面可以使用nginx、apache等高性能的web服务器，并发性能高。
什么时候用页面静态化技术
当数据变化不频繁，一旦生成静态页面很长一段时间内很少变化，此时可以使用页面静态化。因为如果数据变化频繁，一旦改变就需要重新生成静态页面，导致维护静态页面的工作量很大。
根据课程发布的业务需求，虽然课程发布后仍可以修改课程信息，但需要经过课程审核，且修改频度不大，所以适合使用页面静态化。
项目使用静态化技术的整体说明。
我们使用代码将页面进行静态化之后存储在minio然后我们访问指定域名就能够访问到我们minio中的静态页面
Nginx中的conf文件设置
#访问minio文件系统的网址
upstream fileserver{
server 192.168.101.65:9000 weight=10;
}server {
listen 80;
server_name file.51xuecheng.cn;
#charset koi8-r;
ssi on;
ssi_silent_errors on;
#access_log logs/host.access.log main;
location /video {
proxy_pass http://fileserver;
}location /mediafiles {
proxy_pass http://fileserver;
}
}
这样我们可以直接访问 http://192.168.101.65:9000/mediafiles/course/test.html或者我们可以访问域名file.51xuecheng.cn/mediafiles/course/test.html这样Nginx就会自动代理到我们要访问的文件了。
页面静态化测试代码
@SpringBootTest(classes = XuechengPlusContentServiceApplication.class)
public class FreemarkerTest {
@Autowired
CoursePublishService coursePublishService;
//测试页面静态化
@Test
public void testGenerateHtmlByTemplate() throws IOException, TemplateException {
//配置freemarker
Configuration configuration = new Configuration(Configuration.getVersion());
//加载模板
//选指定模板路径,classpath下templates下
//得到classpath路径
String classpath = this.getClass().getResource("/").getPath();
configuration.setDirectoryForTemplateLoading(new File(classpath + "/templates/"));
//设置字符编码
configuration.setDefaultEncoding("utf-8");
//指定模板文件名称
Template template = configuration.getTemplate("course_template.ftl");
//准备数据
CoursePreviewDto coursePreviewInfo = coursePublishService.getCoursePreviewInfo(2L);
Map map = new HashMap<>();
map.put("model", coursePreviewInfo);
//静态化
//参数1：模板，参数2：数据模型
String content = FreeMarkerTemplateUtils.processTemplateIntoString(template, map);
System.out.println(content);
//将静态化内容输出到文件中
InputStream inputStream = IOUtils.toInputStream(content);
//输出流
FileOutputStream outputStream = new FileOutputStream("D:\\upload\\test.html");
IOUtils.copy(inputStream, outputStream);
}
}
将本地生成的静态页面上传到minio
我们现在是在一个content微服务中，我们需要调用media微服务，并且这两个微服务互相是独立的，（注意我们content内部的api service model微服务具有相互依赖关系这样我们的就可以直接使用里面的东西）独立的微服务之间相互访问要使用feign进行，下面对feign进行配置。
发送请求的接口类
@FeignClient(value = "media-api",configuration = MultipartSupportConfig.class)
public interface MediaServiceClient {
@RequestMapping(value = "/media/upload/coursefile",consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
String uploadFile(@RequestPart("filedata") MultipartFile upload,@RequestParam(value = "objectName",required=false) String objectName);
}
启动类使用注解
@EnableFeignClients(basePackages={"com.xuecheng.content.feignclient"})
feignClient调用
@SpringBootTest(classes = XuechengPlusContentServiceApplication.class)
public class FeignUploadTest {
@Autowired
MediaServiceClient mediaServiceClient;
//远程调用，上传文件
@Test
public void test() {
MultipartFile multipartFile = MultipartSupportConfig.getMultipartFile(new File("D:\\upload\\test.html"));
mediaServiceClient.uploadFile(multipartFile,"course/test.html");
}
}
最终上传完文件，之后就直接访问之前的域名即可访问我们minio中存储的静态页面。
注意：
feign本身是不支持文件格式的传递参数，要使用要进行配置
坐标
com.alibaba.cloud
spring-cloud-starter-alibaba-nacos-discovery
org.springframework.cloud
spring-cloud-starter-openfeign
io.github.openfeign
feign-httpclient
io.github.openfeign.form
feign-form
3.8.0
io.github.openfeign.form
feign-form-spring
3.8.0
配置
feign:
hystrix:
enabled: true
circuitbreaker:
enabled: true
hystrix:
command:
default:
execution:
isolation:
thread:
timeoutInMilliseconds: 30000 #熔断超时时间
ribbon:
ConnectTimeout: 60000 #连接超时时间
ReadTimeout: 60000 #读超时时间
MaxAutoRetries: 0 #重试次数
MaxAutoRetriesNextServer: 1 #切换实例的重试次数
配置feign支持Multipart 在config包下面类
package com.xuecheng.content.config;
import feign.codec.Encoder;
import feign.form.spring.SpringFormEncoder;
import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.io.IOUtils;
import org.springframework.beans.factory.ObjectFactory;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.autoconfigure.http.HttpMessageConverters;
import org.springframework.cloud.openfeign.support.SpringEncoder;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.context.annotation.Primary;
import org.springframework.context.annotation.Scope;
import org.springframework.http.MediaType;
import org.springframework.web.multipart.MultipartFile;
import org.springframework.web.multipart.commons.CommonsMultipartFile;
import java.io.File;
import java.io.FileInputStream;
import java.io.OutputStream;
/**
* @author Mr.M
* @version 1.0
* @description TODO
* @date 2022/10/15 22:13
*/
@Configuration
public class MultipartSupportConfig {
@Autowired
private ObjectFactory messageConverters;
@Bean
@Primary//注入相同类型的bean时优先使用
@Scope("prototype")
public Encoder feignEncoder() {
return new SpringFormEncoder(new SpringEncoder(messageConverters));
}
//将file转为Multipart
public static MultipartFile getMultipartFile(File file) {
FileItem item = new DiskFileItemFactory().createItem("file", MediaType.MULTIPART_FORM_DATA_VALUE, true, file.getName());
try (FileInputStream inputStream = new FileInputStream(file);
OutputStream outputStream = item.getOutputStream();) {
IOUtils.copy(inputStream, outputStream);
} catch (Exception e) {
e.printStackTrace();
}
return new CommonsMultipartFile(item);
}
}
注意：
直接访问 http://192.168.101.65:9000/mediafiles/course/test.html或者我们可以访问域名file.51xuecheng.cn/mediafiles/course/test.html这样Nginx就会自动代理到我们要访问的文件了。
但是大家看我上面的Nginx配置，我们的域名下的虚拟主机并没有访问我们静态样式文件的接口，这些接口都在我们www.51xuecheng.cn这个域名下面，因此要通过这个域名访问我们的minio中的文件，在这个域名下加上 就会代理到我们的minio
location /course/ {
proxy_pass http://fileserver/mediafiles/course/;
}
整体Nginx配置如下·
#user nobody;
worker_processes 1;#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;#pid logs/nginx.pid;
events {
worker_connections 1024;
}
http {
include 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 logs/access.log main;
sendfile on;
#tcp_nopush on;#keepalive_timeout 0;
keepalive_timeout 65;#gzip on;
#访问minio文件系统的网址
upstream fileserver{
server 192.168.101.65:9000 weight=10;
}
#后台网关
upstream gatewayserver{
server 127.0.0.1:63010 weight=10;
}
server {
listen 80;
server_name www.51xuecheng.cn localhost;
#rewrite ^(.*) https://$server_name$1 permanent;
#charset koi8-r;
ssi on;
ssi_silent_errors on;
#access_log logs/host.access.log main;location / {
alias E:/code/xc-ui-pc-static-portal/;
index index.html index.htm;
}
#静态资源
location /static/img/ {
alias E:/code/xc-ui-pc-static-portal/img/;
}
location /static/css/ {
alias E:/code/xc-ui-pc-static-portal/css/;
}
location /static/js/ {
alias E:/code/xc-ui-pc-static-portal/js/;
}
location /static/plugins/ {
alias E:/code/xc-ui-pc-static-portal/plugins/;
add_header Access-Control-Allow-Origin http://ucenter.51xuecheng.cn;
add_header Access-Control-Allow-Credentials true;
add_header Access-Control-Allow-Methods GET;
}
location /plugins/ {
alias E:/code/xc-ui-pc-static-portal/plugins/;
}
location /course/preview/learning.html {
alias E:/code/xc-ui-pc-static-portal/course/learning.html;
}
location /course/search.html {
root E:/code/xc-ui-pc-static-portal;
}
location /course/learning.html {
root E:/code/xc-ui-pc-static-portal;
}
#api
location /api/ {
proxy_pass http://gatewayserver/;
}
#openapi 这里不走网关
location /open/content/ {
proxy_pass http://gatewayserver/content/open/;
}
location /open/media/ {
proxy_pass http://gatewayserver/media/open/;
}
location /course/ {
proxy_pass http://fileserver/mediafiles/course/;
}#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
server {
listen 80;
server_name file.51xuecheng.cn;
#charset koi8-r;
ssi on;
ssi_silent_errors on;
#access_log logs/host.access.log main;
location /video {
proxy_pass http://fileserver;
}location /mediafiles {
proxy_pass http://fileserver;
}
}
# another virtual host using mix of IP-, name-, and port-based configuration
#
#server {
# listen 8000;
# listen somename:8080;
# server_name somename alias another.alias;# location / {
# root html;
# index index.html index.htm;
# }
#}
# HTTPS server
#
#server {
# listen 443 ssl;
# server_name localhost;# ssl_certificate cert.pem;
# ssl_certificate_key cert.key;# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;# location / {
# root html;
# index index.html index.htm;
# }
#}}
之后我们访问www.51xuecheng.cn/course/test.html