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; } ```