Nginx (engine x) 是一個高效能的HTTP和反向代理伺服器

在前後端分離框架設計中，Nginx是一個不錯的選擇，因為其既可以作為前端HTTP訪問器，也可以通過簡單配置實現負載，同時也可以通過反向代理配置解決前後端分離的JavaScript跨域問題。

配置Nginx作為前端HTTP訪問器，前端頁面（*.html）放到html目錄下（如果想新增一個訪問上下文跟，只需要在此目錄下新建一個子目錄，比如：html），頁面所需要的css、images、js我們放在resources目錄下，修改nginx.conf

    server {
        listen       localhost:9999
 
;
        server_name  discovery;
        root /html/html;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   html;
            index  default.html;
        }   

        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|js|css|ico|woff)$
        {
           root d:/nginx-1.13
 
.6/resources;
           access_log  on;
        }

}

預設頁default是我們的登陸頁，我們都知道前後端分離必須要面對的是JavaScript的跨域問題，我們為了正確獲取到訪問後續頁面的所必須的token，我們通過nginx的反向代理配置，將前端頁面請求轉發到後端處理，比如：‘/discovery/login’

function login() {
        var login = false;
        $.ajax({
            url: '/discovery/login',
            data: "username="
 
 + $("#username").val() + "&password=" + $("#password").val(),
            type: 'POST',
            contentType: 'application/x-www-form-urlencoded',
            async: false,
            success: function (d) {
                var token = d.data;
                if (token != undefined && token != '') {
                    if(token=="-1"){
                        alert("認證異常");
                        login =false;
                    }else {
                        $.cookie("username", $("#username").val());
                        $.cookie("Authorization", token); 
                        window.location.href = 'index.html';
                        login = true;
                    }
                } else {
                    alert("使用者名稱或密碼錯誤！");
                    login = false;
                }
            }
        });
        return login;
    }

這裡是反向代理的相關配置

location ~ /discovery {
     proxy_pass http://ip:port;
}

簡化處理，匹配所有的/discovery/**請求。

後端使用SpringBoot微服務框架，在SpringBoot框架下也可以使用FreeMarker整合開發Web應用。