濮阳杆衣贸易有限公司

主頁(yè) > 知識(shí)庫(kù) > 前端必備Nginx配置詳解

前端必備Nginx配置詳解

熱門(mén)標(biāo)簽:地圖標(biāo)注黃河的位置 百度地圖標(biāo)注公司位置要多少錢(qián) 400電話號(hào)碼辦理多少錢(qián) 靈圖uu電子寵物店地圖標(biāo)注 地圖標(biāo)注如何改成微信號(hào) 濮陽(yáng)好的聯(lián)通400電話申請(qǐng) 山東企業(yè)外呼系統(tǒng)公司 虛假地圖標(biāo)注 承德地圖標(biāo)注公司

Nginx (engine x) 是一個(gè)輕量級(jí)高性能的HTTP和反向代理服務(wù)器,同時(shí)也是一個(gè)通用 代理服務(wù)器 (TCP/UDP/IMAP/POP3/SMTP),最初由俄羅斯人Igor Sysoev編寫(xiě)。

基本命令

nginx -t             檢查配置文件是否有語(yǔ)法錯(cuò)誤
nginx -s reload       熱加載,重新加載配置文件
nginx -s stop         快速關(guān)閉
nginx -s quit         等待工作進(jìn)程處理完成后關(guān)閉

搭建好nginx服務(wù)器并啟動(dòng)過(guò)后,我們先看nginx默認(rèn)配置,再逐個(gè)介紹不同使用場(chǎng)景。

默認(rèn)配置

Nginx 安裝目錄下, 我們復(fù)制一份`nginx.conf`成`nginx.conf.default`作為配置文件備份,然后修改`nginx.conf`

# 工作進(jìn)程的數(shù)量
worker_processes 1;
events {
  worker_connections 1024; # 每個(gè)工作進(jìn)程連接數(shù)
}

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

  # 日志格式
  log_format access '$remote_addr - $remote_user [$time_local] $host "$request" '
         '$status $body_bytes_sent "$http_referer" '
         '"$http_user_agent" "$http_x_forwarded_for" "$clientip"';
  access_log /srv/log/nginx/access.log access; # 日志輸出目錄
  gzip on;
  sendfile on;

  # 鏈接超時(shí)時(shí)間,自動(dòng)斷開(kāi)
  keepalive_timeout 60;

  # 虛擬主機(jī)
  server {
    listen    8080;
    server_name localhost; # 瀏覽器訪問(wèn)域名

    charset utf-8;
    access_log logs/localhost.access.log access;

    # 路由
    location / {
      root  www; # 訪問(wèn)根目錄
      index index.html index.htm; # 入口文件
    }
  }

  # 引入其他的配置文件
  include servers/*;
}

搭建站點(diǎn)

在其他配置文件`servers`目錄下,添加新建站點(diǎn)配置文件 xx.conf。

電腦 hosts 文件添加  127.0.0.1   xx_domian# 虛擬主機(jī)

server {
  listen    8080;
  server_name xx_domian; # 瀏覽器訪問(wèn)域名

  charset utf-8;
  access_log logs/xx_domian.access.log access;

  # 路由
  location / {
    root  www; # 訪問(wèn)根目錄
    index index.html index.htm; # 入口文件
  }
}

執(zhí)行命令 nginx -s reload,成功后瀏覽器訪問(wèn)  xx_domian 就能看到你的頁(yè)面

根據(jù)文件類型設(shè)置過(guò)期時(shí)間

location ~.*\.css$ {
  expires 1d;
  break;
}
location ~.*\.js$ {
  expires 1d;
  break;
}

location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$ {
  access_log off;
  expires 15d;  #保存15天
  break;
}

# curl -x127.0.0.1:80 http://www.test.com/static/image/common/logo.png -I #測(cè)試圖片的max-age

禁止文件緩存

開(kāi)發(fā)環(huán)境經(jīng)常改動(dòng)代碼,由于瀏覽器緩存需要強(qiáng)制刷新才能看到效果。這是我們可以禁止瀏覽器緩存提高效率

location ~* \.(js|css|png|jpg|gif)$ {
  add_header Cache-Control no-store;
}

防盜鏈

可以防止文件被其他網(wǎng)站調(diào)用

location ~* \.(gif|jpg|png)$ {
  # 只允許 192.168.0.1 請(qǐng)求資源
  valid_referers none blocked 192.168.0.1;
  if ($invalid_referer) {
    rewrite ^/ http://$host/logo.png;
  }
}

靜態(tài)文件壓縮

server {
  # 開(kāi)啟gzip 壓縮
  gzip on;
  # 設(shè)置gzip所需的http協(xié)議最低版本 (HTTP/1.1, HTTP/1.0)
  gzip_http_version 1.1;
  # 設(shè)置壓縮級(jí)別,壓縮級(jí)別越高壓縮時(shí)間越長(zhǎng) (1-9)
  gzip_comp_level 4;
  # 設(shè)置壓縮的最小字節(jié)數(shù), 頁(yè)面Content-Length獲取
  gzip_min_length 1000;
  # 設(shè)置壓縮文件的類型 (text/html)
  gzip_types text/plain application/javascript text/css;
}

執(zhí)行命令 nginx -s reload,成功后瀏覽器訪問(wèn)

指定定錯(cuò)誤頁(yè)面

# 根據(jù)狀態(tài)碼,返回對(duì)于的錯(cuò)誤頁(yè)面
error_page 500 502 503 504 /50x.html;
location = /50x.html {
  root /source/error_page;
}

執(zhí)行命令 nginx -s reload,成功后瀏覽器訪問(wèn)

跨域問(wèn)題

跨域的定義

同源策略限制了從同一個(gè)源加載的文檔或腳本如何與來(lái)自另一個(gè)源的資源進(jìn)行交互。這是一個(gè)用于隔離潛在惡意文件的重要安全機(jī)制。通常不允許不同源間的讀操作。

同源的定義

如果兩個(gè)頁(yè)面的協(xié)議,端口(如果有指定)和域名都相同,則兩個(gè)頁(yè)面具有相同的源。nginx解決跨域的原理

例如:

  • 前端server域名為:http://xx_domain
  • 后端server域名為:https://github.com

現(xiàn)在http://xx_domain對(duì)https://github.com發(fā)起請(qǐng)求一定會(huì)出現(xiàn)跨域。

不過(guò)只需要啟動(dòng)一個(gè)nginx服務(wù)器,將server_name設(shè)置為xx_domain,然后設(shè)置相應(yīng)的location以攔截前端需要跨域的請(qǐng)求,最后將請(qǐng)求代理回github.com。如下面的配置:

## 配置反向代理的參數(shù)
server {
  listen  8080;
  server_name xx_domain

  ## 1. 用戶訪問(wèn) http://xx_domain,則反向代理到 https://github.com
  location / {
    proxy_pass https://github.com;
    proxy_redirect   off;
    proxy_set_header  Host       $host;    # 傳遞域名
    proxy_set_header  X-Real-IP    $remote_addr; # 傳遞ip
    proxy_set_header  X-Scheme     $scheme;   # 傳遞協(xié)議
    proxy_set_header  X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}

這樣可以完美繞過(guò)瀏覽器的同源策略:github.com訪問(wèn)nginx的github.com屬于同源訪問(wèn),而nginx對(duì)服務(wù)端轉(zhuǎn)發(fā)的請(qǐng)求不會(huì)觸發(fā)瀏覽器的同源策略。

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

標(biāo)簽:安康 上海 鷹潭 德宏 樂(lè)山 泰安 淮安 福州

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《前端必備Nginx配置詳解》,本文關(guān)鍵詞  前端,必備,Nginx,配置,詳解,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《前端必備Nginx配置詳解》相關(guān)的同類信息!
  • 本頁(yè)收集關(guān)于前端必備Nginx配置詳解的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章
    延长县| 康马县| 陆川县| 布尔津县| 舒兰市| 无为县| 西乌珠穆沁旗| 个旧市| 镇远县| 曲阜市| 壶关县| 兴海县| 凤庆县| 诸城市| 青神县| 宜丰县| 大埔县| 平安县| 石阡县| 新河县| 五原县| 高平市| 包头市| 海城市| 巩义市| 湖北省| 绥江县| 平远县| 宁安市| 绍兴县| 北宁市| 高碑店市| 军事| 巴东县| 晋江市| 凤台县| 册亨县| 大兴区| 苍南县| 蒙山县| 新源县|