背景：

一序列的html網(wǎng)頁(yè)需要部署

基于nginx的部署：

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

簡(jiǎn)單地配置 Nginx 的配置文件，以便在啟動(dòng) Nginx 時(shí)去啟用這些配置即可實(shí)現(xiàn)對(duì)于編寫(xiě)好的html網(wǎng)頁(yè)的點(diǎn)擊跳轉(zhuǎn)訪問(wèn)。而本文的重點(diǎn)也是于此。

配置方式1：

Nginx 的配置系統(tǒng)由一個(gè)主配置文件和其他一些輔助的配置文件構(gòu)成。這些配置文件均是純文本文件，一般地，我們只需要配置主配置文件就行了。/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;       # 監(jiān)聽(tīng)本機(jī)所有 ip 上的 8081 端口
  server_name _;      # 域名：www.example.com 這里 "_" 代表獲取匹配所有
  root /home/liujiepeng/workspace/html/etc/resource/html/; # 站點(diǎn)根目錄
  index Home.html;
  }
}

創(chuàng)建一個(gè)目錄，例如： /home/liujiepeng/workspace/html/etc/resource/html/ 然后在這個(gè) html文件夾下可以放置你需要部署的靜態(tài)頁(yè)面文件，例如 html下我有 google、baidu、liujiepeng這三個(gè)文件夾，其中 server 字段配置如下：

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

 這里每個(gè)文件夾下面的靜態(tài)頁(yè)面文件名都是 Home.html 。這樣配置的話，例如當(dāng)你訪問(wèn) www.example.com/google/ 時(shí)，nginx 就會(huì)去 root指定的目錄下的 google 文件夾下尋找到 Home.html 并把 google 頁(yè)面返回，同理，訪問(wèn) www.example.com/baidu/ 時(shí)，會(huì)尋找到 baidu文件夾下的 Home.html 并把 baidu頁(yè)面返回。

而在 google、baidu、liujiepeng 文件夾的同級(jí)目錄上，再添加你的域名首頁(yè) Home.html 時(shí)，訪問(wèn) www.example.com 時(shí)就會(huì)返回了。

這里唯一美中不足的是，訪問(wèn)域名中 www.showzeng.cn/zhihu 末尾會(huì)自動(dòng)加上 / ，在瀏覽器中按 F12 調(diào)試會(huì)發(fā)現(xiàn) www.showzeng.cn/zhihu 為 301 狀態(tài)碼，因?yàn)?index.html 是在 zhihu/ 文件夾下，所以在搜索過(guò)程中會(huì)重定向到 www.showzeng.cn/zhihu/

配置方式2：

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

server {
    listen 8081;       # 監(jiān)聽(tīng)本機(jī)所有 ip 上的 8081 端口
    server_name _;      # 域名：www.example.com 這里 "_" 代表獲取匹配所有
    root /home/filename/;  # 站點(diǎn)根目錄

    location / {       # 可有多個(gè) location 用于配置路由地址
      try_files index.html =404;
    }
}

 這里的 root 字段最好寫(xiě)在 location 字段的外邊，防止出現(xiàn)無(wú)法加載 css、js 的情況。因?yàn)?css、js 的加載并不是自動(dòng)的，nginx 無(wú)法執(zhí)行，需要額外的配置來(lái)返回資源，所以，對(duì)于靜態(tài)頁(yè)面的部署，這樣做是最為方便的。

這里對(duì) root 作進(jìn)一步解釋?zhuān)缭诜?wù)器上有 /home/liujiepeng/workspace/html/etc/resource/html/，其下有 index.html 文件和 css/ 以及 img/ ， root /home/liujiepeng/workspace/html/etc/resource/html/ 這配置語(yǔ)句就將指定服務(wù)器加載資源時(shí)是在 /home/liujiepeng/workspace/html/etc/resource/html/ 下查找。

其次， location 后的匹配分多種，其各類(lèi)匹配方式優(yōu)先級(jí)也各不相同。這里列舉一精確匹配例子：

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

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

 此時(shí)，訪問(wèn) www.example.com/liujiepeng 就會(huì)加載 zhihu.html 出來(lái)了。由于 location 的精確匹配，只有訪問(wèn) www.example.com/liujiepeng 這個(gè)路由時(shí)才會(huì)正確響應(yīng)，而且此時(shí)要通過(guò) rewrite 正則匹配，把 /zhihu 解析替換成原來(lái)的 / 。關(guān)于更多 location 字段用法，可以在文章最后給出的參考資料中查看。

參考： https://www.jb51.net/article/141340.htm

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。