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/同上面访问结果一样。
参考博客: