nginx靜態資源的服務器配置方法

 更新時間:2022年07月01日 08:51:59   作者:一樂樂  
Nginx本身也是一個靜態資源的服務器,當只有靜態資源的時候,就可以使用Nginx來做服務器,同時現在也很流行動靜分離,就可以通過Nginx來實現,這篇文章主要介紹了nginx靜態資源的服務器配置方法,需要的朋友可以參考下

一、nginx 作用

★ 靜態HTTP服務器

★ HTTP服務器(動靜分離)

★ 反向代理

★ 負載均衡

二、nginx 靜態HTTP服務器配置

Nginx本身也是一個靜態資源的服務器,當只有靜態資源的時候,就可以使用Nginx來做服務器,同時現在也很流行動靜分離,就可以通過Nginx來實現。

# nginx 靜態資源配置--靜態服務器(也是最簡單的配置)
server {
	listen 80; # 監聽端口號
	server_name localhost; # 主機名
	index index.html index.htm; # 默認頁名稱
	root html; # 靜態資源存放目錄
	location / { # 匹配路徑
		root html; # 文件根目錄
		index index.html index.htm; # 默認頁名稱
	}
	error_page 500 502 503 504 /50x.html; # 報錯編碼對應頁面
	location = /50x.html {
		root html;
	}
}

● url 和 uri:

網址是url,url=主機:端口+uri

uri 是資源,是location后面的匹配規則,即 location uri

● location uri,當規則匹配上了就到root目錄找頁面

location / { #匹配路徑
		root html; #文件根目錄
		index index.html index.htm; #默認頁名稱
	}

● location 配置方法

location 配置可以有兩種配置方法

① 前綴 + uri(字符串/正則表達式)

② @ + name

前綴含義

= :精確匹配(必須全部相等):大小寫敏感

~* :忽略大小寫

^~ :只需匹配uri部分

@ :內部服務跳轉

三、nginx HTTP服務器(動靜分離--nginx+tomcat實現動靜分離)

靜態資源:數據不變,請求不需要后臺處理;動態資源:模板,jsp、templates等,數據需要后臺處理后渲染到網頁,動態網頁。

Nginx可以根據一定規則把不變的資源和經常變的資源區分開,對動靜資源進行拆分,實現對靜態資源的做緩存,從而提高資源響應的速度。這就是網站靜態化處理的核心思路。

upstream tomcat{  
	server localhost:8080;  
}   
server {  
	listen       80;  
	server_name  localhost;  
	location / {  
		root   html;  
		index  index.html;  
	}  
	# 所有靜態請求都由nginx處理,存放目錄為html  
	location  ~* \.(gif|jpg|jpeg|png|bmp|swf|css|js)$ {  
		root   html;  
	}  
	# 所有動態請求都轉發給tomcat處理  
	location ~ *jsp$ {  
		proxy_pass  http://tomcat; # 代理轉發
	}  
	error_page   500 502 503 504  /50x.html;  
	location = /50x.html {  
		root  html;  
	}  
}

四、 反向代理----使用proxy_pass

server {
               listen       80;
               server_name  blog.yilele.site;
               index   index.html;            
               location / {
                        root /shan/blog/;
                        index index.html;
               }
              location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
                          root /shan/blog/;
                          index index.html;
                          add_header Access-Control-Allow-Origin *;
              }
              # 反向代理
              location /api {
					proxy_pass http://ip地址或域名:端口號;
               }  
}

? nginx 配置springboot+vue 前后端分離項目

1、思路:nginx 結合自身特性,本身一個靜態資源的服務器,

(1) 通過nginx實現域名的方式訪問網站,以及把對數據的請求通過nginx反向代理轉發給后端容器(后端服務),避免了接口暴露的不安全

① 訪問網站,首先習慣上訪問網站的首頁,通常訪問路徑是/ [location /],然后默認頁面是首頁;

location / {
     root /shan/blog/;
     index index.html;
 }

② 默認頁面,首頁需要像css、js、圖片等靜態資源,才能顯示出樣式、動態效果等,需要通過匹配規則[location ~*.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$],指定root 到那個目錄下獲取這些靜態資源。

location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
    root /shan/blog/;
    index index.html;
    add_header Access-Control-Allow-Origin *;
 }

③ 默認首頁,需要有數據

在vue中首頁實際上編寫了很多個接口在請求數據,這些動態數據是來自 springboot項目(api 服務),需要咱通過定義一個匹配接口路徑的規則[location /api],然后進行請求轉發到 springboot項目(api 服務)

2、通過dockerCompose+nginx配置實現部署spirngboot+vue前后端分離項目

(1) dockerCompose 主要內容:

version: "3"
services:
  api:
    image: api
    container_name: api
    expose:
      - "8888"
  nginx:
    image: nginx
    container_name: nginx
    ports:
      - 80:80
      - 443:443
    volumes:
      - /mnt/docker/nginx/:/etc/nginx/
      - /mnt/shan/blog:/shan/blog
    links:
      - api
    depends_on:
      - api

(2) nginx 主要配置:

upstream apistream{
        server api:8888;# 通過dockerCompose編排,服務名相當于域名
}

server {
               listen       80;
               server_name  blog.yilele.site;
               index   index.html;          
               location / {
                        root /shan/blog/;
                        index index.html;
               }
              location ~* \.(jpg|jpeg|gif|png|swf|rar|zip|css|js|map|svg|woff|ttf|txt)$ {
                        root /shan/blog/;
                        index index.html;
                        add_header Access-Control-Allow-Origin *;
              }
              location /api {# 請求https://blog.yilele.site/api 會代理轉發到 api:8888
					  proxy_pass http://apistream;
              }  
}

到此這篇關于nginx靜態資源的服務器配置方法的文章就介紹到這了,更多相關nginx靜態資源服務器內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持腳本之家!

相關文章

  • 深入分析nginx+php-fpm服務HTTP狀態碼502

    深入分析nginx+php-fpm服務HTTP狀態碼502

    這篇文章主要介紹了深入分析nginx+php-fpm服務HTTP狀態碼502,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2019-07-07
  • Nginx隱藏服務器端各類信息的方法

    Nginx隱藏服務器端各類信息的方法

    這篇文章主要介紹了Nginx隱藏服務器端各類信息的方法,包括隱藏HTTP頭信息和PHP版本號等等,需要的朋友可以參考下
    2015-07-07
  • 簡單談談Nginx基礎知識入門

    簡單談談Nginx基礎知識入門

    Nginx(engine x)是一個高性能的HTTP服務器(其實不止HTTP服務器),一般主要用作負載均衡和反向代理,今天我們來簡單學習下他的基礎配置知識
    2017-08-08
  • 利用nginx與ffmpeg搭建流媒體服務器過程詳解

    利用nginx與ffmpeg搭建流媒體服務器過程詳解

    這篇文章主要給大家介紹了利用nginx與ffmpeg搭建流媒體服務器的全過程,文中介紹的很詳細,對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。
    2017-03-03
  • nginx開啟gzip壓縮的完整步驟記錄

    nginx開啟gzip壓縮的完整步驟記錄

    Nginx開啟Gzip壓縮功能,可以使網站的css、js 、xml、html文件在傳輸時進行壓縮,提高訪問速度,進而優化Nginx性能,下面這篇文章主要給大家介紹了關于nginx開啟gzip壓縮的相關資料,需要的朋友可以參考下
    2022-01-01
  • Nginx解決403 forbidden的完整步驟

    Nginx解決403 forbidden的完整步驟

    這篇文章主要給大家介紹了關于Nginx解決403 forbidden的完整步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2020-09-09
  • Nginx服務器配置HTTPS nginx.config 配置文件(教程)

    Nginx服務器配置HTTPS nginx.config 配置文件(教程)

    下面小編就為大家分享一篇Nginx服務器配置HTTPS nginx.config 配置文件(教程),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2017-12-12
  • 詳解Nginx虛擬主機配置中server_name的具體寫法

    詳解Nginx虛擬主機配置中server_name的具體寫法

    這篇文章主要介紹了Nginx虛擬主機配置中server_name的具體寫法,server_name服務器名是虛擬主機中必須配置的重要參數,需要的朋友可以參考下
    2016-03-03
  • nginx配置靜態文件服務器詳解

    nginx配置靜態文件服務器詳解

    本篇文章主要介紹了nginx配置靜態文件服務器詳解,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08
  • 詳解Nginx服務器的配置中開啟文件Gzip壓縮的方法

    詳解Nginx服務器的配置中開啟文件Gzip壓縮的方法

    這篇文章主要介紹了Nginx服務器的配置中開啟文件Gzip壓縮的方法,可以對CSS和JavaScript以及各種圖片等web傳輸的文件進行壓縮,需要的朋友可以參考下
    2016-01-01

最新評論

美丽人妻被按摩中出中文字幕