本地部署前端訪問服務器

　　PS：本系列內容進度節奏會放的很慢，每次知識點都盡量少一點，這樣大家接觸的知識點少了，會更容易理解，因為少即是多。另外，對於後面代碼部分，雖然盡量不用那些復雜的封裝和類，但它並不表示看了就能全部記住，並懂得每個函數的用法，在什麽時候去調用，清楚它輸入的參數類型、能處理的參數類型和輸出的結果是什麽。它需要動手去調用，去大量的測試，這樣才能真正掌握。對於初學者，最好將這些函數和測試用例全都照著錄入一次，你會有不一樣的體會，我自己去學習一個新框架時，都會盡量將底層的代碼親手錄入一次，而不是用復制粘貼。

　　由於要實現前後端完全分離，所以需要在本地環境部署一個nginx服務器，配置後前後端訪問時就不會出現跨域的問題。當然也可以將前端文件放到python項目中，然後使用路由的方式訪問，但這樣訪問時一般都會多出一層目錄出來，對於追求完美有強迫癥的人來說還是很別扭的，所以還是學多一樣技能，話說要配置這個服務還是挺簡單的。

　　1.安裝nginx服務

　　首先下載nginx的windows運行版和Windows Service Wrapper（將nginx安裝到系統服務的程序， 這樣就不用每次都要手動運行了）

　　點擊下載

　　解壓後有兩個文件

　　將nginx-1.11.5解壓到 E:\Service 目錄下

　　解壓Windows Service Wrapper，將裏面的winsw-1.9-bin.exe復制到 E:\Service\nginx-1.11.5 下，並改名為nginx-service.exe

　　然後在 E:\Service\nginx-1.11.5 目錄下創建一個xml文件，命名為nginx-service.xml，並粘貼下面內容（如果你的路徑不是在E:\Service下，要註意修改配置文件中的路徑）

<?xml version="1.0" encoding="UTF-8" ?>
<service>
  <id>nginx</id>
  <name>Nginx Service</name>
  <description>High Performance Nginx Service</description>
  <executable>E:\Service\nginx-1.11.5\nginx.exe</executable>
  <logpath>E:\Service\nginx-1.11.5\</logpath>
  <logmode>roll</logmode>
  <depend></depend>
  <startargument>-p E:\Service\nginx-1.11.5</startargument>
  <stopargument>-p E:\Service\nginx-1.11.5\nginx.exe -s stop</stopargument>
</service>

　　運行cmd，輸入命令：E:\Service\nginx-1.11.5\nginx-service.exe install ，將nginx安裝成Windows服務

　　點擊我的電腦 右鍵 -> 管理 -> 服務 -> 看看是否有 Nginx Service 這個服務，有的話就表示安裝成功了

　　如果路徑寫錯了，也可以在停止服務後，輸入 E:\Service\nginx-1.11.5\nginx-service.exe uninstall進行卸載

　　如果想停止服務，直接點停止好像停不了，可以打開Windows任務管理器，找到nginx-service.exe點右鍵，在彈出的菜單中點擊結束進程樹就可以了

　　2.修改nginx.conf配置信息

　　在 E:\Service\nginx-1.11.5\conf 文件夾找到nginx.conf文件，可以用Uedit或Notepad打開進行編輯，不要用系統自帶的記事本，用記事本編輯後可能因為編碼問題，nginx服務會啟動不了

　　將nginx.conf修改為下面內容

worker_processes  1; #工作進程的個數，建議設置為等於CPU總核心數

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"‘;

    sendfile        on;

    keepalive_timeout  30;

    #gzip  on;

    #服務器的集群配置
    upstream myweb {
        #fair;
        ip_hash;
        # 設置後端接口服務器地址
        server 127.0.0.1:9090 weight=1 max_fails=5 fail_timeout=5s; 
    }

    server {
        listen      81;         # 監聽80端口，如果被占用了，可以改成其他端口
        charset     utf-8;
        root        E:\\Python\\simple\\html; # 前端html路徑，這裏可以修改為你放置前端html的路徑
        server_name 127.0.0.1;     # 當前服務的域名，可以有多個，用空格隔開
        
        location / {
                index  Index.html index.html;
        }
        
        # 設置後端接口跳轉地址，訪問括號中的地址時會自動跳轉到後端接口服務上
        location ~* ^/(index|api)/ { # 這裏設置
            #請求轉向自定義的的負載均衡服務器列表
            proxy_pass                    http://myweb;
            proxy_cache_key            $host$uri$is_args$args;
            proxy_set_header           Host $host; 
            proxy_set_header           X-Real-IP $remote_addr; 
            proxy_set_header           X-Forwarded-For $proxy_add_x_forwarded_for;  #後端的Web服務器可以通過X-Forwarded-For獲取用戶真實IP
            proxy_connect_timeout      3; #nginx跟後端服務器連接超時時間(代理連接超時)
            proxy_send_timeout         5; #後端服務器數據回傳時間(代理發送超時)
            proxy_read_timeout         5; #連接成功後，後端服務器響應時間(代理接收超時)
        }
    }

}

　　然後到系統服務中，啟動 Nginx Service 這個服務就可以了

　　打開瀏覽器輸入：http://127.0.0.1:81/ 就可以看到前端頁面了（由於前端比較菜，所以直接用H-ui前端自帶的圖片，沒有專門處理）

　　打開瀏覽器輸入：http://127.0.0.1:81/login.html就可以看到後端登錄頁面了

　　打開瀏覽器輸入：http://127.0.0.1:81/index/ 就可以看到上一篇中訪問 http://127.0.0.1:9090/index/ 的Hello World了（PS：要記得運行PyCharm，打開上一章的main.py文件，然後運行Debug，不然會無法訪問）

　　如果 Nginx Service 啟動不了，可以查看nginx的logs文件夾裏的error.log日誌，看看提示什麽出錯了，對應進行修改，很多時候啟動不了，都是conf\nginx.conf配置文件沒有設置好，比如說80端口被占用了，需要修改端口等；或者裏面的路徑設置錯了，windows下的路徑都必須是E:\\xxx\\xxx 這種方式，用linux的路徑或少了\都會出錯，其他出錯的話可以查看error.log日誌後，將錯誤復制到百度進行找看解決方案

作者：AllEmpty
出處：http://www.cnblogs.com/EmptyFS/
有興趣的朋友可以加加python開發QQ群：669058475，大家一起探討。大家有問題的話可以在群裏發問，當然我平時工作也非常繁忙不一定會及時回復。

本文為AllEmpty原創，歡迎轉載，但未經同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責任的權利。

前端訪問服務器