單頁應用的部署方案

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

本文主要簡單講一下單頁應用的開發及部署方法，默認你懂一些服務端知識及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提供的代理或轉發功能，仍是能夠很好的跨域問題的。