基于nginx的静态网页部署 2020 最新

       背景：

一序列的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;
    }
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657

创建一个目录，例如： /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;
}123456

这里每个文件夹下面的静态页面文件名都是 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;
        }
}123456789

这里的 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;
        }
}12345678910

 

使用 21云盒子 

1. 在网站上扫码注册一个帐号 https://www.21yunbox.com 注册
2. 把静态网页放在github或gitee上
3. 在21云盒子一键部署