基于nginx的静态网页部署的实现

 更新时间:2018年06月02日 09:59:12   作者:jasonliu1919  
这篇文章主要介绍了基于nginx的静态网页部署的实现,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

背景:

一序列的html网页需要部署

基于nginx的部署:

本文采用的基于openresty的nginx 配置。

简单地配置 Nginx 的配置文件,以便在启动 Nginx 时去启用这些配置即可实现对于编写好的html网页的点击跳转访问。而本文的重点也是于此。

配置方式1:

Nginx 的配置系统由一个主配置文件和其他一些辅助的配置文件构成。这些配置文件均是纯文本文件,一般地,我们只需要配置主配置文件就行了。/usr/local/openresty/nginx/conf 下的配置文件修改如下:

配置信息:

#user nobody;
worker_processes 1;
#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;
#pid    logs/nginx.pid;


events {
  worker_connections 1024;
}


http {
  resolver 10.1.16.10;
  include    mime.types;
  default_type application/octet-stream;

  log_format main '$remote_addr\t$remote_user\t[$time_local]\t$request '
    '\t$status\t$body_bytes_sent\t$http_referer'
    '\t$http_user_agent\t$http_x_forwarded_for'
    '\t$host\t$request_time\t$upstream_addr\t$upstream_status\t$upstream_response_time';

  server_names_hash_bucket_size 128;
  client_header_buffer_size 32k;
  large_client_header_buffers 4 32k;
  client_max_body_size 30m;

  sendfile on;
  tcp_nopush   on;
  log_subrequest on;

  keepalive_timeout 60;
  tcp_nodelay on;

  gzip on;
  gzip_min_length 1k;
  gzip_buffers   4 16k;
  gzip_http_version 1.0;
  gzip_comp_level 2;
  gzip_types    text/plain application/x-javascript text/css application/xml;
  gzip_vary on;

  lua_package_cpath 'lib/?.so;tcp/lib/?.so;/data1/htdocs/lua_v2/lib/*/?.so;;';
  lua_shared_dict cache 100m;
  lua_code_cache on;
  lua_shared_dict lyrics_monitor_cnt 1024K;

  server {
  listen 8081;       # 监听本机所有 ip 上的 8081 端口
  server_name _;      # 域名:www.example.com 这里 "_" 代表获取匹配所有
  root /home/liujiepeng/workspace/html/etc/resource/html/; # 站点根目录
  index Home.html;
  }
}

创建一个目录,例如: /home/liujiepeng/workspace/html/etc/resource/html/ 然后在这个 html文件夹下可以放置你需要部署的静态页面文件,例如 html下我有 google、baidu、liujiepeng这三个文件夹,其中 server 字段配置如下:

server {
    listen 80;
    server_name _;
    root /home/liujiepeng/workspace/html/etc/resource/html/;
    index Home.html;
}

 这里每个文件夹下面的静态页面文件名都是 Home.html 。这样配置的话,例如当你访问 www.example.com/google/ 时,nginx 就会去 root指定的目录下的 google 文件夹下寻找到 Home.html 并把 google 页面返回,同理,访问 www.example.com/baidu/ 时,会寻找到 baidu文件夹下的 Home.html 并把 baidu页面返回。

而在 google、baidu、liujiepeng 文件夹的同级目录上,再添加你的域名首页 Home.html 时,访问 www.example.com 时就会返回了。

这里唯一美中不足的是,访问域名中 www.showzeng.cn/zhihu 末尾会自动加上 / ,在浏览器中按 F12 调试会发现 www.showzeng.cn/zhihu 为 301 状态码,因为 index.html 是在 zhihu/ 文件夹下,所以在搜索过程中会重定向到 www.showzeng.cn/zhihu/

配置方式2:

这里需要注意的是 http 上下文里的 server 上下文。

server {
    listen 8081;       # 监听本机所有 ip 上的 8081 端口
    server_name _;      # 域名:www.example.com 这里 "_" 代表获取匹配所有
    root /home/filename/;  # 站点根目录

    location / {       # 可有多个 location 用于配置路由地址
      try_files index.html =404;
    }
}

 这里的 root 字段最好写在 location 字段的外边,防止出现无法加载 css、js 的情况。因为 css、js 的加载并不是自动的,nginx 无法执行,需要额外的配置来返回资源,所以,对于静态页面的部署,这样做是最为方便的。

这里对 root 作进一步解释,例如在服务器上有 /home/liujiepeng/workspace/html/etc/resource/html/,其下有 index.html 文件和 css/ 以及 img/ , root /home/liujiepeng/workspace/html/etc/resource/html/ 这配置语句就将指定服务器加载资源时是在 /home/liujiepeng/workspace/html/etc/resource/html/ 下查找。

其次, location 后的匹配分多种,其各类匹配方式优先级也各不相同。这里列举一精确匹配例子:

server {
    listen 80;        
    server_name _;      
    root /home/zhihu/;  

    location = /zhihu {
      rewrite ^/.* / break;
      try_files index.html =404;
    }
}

 此时,访问 www.example.com/liujiepeng 就会加载 zhihu.html 出来了。由于 location 的精确匹配,只有访问 www.example.com/liujiepeng 这个路由时才会正确响应,而且此时要通过 rewrite 正则匹配,把 /zhihu 解析替换成原来的 / 。关于更多 location 字段用法,可以在文章最后给出的参考资料中查看。

参考: https://www.jb51.net/article/141340.htm

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • 详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南

    详解Nginx + Tomcat 反向代理 负载均衡 集群 部署指南

    Nginx是一种服务器软件,也是一种高性能的http和反向代理服务器,本篇文章主要介绍了Nginx + Tomcat 反向代理 负载均衡 集群 部署指南,有兴趣的可以了解一下。
    2016-12-12
  • shell脚本之nginx自动化脚本

    shell脚本之nginx自动化脚本

    今天小编就为大家分享一篇关于shell脚本之nginx自动化脚本,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • Nginx实现防盗链的多种方式

    Nginx实现防盗链的多种方式

    防盗链指的是防止其他网站未经许可直接引用你的资源(如图片、音视频文件、文档等),这样做不仅能有效节约带宽,还能防止未经授权的内容被滥用,本文给大家介绍了Nginx实现防盗链的多种方式,需要的朋友可以参考下
    2025-01-01
  • 使用Nginx、Nginx Plus抵御DDOS攻击的方法

    使用Nginx、Nginx Plus抵御DDOS攻击的方法

    DDOS 是一种通过大流量的请求对目标进行轰炸式访问,导致提供服务的服务器资源耗尽进而无法继续提供服务的攻击手段。这篇文章主要介绍了使用Nginx、Nginx Plus抵御DDOS攻击的方法,感兴趣的小伙伴们可以参考一下
    2018-06-06
  • Nginx 域名SSL证书配置(网站 http 升级为 https)

    Nginx 域名SSL证书配置(网站 http 升级为 https)

    这篇文章主要介绍了Nginx 域名SSL证书配置(网站 http 升级为 https),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-12-12
  • docker运行Nginx及配置方法

    docker运行Nginx及配置方法

    这篇文章主要介绍了docker运行Nginx及配置方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-07-07
  • Nginx使用反向代理实现负载均衡过程解析

    Nginx使用反向代理实现负载均衡过程解析

    这篇文章主要介绍了Nginx使用反向代理实现负载均衡过程解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-09-09
  • LNMP原理与简单部署过程

    LNMP原理与简单部署过程

    LNMP架构,是指在Linux平台下,由运行Nginx的web服务器,运行PHP的动态页面解析程序和运行MySQL的数据库组成的网站架构,也是当前常用的系统架构之一,本文主要介绍LNMP原理与简单部署,感兴趣的朋友一起看看吧
    2023-08-08
  • Nginx配置详解(推荐)

    Nginx配置详解(推荐)

    Nginx功能丰富,可作为HTTP服务器,也可作为反向代理服务器,邮件服务器。支持FastCGI、SSL、Virtual Host、URL Rewrite、Gzip等功能
    2017-05-05
  • 使用nginx+tomcat+keepalived实现高可用的详细步骤

    使用nginx+tomcat+keepalived实现高可用的详细步骤

    这篇文章主要介绍了nginx+tomcat+keepalived实现高可用,包括安装nginx服务的步骤,详细介绍了安装keepalived的方法,对nginx+tomcat+keepalived高可用相关知识感兴趣的朋友一起看看吧
    2022-03-03

最新评论