Nginx配置動靜分離

1、準備工作

我們最終想實現的效果如下：

即訪問以 /webTestProject 為前綴的資源時，我們認為是靜態(tài)資源。我們把靜態(tài)資源直接放在 Nginx 服務器上，通過 Nginx 來直接返回靜態(tài)資源。

當訪問的資源以 /serviceTestProject 為前綴時，我們認為是動態(tài)資源。此時通過 Nginx 把請求代理轉發(fā)至 192.168.32.130 服務器上，通過該服務器來處理動態(tài)請求。

上面也是常見的前后端分離項目的架構，實際上我們接下來的配置也是示例前后端分離在實際生產上的架構。

1.1、準備靜態(tài)資源

首先先準備靜態(tài)資源項目即前端項目 webTestProject，然后將該項目放到 192.168.32.128 服務器的 /usr/myTestData/webTestProject 目錄下：

index.html 文件內容如下，只是顯示一些簡單內容發(fā)出求一個請求：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>Nginx練習頁面</h1>

    <script>
        var xmlhttp;
        if (window.XMLHttpRequest) {
            //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行代碼
            xmlhttp = new XMLHttpRequest();
        } else {
            // IE6, IE5 瀏覽器執(zhí)行代碼
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                console.log(xmlhttp.responseText);
            }
        }

        //請求根路徑下的/serviceTestProject/ajaxResponse.do，實際上會由Nginx轉發(fā)至動態(tài)資源服務器
        xmlhttp.open("GET", "/serviceTestProject/ajaxResponse.do", true);
        xmlhttp.send();
    </script>
</body>

</html>

1.2、準備動態(tài)資源

我們新建一個簡單的 maven javaweb 項目，并且建立一個 ajaxResponse.do 請求以供前端訪問。

ajaxResponse.do 的代碼如下：

@Controller
public class ControllerTest01 {

    //直接給 ajax 請求返回字符串
    @RequestMapping("/ajaxResponse.do")
    public void ajaxResponse(HttpServletRequest request, HttpServletResponse response) throws Exception{
        PrintWriter out = response.getWriter();
        out.write("hello");
    }
}

將該 web 項目打包，并且將打成的 war 包放在 192.168.32.130 服務器上的 tomcat 目錄下的 webapps 目錄下：

2、配置動靜分離

將前端靜態(tài)資源和后臺動態(tài)資源分別部署到不同服務器上后，我們就可以開始進行配置了。

打開 192.168.32.128 服務器上的 Nginx 配置文件 /usr/local/nginx/conf/nginx.conf ，進行如下修改：

即監(jiān)聽本服務器上的 80 端口，當請求的資源以 /webTestProject 為前綴時，將請求直接轉發(fā)至訪問本服務器上 /usr/myTestData/ 目錄下的資源，即直接將該目錄下的靜態(tài)資源返回。

當請求的資源以 /serviceTestProject 為前綴時，將請求轉發(fā)至 192.168.32.130 服務器上，由該服務器來處理動態(tài)請求，我們將后臺項目部署在了該服務器上。

配置完成后，我們可以在瀏覽器訪問 http://192.168.32.128/webTestProject/index.html 可以看到如下效果：

ajaxResponse.do 請求：

可以看到 ajaxResponse.do 請求能正常訪問，并不會有跨域問題。這是因為這些動態(tài)資源已經由 Nginx 進行了反向代理，雖然實際上是由 192.168.32.130 服務器進行處理并返回的，但瀏覽器并不能感知到。因為發(fā)出的動態(tài)資源請求是請求 192.168.32.128 服務器上的資源的，然后再由該服務器上的 Nginx 轉發(fā)至 192.168.32.130 服務器上的。

實際上，動態(tài)資源是由 192.168.32.130 服務器處理并返回的，靜態(tài)資源是由 192.168.32.128 上的 Nginx 服務器直接返回的。

2.1、完整的Nginx配置文件

完整的Nginx配置文件如下：

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    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        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

    #gzip  on;

    server {
        listen       80;
        server_name  192.168.32.128;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /webTestProject/ {
            root   /usr/myTestData/;
            index  index.html index.htm;
        }
        
        location /serviceTestProject/ {
            proxy_pass http://192.168.32.130:8080;
            root   html;
            index  index.html index.htm;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

        # proxy the PHP scripts to Apache listening on 127.0.0.1:80
        #
        #location ~ \.php$ {
        #    proxy_pass   http://127.0.0.1;
        #}

        # pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
        #
        #location ~ \.php$ {
        #    root           html;
        #    fastcgi_pass   127.0.0.1:9000;
        #    fastcgi_index  index.php;
        #    fastcgi_param  SCRIPT_FILENAME  /scripts$fastcgi_script_name;
        #    include        fastcgi_params;
        #}

        # deny access to .htaccess files, if Apache's document root
        # concurs with nginx's one
        #
        #location ~ /\.ht {
        #    deny  all;
        #}
    }


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}

posted @ 2021-07-11 22:46 wenxuehai 閱讀(3174) 評論(0) 收藏舉報

刷新頁面返回頂部

//右下角添加目錄

提升自己，才有選擇的能力和勇氣