大前端伺服器渲染 釋出和部署 Vue + Nuxt（SSR） + Nginx

不知道大家在接觸React或者Vue的時候，有沒有思考過，這個框架到底是在哪裡渲染的？

其實現在流行的Ng、React和Vue等前端技術，都是屬於瀏覽器渲染，最初設計的理念是為了減輕伺服器壓力，但是這個也是有弊端的，最主要的，比如首頁載入過慢（因為第一次載入需要載入JS等資源，然後瀏覽器會根據JS繪畫渲染頁面，這個過程需要一定的時間）和不利於SEO的優化（百度等國內的網路蜘蛛不會爬非同步載入的網站）。所以，有了這兩大弊端，必須把一些官網或者主網站弄成SSR，提高渲染效率和SEO優化。

React有個SSR叫做Next.js，Vue也有一個SSR，就是Nuxt.js。下面先介紹Nuxt.js在Linux上的釋出和部署。

1，首先，在伺服器上裝好Node.js / NPM。這裡就不教安裝了，自己搜尋。

2，利用 NPM 安裝 Vue 和 Nuxt。自己前往官網安裝，可用腳手架，也可自己新建專案。Nuxt官網

3，然後就是把專案在伺服器上跑起來，先編譯（npm run build），之後就釋出（npm run start），預設開啟的路徑是localhost:3000。

4，這裡如果你是用npm run start釋出的話，服務程式會隨著你的Shell關閉而關閉，也就是說，要把服務程式轉成守護程式開啟才是。也就是說，上面的釋出命令要換成 nohup npm run start & 才行。後面的&不能漏哦。

5，釋出之後，接下來就是測試你這個服務有沒有釋出成功，可以用以下兩步，第一個，首先輸入命令 ps -ef | grep nuxt ，如果返回的是兩個程式，那就恭喜您，你已經發布成功。第二個， 接著輸入 curl http://localhost:3000 （為什麼這裡是要localhost:3000呢？我不能直接用IP嗎？其實你試一下curl IP你就知道了，IP的請求不通的）

6，使用Nginx進行負載均衡和反向代理，這裡用的反向代理的原因就是，把請求往localhost:3000代理過去。

7，訪問伺服器IP，Nuxt的字眼大大地印刷在螢幕上，然後在本地把Nuxt的程式碼上傳到伺服器。再重啟發布。最後搞定。

 

最後，如果評論有要求，我在把各類程式碼附出來。還有什麼技術棧更好的歡迎交流。下期有機會再更新React的Next.js部署過程。