焦點資訊：Nginx 常用的基礎(chǔ)配置（web前端相關(guān)方面）

(相關(guān)資料圖)

最近很多朋友通過趣站網(wǎng)問到Nginx配置前端 web 服務，所以特地寫了這篇文章；希望能夠幫助更多的朋友。

基礎(chǔ)配置

user                            root;worker_processes                1;events {  worker_connections            10240;}http {  log_format                    "$remote_addr - $remote_user [$time_local] " ""$request" $status $body_bytes_sent " ""$http_referer" "$http_user_agent"";  include                       mime.types;  default_type                  application/octet-stream;  sendfile                      on;  #autoindex                    on;  #autoindex_exact_size         off;  autoindex_localtime           on;  keepalive_timeout             65;  gzip                          on;  gzip_disable                  "msie6";  gzip_min_length               100;  gzip_buffers                  4 16k;  gzip_comp_level               1;  gzip_types                  text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;  gzip_types                    "*";  gzip_vary                     off;  server_tokens                 off;  client_max_body_size          200m;  server {    listen                      80 default_server;    server_name                 _;    return                      403 /www/403/index.html;  }  include                       ../serve/*.conf;}復制代碼

隱藏 Nginx 版本信息

http {  server_tokens         off;}復制代碼

禁止ip直接訪問80端口

server {  listen                80 default;  server_name           _;  return                500;}復制代碼

啟動 web 服務 (vue 項目為例)

server {  # 項目啟動端口  listen            80;  # 域名（localhost）  server_name       _;  # 禁止 iframe 嵌套  add_header        X-Frame-Options SAMEORIGIN;    # 訪問地址 根路徑配置  location / {    # 項目目錄    root     html;    # 默認讀取文件    index           index.html;    # 配置 history 模式的刷新空白    try_files       $uri $uri/ /index.html;  }    # 后綴匹配，解決靜態(tài)資源找不到問題  location ~* \.(gif|jpg|jpeg|png|css|js|ico)$ {     root           html/static/;  }    # 圖片防盜鏈  location ~/static/.*\.(jpg|jpeg|png|gif|webp)$ {    root              html;    valid_referers    *.deeruby.com;    if ($invalid_referer) {      return          403;    }  }    # 訪問限制  location /static {    root               html;    # allow 允許    allow              39.xxx.xxx.xxx;    # deny  拒絕    deny               all;  }}復制代碼

PC端和移動端使用不同的項目文件映射

server {  ......  location / {    root /home/static/pc;    if ($http_user_agent ~* "(mobile|android|iphone|ipod|phone)") {      root /home/static/mobile;    }    index index.html;  }}復制代碼

一個web服務，配置多個項目 (location 匹配路由區(qū)別)

server {  listen                80;  server_name           _;    # 主應用  location / {    root         html/main;    index               index.html;    try_files           $uri $uri/ /index.html;  }    # 子應用一  location ^~ /store/ {    proxy_pass          http://localhost:8001;    proxy_redirect      off;    proxy_set_header    Host $host;    proxy_set_header    X-Real-IP $remote_addr;    proxy_set_header    X-Forwarded-For    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;  }    # 子應用二  location ^~ /school/ {    proxy_pass          http://localhost:8002;    proxy_redirect      off;    proxy_set_header    Host $host;    proxy_set_header    X-Real-IP $remote_addr;    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;  }    # 靜態(tài)資源讀取不到問題處理  rewrite ^/api/profile/(.*)$ /(替換成正確路徑的文件的上一層目錄)/$1 last;}# 子應用一服務server {  listen                8001;  server_name           _;  location / {    root         html/store;    index               index.html;    try_files           $uri $uri/ /index.html;  }    location ^~ /store/ {    alias               html/store/;    index               index.html index.htm;    try_files           $uri /store/index.html;  }    # 接口代理  location  /api {    proxy_pass          http://localhost:8089;  }}# 子應用二服務server {  listen                8002;  server_name           _;  location / {    root         html/school;    index               index.html;    try_files           $uri $uri/ /index.html;  }    location ^~ /school/ {    alias               html/school/;    index               index.html index.htm;    try_files           $uri /school/index.html;  }    # 接口代理  location  /api {    proxy_pass          http://localhost:10010;  }}復制代碼

配置負載均衡

upstream my_upstream {  server                http://localhost:9001;  server                http://localhost:9002;  server                http://localhost:9003;}server {  listen                9000;  server_name           test.com;  location / {    proxy_pass          my_upstream;    proxy_set_header    Host $proxy_host;    proxy_set_header    X-Real-IP $remote_addr;    proxy_set_header    X-Forwarded-For $proxy_add_x_forwarded_for;  }}復制代碼

SSL 配置 HTTPS

server {  listen                      80;  server_name                 www.xxx.com;  # 將 http 重定向轉(zhuǎn)移到 https  return 301 https://$server_name$request_uri;}server {  listen                      443 ssl;  server_name                 www.xxx.com;  ssl_certificate             /etc/nginx/ssl/www.xxx.com.pem;  ssl_certificate_key         /etc/nginx/ssl/www.xxx.com.key;  ssl_session_timeout         10m;  ssl_ciphers                 ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;  ssl_protocols               TLSv1 TLSv1.1 TLSv1.2;  ssl_prefer_server_ciphers   on;    location / {    root                    /project/xxx;    index                   index.html index.htm index.md;    try_files               $uri $uri/ /index.html;  }}

關(guān)鍵詞： Nginx