Chapter 10: Detailed explanation of Nginx configuration

Table of contents

1. What is Nginx?

2. Download nginx

Three, Nginx configuration

4. Publish SPA project and virtual domain name settings

Five, Tomcat cluster configuration

Six, nginx dynamic and static separation

---

1. What is Nginx?

Proxy server --> Tomcat
HTML server

2. Download nginx

Download link: http://nginx.org/download/nginx-1.17.10.zip http://nginx.org/download/nginx-1.17.10.zip

Note 1: This version is the window version 
         linux version

Three, Nginx configuration

Unzip the software to a specified directory, for example: D:\tools\nginx-1.17.10

Open the cmd container, switch to the nginx installation root directory, and execute relevant commands to operate

start nginx.exe	//Start nginx
nginx.exe -s stop	//quick stop nginx
nginx.exe -s reload	//reload nginx
nginx.exe -s quit	//stop nginx completely

Note 1: nginx uses port 80 by default, which is the external port of most websites. Other ports of the website should be under the
protection . Because port 80 is occupied, just modify the nginx port
Note 3: How to modify the port number of nginx?
        Find the configuration file nginx_home/conf/nginx.conf
        server {           #listen 80; #Default port           listen 8088; #Custom port           . ..           ...         } Note 4: In the nginx.conf file, # is a comment, and the code must end with a ;

important~~~~~~~~important~~~~~~~~important~~~~~~~~

4. Publish SPA project and virtual domain name settings

 1. Package the SPA project, copy the packaged dist directory to D:\tools\nginx-1.17.10\html, and change the name to crm, and finally the root directory of the SPA project is D:\tools\nginx-1.17.10\
html \crm 

2. Modify the server node

server {
        listen       80;            #监听80端口，可以改成其他端口
        #server_name  localhost;    #当前服务的域名(虚拟域名也可以)
    server_name  www.zking.com; #当前服务的域名(虚拟域名也可以)
    root         html/crm;      #将要访问的网站的根目录，nginx节点会自动继承父节点的配置

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

    location / {
                #root         html/crm;    #将要访问的网站的根目录
            #该句代码是为解决history路由不能跳转的问题，在vue-router官网有介绍 
        try_files $uri $uri/  /index.html;
    }
}

Note 1: To access through a virtual domain name, you must also modify the hosts file of the window to add a virtual domain name mapping.

The location of the file is as follows:
           C:\Windows\System32\drivers\etc\hosts
           In addition, it is possible that this file cannot be modified due to insufficient permissions of the current user? Solution
           Copy this file to any directory of the d hard disk, after modification, copy and replace the original file in C:\Windows\System32\drivers\etc\hosts  

Five, Tomcat cluster configuration

upstream  tomcat_list{  #服务器集群名字
       server    127.0.0.1:8080  weight=1;   #服务器1   weight是权重的意思，权重越大，分配的概率越大。
       #server    172.17.0.4:8080  weight=2; #服务器2   weight是权重的意思，权重越大，分配的概率越大
   } 

Note 1: The upstream node is the son of the http node, and it is a brother relationship with the server node. Don't make a mistake

Six, nginx dynamic and static separation

 1. Modify the api/actions server of the spa project to modify it to the production stage, and add a /api prefix

export default {
	//服务器
	//'SERVER': 'http://localhost:8080/crm',//开发阶段
	'SERVER': 'http://www.zking.com/api/crm',//生产阶段改为服务器的域名,并添加/api前缀
       .....
} 

 2. The role of the prefix "/api"

location  ^~/api/ {
        #^~/api/表示匹配前缀是api的请求，proxy_pass的结尾有/， 则会把/api/*后面的路径直接拼接到后面，即移除api
	proxy_pass http://tomcat_list/;
}

 http://www.zking.com/api/crm/sys/userLogin.action?username=zs&password=123
 127.0.0.1:8080/crm/sys/userLogin.action?username=zs&password=123
 172.17.0.2:8080/crm/sys/userLogin.action?username=zs&password=123 

Appendix 1: hbuilderX packaging vue project white screen problem
In the index.js file in the config folder under the project directory, change the "/" in the assetsPublicPath under the build object to "./", and then package the generated dist file

build: {
    // assetsPublicPath: '/',//修改前
    assetsPublicPath: './',//修改后
}

Appendix 2: When hbuilderX packages vue projects, the icon icon of element-ui cannot be displayed normally. Problem
: For projects built with vue-cli3 scaffolding, when the package file is uploaded to the server, other css and js styles can be correctly loaded out of the path. But the icon icon of element cannot be loaded normally.

Problem Analysis:
The loaded path https://yxq.linksign.cn/static/css/static/fonts/element-icons.535877f.woff
should have loaded the path https://yxq.linksign.cn/static/fonts/
The packaged path of element-icons.535877f.woff
is actually two layers more than the file path read during packaging;
find the packaged path in utils.js of the build file, see generateLoaders();
Extract CSS when that option is specified, when this option is specified, the CSS is extracted
and a public path is missing, plus publiccPath

if (options.extract) {
     return ExtractTextPlugin.extract({
       use: loaders,
       fallback: 'vue-style-loader',
       // 解决icon路径加载错误
       publicPath:'../../'
     })
   } else {
     return ['vue-style-loader'].concat(loaders)
}

Appendix 2: How to solve win10 system port being occupied
1. Start---->Run---->cmd, call out the command window as <<<administrator>>>
2. View the PID corresponding to the occupied port( That is, the process ID), enter the command: netstat -aon|findstr "port number", press Enter, and write down the last digit, that is, the PID. The
    example is as follows:
    #View the usage of port 8005
    netstat -aon|findstr "8005"
    # The data format displayed in the command window is as follows:
    TCP 127.0.0.1:8005 0.0.0.0:0 LISTENING 14700

Note 1: The netstat -ano command can be used to view the usage of all ports, netstat -ano | findstr "8005" to view the usage of the specified port number Note 2: The
cls command can be used to clear the screen

3. According to the PID search process,
     continue to enter tasklist|findstr "14700", press Enter, and check which process or program occupies port 8005, the result is: javaw.exe 
     javaw.exe 14700 Console 1 313,864 K

4. At this point, the result is very clear, and then we can go to the service area in the control panel to check the process and manually close it. You can also close it by command in cmd, enter:
    taskkill /f /t /im javaw.exe 

Thanks！