利用Nginx服務器發佈前端頁面

Nginx做爲http服務器，能夠作網頁靜態服務器。部署靜態資源前，咱們先學習一下Nginx配置文件

user nobody;
#啓動進程,一般設置成和cpu的數量相等
worker_processes  1;
 
#全局錯誤日誌及PID文件
#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
 
#pid        logs/nginx.pid;
 
#工做模式及鏈接數上限
events {
    #epoll是多路複用IO(I/O Multiplexing)中的一種方式,
    #僅用於linux2.6以上內核,能夠大大提升nginx的性能
    use   epoll; 
 
    #單個後臺worker process進程的最大併發連接數    
    worker_connections  1024;
 
    # 併發總數是 worker_processes 和 worker_connections 的乘積
    # 即 max_clients = worker_processes * worker_connections
    # 在設置了反向代理的狀況下，max_clients = worker_processes * worker_connections / 4  爲何
    # 爲何上面反向代理要除以4，應該說是一個經驗值
    # 根據以上條件，正常狀況下的Nginx Server能夠應付的最大鏈接數爲：4 * 8000 = 32000
    # worker_connections 值的設置跟物理內存大小有關
    # 由於併發受IO約束，max_clients的值須小於系統能夠打開的最大文件數
    # 而系統能夠打開的最大文件數和內存大小成正比，通常1GB內存的機器上能夠打開的文件數大約是10萬左右
    # 咱們來看看360M內存的VPS能夠打開的文件句柄數是多少：
    # $ cat /proc/sys/fs/file-max
    # 輸出 34336
    # 32000 < 34336，即併發鏈接總數小於系統能夠打開的文件句柄總數，這樣就在操做系統能夠承受的範圍以內
    # 因此，worker_connections 的值需根據 worker_processes 進程數目和系統能夠打開的最大文件總數進行適當地進行設置
    # 使得併發總數小於操做系統能夠打開的最大文件數目
    # 其實質也就是根據主機的物理CPU和內存進行配置
    # 固然，理論上的併發總數可能會和實際有所誤差，由於主機還有其餘的工做進程須要消耗系統資源。
    # ulimit -SHn 65535
 
}
 
 
http {
    #設定mime類型,類型由mime.type文件定義
    include    mime.types;
    default_type  application/octet-stream;
    #設定日誌格式
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
 
    access_log  logs/access.log  main;
 
    #sendfile 指令指定 nginx 是否調用 sendfile 函數（zero copy 方式）來輸出文件，
    #對於普通應用，必須設爲 on,
    #若是用來進行下載等應用磁盤IO重負載應用，可設置爲 off，
    #以平衡磁盤與網絡I/O處理速度，下降系統的uptime.
    sendfile     on;
    #tcp_nopush     on;
 
    #鏈接超時時間
    #keepalive_timeout  0;
    keepalive_timeout  65;
    tcp_nodelay     on;
 
    #開啓gzip壓縮
    gzip  on;
    gzip_disable "MSIE [1-6].";
 
    #設定請求緩衝
    client_header_buffer_size    128k;
    large_client_header_buffers  4 128k;
 
 
    #設定虛擬主機配置
    server {
        #偵聽80端口
        listen    80;
        #定義使用 www.nginx.cn訪問
        server_name  www.nginx.cn;
 
        #定義服務器的默認網站根目錄位置
        root html;
 
        #設定本虛擬主機的訪問日誌
        access_log  logs/nginx.access.log  main;
 
        #默認請求
        location / {
            
            #定義首頁索引文件的名稱
            index index.php index.html index.htm;   
 
        }
 
        # 定義錯誤提示頁面
        error_page   500 502 503 504 /50x.html;
        location = /50x.html {
        }
 
        #靜態文件，nginx本身處理
        location ~ ^/(images|javascript|js|css|flash|media|static)/ {
            
            #過時30天，靜態文件不怎麼更新，過時能夠設大一點，
            #若是頻繁更新，則能夠設置得小一點。
            expires 30d;
        }
 
        #PHP 腳本請求所有轉發到 FastCGI處理. 使用FastCGI默認配置.
        location ~ .php$ {
            fastcgi_pass 127.0.0.1:9000;
            fastcgi_index index.php;
            fastcgi_param  SCRIPT_FILENAME  $document_root$fastcgi_script_name;
            include fastcgi_params;
        }
 
        #禁止訪問 .htxxx 文件
            location ~ /.ht {
            deny all;
        }
 
    }
}

配置Nginx/Tengine

請先確保本身的服務器安裝了Nginx或者Tengine（本文以Tengine爲例）

• 將靜態資源文件拷貝到指定目錄，如/home/admin

• 配置nginx-proxy.conf文件

server {
        listen       8089;
        server_name  localhost;
        location /resource_static/ {
            root   /home/admin/;
        }

    }

本文配置的監聽端口爲8089，具體是狀況而定

上面配置表示輸入 localhost:8089/resource_static/ 時會訪問本機的/home/admin/resource_static/ 目錄，在/home/admin/resource_static/下新建一個文件test.json,以下所示：

在瀏覽器中輸入：

localhost:8089/resource_static/test.json

 跨域問題

跨域問題常常會遇到,以下面的錯誤：

Access to Font at 'http://xxx:8089/resource_static/console/hello.ttf' from origin 'http://xxx:8089' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxx:8080' is therefore not allowed access.

• 解決方法：

若是配置成這樣，依然會有問題

location /resource_static/ {
            root   /home/admin/;
            add_header 'Access-Control-Allow-Origin' '*';
            add_header 'Access-Control-Allow-Credentials' 'true';
            add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
            add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type';
        }