Nginx动静分离技术(配置步骤)

目录

1. 项目前后端联调时，使用 Nginx动静分离技术 来实现报告的展示 

2. nginx 常用命令

3. 配置域名：涉及两个配置文件hosts, nginx.conf

3.1 修改win10系统的hosts文件

3.2 修改nginx的配置文件nginx.conf

3.3 执行命令重新加载： nginx -s reload

3.4 在浏览器中访问：http://platform.xxxx.com

4.   nginx代理后端请求的配置

5. 动静分离的配置

---

1. 项目前后端联调时，使用 Nginx动静分离技术 来实现报告的展示 

Nginx的基础概念，可参考此文：Nginx基础学习笔记   

2. nginx 常用命令

（1）启动：双击后直接运行nginx, 或者到nginx目录下，运行终端命令：start nginx

（2）停止：nginx -s stop

（3）重新加载配置文件：nginx -s reload

  

 

3. 配置域名：涉及两个配置文件hosts, nginx.conf

3.1 修改win10系统的hosts文件

（1）打开目录 C:\Windows\System32\drivers\etc 下的 hosts 文件。

（2）在hosts文件中添加一下配置：127.0.0.1 platform.xxx.com 

注：后面的名字platform.xxx.com可以是其他的，自定义（如果这个名字不能修改，那就记住现有的IP对应的名称，这个名称要用在后面Nginx的配置文件中）。

3.2 修改nginx的配置文件nginx.conf

（1）nginx配置文件默认路径： ${NGINX_HOME}/conf/nginx.conf，用notepad++打开。

（2）修改 server_name  localhost; 为 server_name  platform.xxxx.com;

举例：

http {
    ...............

    server {
        listen       80;
        server_name  localhost;  //这一步可以不注释掉,则可以通过两个名称访问nginx主页
        server_name  activate.navicat.com 

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        #前端
        location / {
            #proxy_pass http://127.0.0.1:8000;  //这里先注释掉，不然访问不到nginx主页
            root   html;
            index  index.html index.htm;
        }
        
        #后端
        location /api/ {
            #proxy_pass http://127.0.0.1:8080;  //这里先注释掉，不然访问不到nginx主页
            root   html;
            index  index.html index.htm;
        }
        
        #静态
        location /jmeterReport/ {
            alias C:/Users/xxx/Lessons/sourcecode/jmeterReport/;
            autoindex on;
        }

        ...............

}

3.3 执行命令重新加载： nginx -s reload

3.4 在浏览器中访问：http://platform.xxxx.com

        

4.   nginx代理后端请求的配置

添加以下配置内容：

...

        #前端
        location / {
            proxy_pass http://127.0.0.1:8000;
            root   html;
            index  index.html index.htm;
        }
        
        #后端
        location /api/ {
            proxy_pass http://127.0.0.1:8080;
            root   html;
            index  index.html index.htm;
        }
        
        #静态
        location /jmeterReport/ {
            alias C:/Users/xxx/Lessons/sourcecode/jmeterReport/;
            autoindex on;
        }

...  

5. 动静分离的配置

（1） 添加以下配置内容

...

         #前端
        location / {
            proxy_pass http://127.0.0.1:8000;
            root   html;
            index  index.html index.htm;
        }
        
        #后端
        location /api/ {
            proxy_pass http://127.0.0.1:8080;
            root   html;
            index  index.html index.htm;
        }
        
        #静态
        location /jmeterReport/ {
            alias C:/Users/xxx/Lessons/sourcecode/jmeterReport/;
            autoindex on;
        }

...