nginx has two main features: 1). it can work as a static web server(has much better performance than Tomcat) 2). nginx work as a reverse proxy(反向代理) server. 2.1 solve ajax cross origin problems 2.2 set up tomcat load leveling/load balancing 1. install nginx 1). install pre dependecies: yum install -y gcc-c++ yum install -y pcre-devel yum install -y zlib-devel yum install -y openssl-devel 2). unzip nginx, and go inside nginx folder, and run: ./configure make make install 3). nginx takes port 80, open 80 port on firewall firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --reload 4). check browser, http://ip 2. setup nginx to work as a static web server 2.1) edit nginx/conf/nginx.conf ``` location / { root html; index index.html index.htm; } ``` 2.2). configure gzip conf/nginx.conf ``` # GZIP 配置 gzip on; gzip_min_length 1k; gzip_buffers 4 16k; gzip_http_version 1.0; gzip_comp_level 2; gzip_types text/plain application/javascript text/css application/xml application/x-javascript text/javascript ; gzip_vary on; ``` webpack配置 ``` //vue.config.js const CompressionPlugin = require("compression-webpack-plugin") module.exports = {     devServer: {//代理配置         port: 8888,     // 端口         proxy: {             '/api': {                 target: 'https://sm.ms/api',                 changeOrigin: true,                 ws: true,                 pathRewrite: {                     '^/api': ''                 }             }         }     },     configureWebpack: () => {//打包配置         if (process.env.NODE\_ENV === 'production') {             return {                 plugins: \[                     new CompressionPlugin({                         test: /\\.js$|\\.html$|.\\css/, //匹配文件名                         threshold: 10240,//对超过10k的数据压缩                         deleteOriginalAssets: false //不删除源文件                     })                 \]             }         }     }, }; ``` 2.3) configure https ``` server { listen 80; server_name pipe.ccm.ink;#自己的域名 return 301 https://$host;     } server {# 开启https listen 443 ssl; server_name pipe.ccm.ink; charset utf-8; ssl_certificate xxxx.pem;# 换为自己的证书 ssl_certificate_key xxxxx.key;# 换为自己的证书 ssl_session_timeout 5m; ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4; ssl_protocols TLSv1 TLSv1.1 TLSv1.2; ssl_prefer_server_ciphers on; error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } 作者：chen622 链接：https://pipe.ccm.ink/blogs/chen622/https://www.runoob.com/linux/nginx-install-setup.html 来源：Pipe 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 ``` 3. configure nginx to allow cross orgin access front-end, it is running on port 80 back-end, it is running on port 8080 because they are running on different port, when front-end sends request to back-end, this is called cross orgin access. we have two solutions to solve this problem: 1) [recommend]on backend, allow this cross orgin access. configure for one controller ``` @CrossOrgin @RestController @RequestMapping("/test") public class TestController { } ``` configure for all controllers ``` package com.example.demo.config; import static org.springframework.web.cors.CorsConfiguration.ALL; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.ComponentScan; import org.springframework.context.annotation.Configuration; import org.springframework.http.HttpHeaders; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration @ComponentScan(basePackages={"com.example.demo"}) public class SpringConfig { //增加跨域权限配置 @Bean public WebMvcConfigurer corsConfigurer() { return new WebMvcConfigurerAdapter() { @Override public void addCorsMappings(CorsRegistry registry) { // 限制了路径和域名的访问 /*registry.addMapping("/api*").allowedOrigins("http://localhost:8081");*/ //设置允许跨域的路径 registry.addMapping("/**") //设置允许跨域请求的域名 // .allowedOrigins(ALL) //设置允许跨域请求的域名,如果想要传递cookie,就不能再用* .allowedOrigins("http://localhost:9527") //是否允许证书 不再默认开启 .allowCredentials(true) //设置允许的方法 .allowedMethods(ALL) //设置允许的header .allowedHeaders(ALL) //.exposedHeaders(HttpHeaders.SET_COOKIE, "token") //跨域允许时间 .maxAge(3600); registry.addMapping("/**") //设置允许跨域请求的域名 // .allowedOrigins(ALL) //设置允许跨域请求的域名,如果想要传递cookie,就不能再用* .allowedOrigins("http://localhost:8081") //是否允许证书 不再默认开启 .allowCredentials(true) //设置允许的方法 .allowedMethods(ALL) //设置允许的header .allowedHeaders(ALL) //.exposedHeaders(HttpHeaders.SET_COOKIE, "token") //跨域允许时间 .maxAge(3600); } }; } } ``` 2) on frontend, set proxy to forward the request to backend. on conf/nginx.conf ``` location /test/ { proxy_pass http://localhost:8080/test/; } ``` front-end code ``` axios.post('/test/emps',{ empno:that.empno, ename:that.ename, job:that.job }) ``` back-end code ``` @RestController @RequestMapping("/test") public class TestController { @Autowired private TestService testService; @RequestMapping("/emps") public List<Emp> getEmps(@RequestBody Emp condition) { return testService.getEmps(condition); } } ``` 4. configure nginx to handle load leveling 4.1 preparation: prepare two applications: 1. one is deployed on the linux server 2. the other is deployed on the windows server ``` #config load leveling/load balancing upstream tomcat_server { server localhost:8080; server 10.25.37.2:8080; } server { listen 80; server_name localhost; #config static web resource location / { root static; index html/index.html html/index.htm; } #config cross orgin proxy location /test/ { proxy_pass http://tomcat_server/test/; #must add this, otherwise, there is be 400 error proxy_set_header Host $host; #used to display responded server ip add_header backendIP $upstream_addr; add_header backendCode $upstream_status; } ```