單頁(yè)應(yīng)用的部署方案

yanbingyun1990 發(fā)布于2019-07-25 14:45 / 2955人閱讀

摘要：所以單頁(yè)應(yīng)用的部署，需要將所有的頁(yè)面請(qǐng)求都返回，瀏覽器下載了后會(huì)自動(dòng)解析并導(dǎo)航到對(duì)應(yīng)頁(yè)面?？偨Y(jié)單頁(yè)應(yīng)用與以前的常規(guī)多頁(yè)面應(yīng)用還是有區(qū)別的，開發(fā)過(guò)程與后端解耦了，同時(shí)會(huì)出現(xiàn)跨域鑒權(quán)以及應(yīng)用部署的問(wèn)題。

本文同步發(fā)布于我的個(gè)人博客上 - 單頁(yè)應(yīng)用的部署方案

本文主要簡(jiǎn)單講一下單頁(yè)應(yīng)用的開發(fā)及部署方法，默認(rèn)你懂一些服務(wù)端知識(shí)及nginx知識(shí)，如果有任何可以在下方評(píng)論留言。

單頁(yè)應(yīng)用

SPA（單頁(yè)應(yīng)用）可以說(shuō)是這幾年前端領(lǐng)域的一個(gè)技能棧了。

單頁(yè)應(yīng)用不同與傳統(tǒng)的多頁(yè)面應(yīng)用，顧名思義，單頁(yè)應(yīng)用整個(gè)應(yīng)用架構(gòu)中只有一個(gè)實(shí)際頁(yè)面運(yùn)行，再借助于H5的History API或hash路由來(lái)實(shí)現(xiàn)前端路由，從而實(shí)現(xiàn)了前后端的解耦，或者前后端分離。不同于以前，前端頁(yè)面都是放在后端項(xiàng)目的模板目錄下的，由服務(wù)端來(lái)渲染模板，并且由后端路由來(lái)決定一個(gè)請(qǐng)求應(yīng)該渲染哪個(gè)模板，可以說(shuō)前端對(duì)后端的依賴是非常大的。

單頁(yè)應(yīng)用實(shí)現(xiàn)了前后端分離，頁(yè)面的渲染與路由跳轉(zhuǎn)都由前端同學(xué)自行控制，后端只提供API接口。這種模式下看似前端同學(xué)實(shí)現(xiàn)了一個(gè)大獨(dú)立，但是很多同學(xué)面對(duì)這種開發(fā)模式完全不知道如何搭建開發(fā)環(huán)境以及線上部署。

開發(fā)環(huán)境

開發(fā)環(huán)境的搭建一般來(lái)說(shuō)比較簡(jiǎn)單，常見的單頁(yè)應(yīng)用框架都提供了腳手架，比如vue的vue-cli，只需要安裝后，一個(gè)vue create project就可以初始化一個(gè)項(xiàng)目，然后就可以開發(fā)了。

這里主要關(guān)注，與后端的調(diào)用關(guān)系。一般來(lái)說(shuō)，項(xiàng)目里面直接去調(diào)用后端接口就可以了，但是單頁(yè)應(yīng)用由于是前后端分離的，所以前后端的域名一般來(lái)說(shuō)都不一樣，這樣就會(huì)出現(xiàn)一個(gè)跨域問(wèn)題。

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

這里咱們可以使用vue-cli的轉(zhuǎn)發(fā)功能來(lái)解決開發(fā)時(shí)的跨域問(wèn)題：

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

這樣，前端發(fā)請(qǐng)求/api/user/detail這樣的請(qǐng)求就會(huì)轉(zhuǎn)發(fā)到后端的http://localhost:7002/api/user/detail了。由于前端不是直接請(qǐng)求后端接口，所以也就不會(huì)跨域了。

可以看到前端發(fā)出的請(qǐng)求會(huì)自動(dòng)轉(zhuǎn)發(fā)到后端，并且不會(huì)觸發(fā)跨域。

線上部署

開發(fā)完成后面臨一個(gè)部署問(wèn)題，一般來(lái)說(shuō)部署的工作是輪不到前端來(lái)做的，一般會(huì)交給運(yùn)維或者后端同學(xué)。但是咱們前端同學(xué)也要自強(qiáng)不息啊，開個(gè)玩笑，實(shí)際上很多情況下，小公司的運(yùn)維同學(xué)可能自己都不知道怎么部署單頁(yè)應(yīng)用，有些時(shí)候還是要自己上。

跟開發(fā)的時(shí)候一個(gè)思路，也可以將后端請(qǐng)求做一個(gè)轉(zhuǎn)發(fā)，這個(gè)時(shí)候就沒(méi)辦法通過(guò)devServer.proxy來(lái)轉(zhuǎn)發(fā)了。咱們可以通過(guò)NGINX來(lái)做一下轉(zhuǎn)發(fā)。

先看看單頁(yè)應(yīng)用的部署，單頁(yè)應(yīng)用開發(fā)完只有一個(gè)index.html，頁(yè)面的渲染及其他頁(yè)面都通過(guò)js來(lái)生成和控制。同時(shí)瀏覽器刷新頁(yè)面的時(shí)候，是會(huì)發(fā)請(qǐng)求到服務(wù)器的，所以如果按照常規(guī)方式來(lái)部署，就會(huì)出現(xiàn)在/user/detail這樣的頁(yè)面刷新的時(shí)候，會(huì)出現(xiàn)404錯(cuò)誤，因?yàn)闉g覽器將頁(yè)面發(fā)到服務(wù)器，卻發(fā)現(xiàn)服務(wù)器上根本沒(méi)有這個(gè)資源，所以就404了。所以單頁(yè)應(yīng)用的部署，需要將所有的頁(yè)面請(qǐng)求都返回index.html，瀏覽器下載了index.html后js會(huì)自動(dòng)解析并導(dǎo)航到對(duì)應(yīng)頁(yè)面。

# 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啟動(dòng)可以看到這時(shí)候網(wǎng)站以及可以在線上運(yùn)行起來(lái)了。前端路由以及頁(yè)面刷新都沒(méi)有任何問(wèn)題，但是數(shù)據(jù)請(qǐng)求肯定是有問(wèn)題的，因?yàn)檫@個(gè)時(shí)候線上域名下可沒(méi)有/api/xxx接口，因?yàn)閱雾?yè)應(yīng)用打包出來(lái)的其實(shí)是一個(gè)只包含一個(gè)index.html的靜態(tài)網(wǎng)站，沒(méi)有任何動(dòng)態(tài)語(yǔ)言能力的。

我們使用nginx來(lái)轉(zhuǎn)發(fā)一下數(shù)據(jù)請(qǐng)求：

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

    location /api/ {
        # 這里的接口地址自行修改即可，后端項(xiàng)目跟前端項(xiàng)目在一個(gè)機(jī)器上可以使用本地地址，或者使用內(nèi)網(wǎng)地址，公網(wǎng)地址都沒(méi)有問(wèn)題
        proxy_pass http://127.0.0.1:7002/api/;
    }

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

這個(gè)時(shí)候可以看到數(shù)據(jù)請(qǐng)求也OK了，整個(gè)部署過(guò)程就完成了。

總結(jié)

單頁(yè)應(yīng)用與以前的常規(guī)多頁(yè)面應(yīng)用還是有區(qū)別的，開發(fā)過(guò)程與后端解耦了，同時(shí)會(huì)出現(xiàn)跨域、鑒權(quán)以及應(yīng)用部署的問(wèn)題。但是通過(guò)工具以及nginx提供的代理或轉(zhuǎn)發(fā)功能，還是可以很好的跨域問(wèn)題的。

云服務(wù)器 GPU云服務(wù)器單頁(yè)應(yīng)用單頁(yè)應(yīng)用cdn 單頁(yè)應(yīng)用程序私有云的部署方案

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/40420.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

yanbingyun1990

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

Linux系統(tǒng)又遇新威脅!PRISM后門新變種“水滴”可逃過(guò)病毒監(jiān)測(cè)

閱讀 2799·2021-09-01 10:30
JQ筆記

閱讀 1689·2019-08-30 15:52
仿stackoverflow highlight.js 選用哪種editor ？

閱讀 978·2019-08-29 18:40
Css Sprite 圖片等比縮放圖片大小（background-size優(yōu)化Sprites圖顯示）

閱讀 1134·2019-08-28 18:30
JS騷操作之?dāng)?shù)組快速排序

閱讀 2404·2019-08-23 17:19
小程序云開發(fā)之初體驗(yàn)

閱讀 1332·2019-08-23 16:25
d3.js入門——selection與創(chuàng)建條形圖

閱讀 2710·2019-08-23 16:18
微信小程序發(fā)送模板消息！附前端+后端源碼~

閱讀 2987·2019-08-23 13:53

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

單頁(yè)應(yīng)用的部署方案

相關(guān)文章

用vue從零開發(fā)和部署一款移動(dòng)端pwa單頁(yè)應(yīng)用

**VUE單頁(yè)應(yīng)用首屏加載速度優(yōu)化方案**

**VUE單頁(yè)應(yīng)用首屏加載速度優(yōu)化方案**

**nginx + 一個(gè)端口部署多個(gè)單頁(yè)應(yīng)用（history模式）**

**nginx + 一個(gè)端口部署多個(gè)單頁(yè)應(yīng)用（history模式）**

發(fā)表評(píng)論

0條評(píng)論

yanbingyun1990

男|高級(jí)講師

TA的文章

Linux系統(tǒng)又遇新威脅!PRISM后門新變種“水滴”可逃過(guò)病毒監(jiān)測(cè)

JQ筆記

仿stackoverflow highlight.js 選用哪種editor ？

Css Sprite 圖片等比縮放圖片大小（background-size優(yōu)化Sprites圖顯示）

JS騷操作之?dāng)?shù)組快速排序

小程序云開發(fā)之初體驗(yàn)

d3.js入門——selection與創(chuàng)建條形圖

微信小程序發(fā)送模板消息！附前端+后端源碼~

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

單頁(yè)應(yīng)用的部署方案

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！