本文同步發佈於我的個人博客上 - 單頁應用的部署方案

本文主要簡單講一下單頁應用的開發及部署方法，默認你懂一些服務端知識及nginx知識，如果有任何可以在下方評論留言。

單頁應用

SPA（單頁應用）可以説是這幾年前端領域的一個技能棧了。

單頁應用不同與傳統的多頁面應用，顧名思義，單頁應用整個應用架構中只有一個實際頁面運行，再借助於H5的History API或hash路由來實現前端路由，從而實現了前後端的解耦，或者前後端分離。不同於以前，前端頁面都是放在後端項目的模板目錄下的，由服務端來渲染模板，並且由後端路由來決定一個請求應該渲染哪個模板，可以説前端對後端的依賴是非常大的。

單頁應用實現了前後端分離，頁面的渲染與路由跳轉都由前端同學自行控制，後端只提供API接口。這種模式下看似前端同學實現了一個大獨立，但是很多同學面對這種開發模式完全不知道如何搭建開發環境以及線上部署。

開發環境

開發環境的搭建一般來説比較簡單，常見的單頁應用框架都提供了腳手架，比如vue的vue-cli，只需要安裝後，一個vue create project就可以初始化一個項目，然後就可以開發了。

這裏主要關注，與後端的調用關係。一般來説，項目裏面直接去調用後端接口就可以了，但是單頁應用由於是前後端分離的，所以前後端的域名一般來説都不一樣，這樣就會出現一個跨域問題。

使用CORS可以很好的解決這個問題，但是這個是需要後端同學配合的，前端同學沒辦法干預。而且有些後端同學可能根本不瞭解CORS，這時候你就需要去跟後端同學扯皮，讓他給你支持跨域問題，碰到不好合作的同學真的很浪費時間。別笑，我還真遇到過這種問題，後端同學完全不知道CORS，學習半天，好不容易能支持了，又寫的亂七八糟的，後面改域名跟帶cookie時，又搞了好幾天，真的浪費時間。

這裏咱們可以使用vue-cli的轉發功能來解決開發時的跨域問題：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:7002',
        changeOrigin: true
      },
    }
  }
}

這樣，前端發請求/api/user/detail這樣的請求就會轉發到後端的http://localhost:7002/api/user/detail了。由於前端不是直接請求後端接口，所以也就不會跨域了。

可以看到前端發出的請求會自動轉發到後端，並且不會觸發跨域。

線上部署

開發完成後面臨一個部署問題，一般來説部署的工作是輪不到前端來做的，一般會交給運維或者後端同學。但是咱們前端同學也要自強不息啊，開個玩笑，實際上很多情況下，小公司的運維同學可能自己都不知道怎麼部署單頁應用，有些時候還是要自己上。

跟開發的時候一個思路，也可以將後端請求做一個轉發，這個時候就沒辦法通過devServer.proxy來轉發了。咱們可以通過NGINX來做一下轉發。

先看看單頁應用的部署，單頁應用開發完只有一個index.html，頁面的渲染及其他頁面都通過js來生成和控制。同時瀏覽器刷新頁面的時候，是會發請求到服務器的，所以如果按照常規方式來部署，就會出現在/user/detail這樣的頁面刷新的時候，會出現404錯誤，因為瀏覽器將頁面發到服務器，卻發現服務器上根本沒有這個資源，所以就404了。所以單頁應用的部署，需要將所有的頁面請求都返回index.html，瀏覽器下載了index.html後js會自動解析並導航到對應頁面。

# nginx.conf
server {
    listen 80;
    server_name www.yuexiaohao.com;
    root /home/yuexiaohao/project/spa/fe/dist;
    index    index.html index.htm;

    location / {
        etag         on;
        expires      max;
        try_files $uri $uri/ /index.html;
    }
}

配置好nginx啓動可以看到這時候網站以及可以在線上運行起來了。前端路由以及頁面刷新都沒有任何問題，但是數據請求肯定是有問題的，因為這個時候線上域名下可沒有/api/xxx接口，因為單頁應用打包出來的其實是一個只包含一個index.html的靜態網站，沒有任何動態語言能力的。

我們使用nginx來轉發一下數據請求：

# nginx.conf
server {
    listen 80;
    server_name www.yuexiaohao.com;
    root /home/yuexiaohao/project/spa/fe/dist;
    index    index.html index.htm;

    location /api/ {
        # 這裏的接口地址自行修改即可，後端項目跟前端項目在一個機器上可以使用本地地址，或者使用內網地址，公網地址都沒有問題
        proxy_pass http://127.0.0.1:7002/api/;
    }

    location / {
        etag         on;
        expires      max;
        try_files $uri $uri/ /index.html;
    }
}

這個時候可以看到數據請求也OK了，整個部署過程就完成了。

總結

單頁應用與以前的常規多頁面應用還是有區別的，開發過程與後端解耦了，同時會出現跨域、鑑權以及應用部署的問題。但是通過工具以及nginx提供的代理或轉發功能，還是可以很好的跨域問題的。