吐槽ing

初來乍到的小白的我表示會js，學了一點node.js，但是我現在還停留在分不清vue.js和node.js的層次上，雖然做了幾個前端的頁面，但是那都是用純生js+html+css寫的好吧！！！雖然加了一點html5和Jquery的技術

而且，我表示！！後面的關於前端的技術還沒學，，~~~沒辦法啊，，！除錯一個專案，沒有前端人員的技術支援！！！只能自力更生了！無限百度+視訊，終於，初步解決了一個一個純純前端的程式碼，（苦逼的我還要去寫後臺的程式碼，還要和前端的url對應上，真是個苦逼的生活，吐槽ing）

ps：從github上找專案，一定要找全套的（這年頭的專案好多都是前後端分離的），而且！！！改別人的程式碼好累！！！~~~~

========================================分割線==============================================

以上是我的吐槽，不吐槽難受，！下面開始簡單總結一下我的本地測試。

第一步：安裝環境-這裡不多解釋

1.我現在的是4.x版本的node.js（因為測試過，8.x的不能用webpack打包）

2.全域性安裝webpack  （-g就是表示全域性安裝，jdk配置環境變量了解下啊！！）

  npm install -g [email protected]^1.15.0

3、全域性安裝webpack-dev-server

  npm install -g [email protected]^1.16.5

4.在項根路徑執行npm初始化

  npm install  --registry=https://registry.npm.taobao.org

  這裡使用淘寶的映象，就是快！

5.這裡就基本ok了，剩下啟動專案了

ps：關於node配置這裡有很多東西可以寫（比如package.json，webpack.conf.js），但是畢竟我不是專業弄前端的，所有就能省則省，如何我時間充裕，再去仔細研究一下它，畢竟我現在只是想專案啟動，能更改一些簡單的東西就ok了~~~！

不多說，都是眼淚，一個要用4.x的node。否則，嘿嘿，你會發現webpack這個指令用不了，，苦逼的我啊。只能在學習的道路上越走越黑~~~

然後，當webpack打包成功後，會有一個dist資料夾（我感覺就是可以被瀏覽器識別的東西），這個就是我們下面用nginx需要用到的。

第二步：安裝並配置nginx

網上一堆關於nginx的用處，我感覺這裡我只用到了反向代理這一塊！什麼負載均衡，嘿嘿，沒用到。（吐槽一下）

安裝什麼的不多說，我重點說一下配置檔案的問題。在這我坑了將近一天的時間！！

首先/conf下有nginx.conf這個是預設的配置檔案，如果想要用自己的配置檔案，需要在配置檔案中加入如下：

include test/*.conf;

這裡指的就是在和nginx.conf同級目錄中 加入一個test資料夾，當然了，資料夾中可以放你想要的配置檔案了。（*代表所有，不多說）。

然後我們繼續說一下配置檔案中的內容，

server {
        listen       80;
        server_name  localhost;
        location / {
            root html;
            index index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }

這裡就說一下server這個標籤下的東西，

listen:代表埠號，這裡的埠號最好不要和自定義配置中的埠號一樣，否則，會有你意想不到的事情發生~~~

server_name：伺服器名稱，其實就是個代號，測試過這個名字沒什麼影響，估計是類似和註釋一樣為了方便查閱的東西

location：這可是個好東西，我認為就是攔截了，攔截後面的是類似於正則表示式的東西，比如這個location / 就是攔截所有 帶有 “/” 的請求，比如輸入localhost：80（和localhost一樣，預設localhost就是80埠）就會跳轉到nginx預設的歡迎頁面

             root：這個就是路徑，比如舉個列子：我的前端專案打包後的dist檔案放到D：/dist下，那麼root 後面就寫 D:/dist就                           ok了，它會自動去尋找dist中的index.html頁面

             index：就是和root一起用，表示可以匹配的檔名稱，這裡可以是index.html，index.htm，index.php等，

關於location的很多匹配規則百度上有很多，這裡我就不多說了，這裡推薦一篇帖子nginx location配置詳細解釋

然後，我按照這個配置寫了一個自己的自定義配置

server {
    listen 8088;
    autoindex on;
    server_name zhkj.shop.com;
    #access_log c:/access.lg combined;
    index index.html index.htm index.jsp index.php;
    #error_page 404 /404.html;
	if ($query_string ~* ".*[\;'\<\>].*") {
        return 404;
    }
	location =/ {
        root  D:/ZHKJ_SHOP_ZY/dist/view;
        index index.html;
    }
	
	location ~* .(jpg|gif|png|js|css|woff2|woff|ttf)$ {
		root D:/ZHKJ_SHOP_ZY/;
		if (-f $request_filename) {
			expires max;
			break;
		}
		
	}
	
    location ~ .*\.html$ {
        root  D:/ZHKJ_SHOP_ZY/dist/view;
        index index.html;
    }
    location / {
        proxy_pass http://127.0.0.1:8000;
        add_header Access-Control-Allow-Origin *;
    }
}

這裡我通過用location的匹配規則，用location ~* . 去尋找我的css，js等靜態資源

第三步：瀏覽器直接輸人url

這裡，如果沒什麼問題的話，專案的前端頁面展示應該沒問題了，直接瀏覽器上輸入 localhost:8088就會展示出頁面

=====================================分割線==============================================

總結

看似在本地部署一個前端專案沒多少東西啊，不難啊！就是下載+安裝+配置+執行嘛！！！

額，怎麼說呢，看似很簡單，但是裡面的東西你遠遠想象不到，各種關於頁面詭異事件因為一個配置不對，都會產生；

所有呢，我總結一下我遇到的各種問題，以及我是如何解決的

問題1：初次接觸node的專案，不知道如何使用，

回答：它不是簡單的html頁面，直接雙擊開啟就ok了（這都是基礎的），裡面的程式碼你不去看，永遠不會知道它是如何執行的，

我也不敢多說，畢竟沒怎麼學過，所以還是系統的學習一下

問題2：通過百度得知類似於這種前端專案，是一個前後端分離專案中的一部分（前端部分），那它是如何執行的呢，還是之前的在後端的webapp下建一個static檔案，將前端頁面放入，然後打包，釋出到tomcat上嗎？

回答：不是的，為什麼前後端分離，不就是為了減少耦合，方便開發人員的開發，如何這樣做，和一個完全的全棧web開發有什麼區別！所以這裡用nginx通過反向代理，通過指向一個url來達到執行前端頁面，可以呼叫後端的介面

問題3：nginx如何使用？在使用nginx中遇到哪些問題？

回答：配置檔案上，（我只認知在反向代理這兒）配置你的server，（埠，攔截什麼的）

          遇的問題：在nginx的使用中，會有80端口占用問題，直接kill掉使用80埠的執行緒就ok（我總使用wamp，apache就是80                               埠的，會 有衝突）

                           在nginx配置檔案中更新後，需要重新啟動nginx

                           nginx.exe -t  ---------->這個是測試配置檔案是否符合規範

nginx.exe -s reload ----------->重啟nginx

問題4：使用webpack指令為前端專案打包時出現錯誤（）

回答：其實這就是node的版本問題，所以還是使用文件中給定的版本來使用，我就在這個坑上糾結了很久！

問題5：運行了專案，但是在控制檯顯示各種css，js等靜態資源找不到，顯示404

回答：這就是在nginx配置中沒有寫好location 的url攔截，仔細檢查

問題6：專案可以執行，但是不能對接後臺的埠url，顯示500，或者就是根本不能調到後臺的url

回答：還是location的問題，每個人的寫法不同，有的人寫後臺的url匹配會用 location /api/do

          這裡的api就是你後臺的url的字元，比如 /user/login.do,那api就換成uer就ok了，或者直接用下面的這種，方便，就是不好管理

location / {
        proxy_pass http://127.0.0.1:8000;
        add_header Access-Control-Allow-Origin *;
    }

問題7：頁面可以正常執行，也可以訪問到後臺的url，但是開發者除錯下，控制檯中顯示[WDS] Disconnected!這個錯誤

回答：這個我沒做過具體研究，但是親測將程式碼中所有的localhost更改成127.0.0.1後可以解決

==================================分割線=================================================

這是一篇吐槽貼！！，後續會更新，放一些真正的乾貨東西！！！（關於前端這一塊）

ps：來著一個只幹後端的，對前端迷茫的小白的無力吐槽；