Nginx部署前後端分離服務以及設定說明

不言
發布: 2023-04-02 20:34:01
原創
6818 人瀏覽過

這篇文章主要介紹了關於Nginx部署前後端分離服務以及設定說明,有著一定的參考價值,現在分享給大家,有需要的朋友可以參考一下

安裝Nginx

在CentOS 7 伺服器中使用yum指令安裝Nginx:

sudo yum install -y nginx

##設定Nginx

#檔案位置

一般nginx設定檔在
etc目錄下,也可以執行指令rpm -ql nginx檢視路徑。
切換到

/etc/nginx目錄後,可以看到nginx.conf這個設定檔。 執行
vi nginx.conf即可開啟設定檔。

vim 常用指令

#指令作用i遊標前面開始輸入內容a遊標後面開始輸入內容##遊標後面開始輸入內容Esc退出輸入模式u#在非輸入模式下撤銷上一個步驟#:w在非輸入模式下,儲存:wq在非輸入模式下,儲存並關閉:q關閉(已儲存)
a

#:q!不儲存,強制關閉

Nginx設定說明
# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto; #启动进程
error_log /var/log/nginx/error.log; #全局错误日志
pid /run/nginx.pid; #PID文件

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024; #单个后台worker process进程的最大并发链接数 
}

http {
    gzip on; #开启gzip压缩
    gzip_min_length 1k; #设置对数据启用压缩的最少字节数
    gzip_buffers    4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 6; #设置数据的压缩等级,等级为1-9,压缩比从小到大
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; #设置需要压缩的数据格式
    gzip_vary on;

    #虚拟主机配置
    server {
        listen       80 default_server; #侦听80端口,并为默认服务,default_server只能有一个
        server_name  www.binlive.cn binlive.cn; #服务域名,可以有多个,用空格隔开
        
        location /{
            proxy_pass http://127.0.0.1:3000; #代理本机3000端口服务
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # 获取用户的真实IP地址
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
            proxy_read_timeout                  900;
        }
        # 图片缓存时间设置
        location ~ .*.(gif|jpg|jpeg|png|bmp|swf)$ {
            expires 10d;
        }
        # JS和CSS缓存时间设置
        location ~ .*.(js|css)?$ {
            expires 1h;
        }
        # 404定义错误提示页面
        error_page 404             /404.html;
        # 500定义错误提示页面
        error_page   500 502 503 504 /50x.html;
        
    }
    server {
        listen       80;
        server_name  admin.binlive.cn;
        location /{
            proxy_pass http://127.0.0.1:3080;
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
            proxy_read_timeout                  900;
        }
        
    } 
}
登入後複製

#部署前後端分離專案
  • 在前後端分離端專案裡,前端的程式碼會被打包成為純靜態檔案。使用 Nginx的目的就是讓靜態檔案執行服務,由於後端的介面也是分離的,直接請求可能會產生跨域問題,此時就需要Nginx轉送代理後端介面。

    Nginx配置如下

# For more information on configuration, see:
#   * Official English Documentation: http://nginx.org/en/docs/
#   * Official Russian Documentation: http://nginx.org/ru/docs/

user nginx;
worker_processes auto; #启动进程
error_log /var/log/nginx/error.log; #全局错误日志
pid /run/nginx.pid; #PID文件

# Load dynamic modules. See /usr/share/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;

events {
    worker_connections 1024; #单个后台worker process进程的最大并发链接数 
}

http {
    gzip on; #开启gzip压缩
    gzip_min_length 1k; #设置对数据启用压缩的最少字节数
    gzip_buffers    4 16k;
    gzip_http_version 1.0;
    gzip_comp_level 6; #设置数据的压缩等级,等级为1-9,压缩比从小到大
    gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml; #设置需要压缩的数据格式
    gzip_vary on;

    #虚拟主机配置
    server {
        listen       80;
        server_name  mark.binlive.cn;
        root /home/spa-project/dist; #定义服务器的默认网站根目录位置
        index index.html; #定义index页面
        error_page    404         /index.html; #将404错误页面重定向到index.html可以解决history模式访问不到页面问题
        location ^~ /api/{
            proxy_pass http://127.0.0.1:7000;
            proxy_send_timeout 1800;
            proxy_read_timeout 1800;
            proxy_connect_timeout 1800;
            client_max_body_size 2048m;
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade"; 
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
        }
        location ^~ /auth/{
            proxy_pass http://127.0.0.1:7000;
            proxy_send_timeout 1800;
            proxy_read_timeout 1800;
            proxy_connect_timeout 1800;
            client_max_body_size 2048m;
            proxy_http_version 1.1;  
            proxy_set_header Upgrade $http_upgrade;  
            proxy_set_header Connection "Upgrade"; 
            proxy_set_header  Host              $http_host;   # required for docker client's sake
            proxy_set_header  X-Real-IP         $remote_addr; # pass on real client's IP
            proxy_set_header  X-Forwarded-For   $proxy_add_x_forwarded_for;
            proxy_set_header  X-Forwarded-Proto $scheme;
        }
    }    
}
登入後複製
  • #將前端程式碼打包後的dist

    檔案放入指定服務目錄
  • 將服務目錄指定到
  • spa-project/dist
  • 目錄下即可代理靜態服務

  • 設定中開啟了gzip壓縮,可以很大程度上減小檔案體積大小

    將404錯誤頁面重定向到index.html,可以解決前端history路由模式由於刷新頁面訪問不到服務出現404的問題
  • location
    為代理接口,可以轉發代理後端的請求接口域名或ip,即可解決接口跨域問題
    啟動Nginx服務
    完成設定後即可啟動nginx執行nginx -t

    ,可以測試Nginx的設定是否正確。

    執行nginx,在設定檔正確的情況下即可啟動nginx服務。

    修改nginx設定檔後執行nginx -s reload可以完成平滑過渡重新載入設定Nginx常用指令指令描述#nginx -h查看Nginx的幫助nginx -v查看Nginx的版本#nginx -t
    ##測試Nginx的設定
    #nginx -T 測試Nginx的配置,並列印設定資訊
    nginx 啟動nginx
    #nginx -s reload 重新載入設定文件,平滑啟動nginx
    nginx -s stop

    #停止nginx的指令

    以上就是本文的全部內容,希望對大家的學習有幫助,更多相關內容請關注PHP中文網!

    相關推薦:

    Nginx 設定未綁定網域禁止存取

    nginx實作反向代理與負載據平衡

    ############Nginx 部署靜態頁面######

    以上是Nginx部署前後端分離服務以及設定說明的詳細內容。更多資訊請關注PHP中文網其他相關文章!

    相關標籤:
    來源:php.cn
    本網站聲明
    本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
    作者最新文章
    熱門教學
    更多>
    最新下載
    更多>
    網站特效
    網站源碼
    網站素材
    前端模板