Nginx静态资源配置

1、概述

本篇博文记录把静态资源放到Linux中搭建的Nginx服务的过程。

2、资源准备

（1）静态资源：搜索页面和购物车的静态html文件，以及css、js和图片等资源

 

（2）上传到Nginx服务器的某目录

可以使用

3、Nginx配置

（1）nginx.conf文件配置

新增两个server模块，一个模块对应的是一个虚拟主机，此处采用端口和域名进行区分。

购物车静态页面：81端口，域名是www.rabbit.cart，资源路径是html/cart，主页面是cart.html文件

搜索静态页面：82端口，域名是www.rabbit.search，资源路径是html/search，主页面是search.html文件

     server {
        listen       81;
        server_name www.rabbit.cart;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/cart;
            index  cart.html;
        }

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

    }

    server {
        listen       82;
        server_name www.rabbit.search;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html/search;
            index  search.html;
        }

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

    }

（2）编写工具

可以直接使用Xshell连接到Linux服务器，通过命令行方式：cd /usr/local/nginx/conf，然后vim nginx.conf即可编辑。

为了快速，可以使用EditPlus进行类似于word方式的编辑：

在EditPlus中，“文件”------“FTP”------“设置FTP服务器”，然后进入如下设置页面，设置好后即可连接到Linux服务器

连接到Linux服务器后，即可在左侧选择文件夹以及文件夹下面的文件，然后可以在右侧进行编辑，快速便捷。

4、访问展示

（1）访问搜索页面：

在浏览器输入：http://192.168.40.136:82/，显示如下：

在浏览器输入：http://192.168.40.136:81/，显示如下：

 

由于在nginx.conf中配置了域名，所以可以不通过IP+端口号来访问，通过域名+端口号访问也可以。但是需要在windows环境中配置好ip和域名的映射的关系。此处可以通过软件SwitchHosts来进行配置：

所以接下来可以通过域名+端口号访问了：

http://www.rabbit.cart:81/和http://www.rabbit.search:82/同上面访问结果一样。

参考博客：

https://www.cnblogs.com/tangyin/p/9700852.html

https://www.cnblogs.com/cangqinglang/p/9173354.html