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

資訊專欄INFORMATION COLUMN

nginx部署前端SPA應(yīng)用實(shí)踐

gotham / 1490人閱讀

摘要：隨著，的普及，前后端分離之后，多采用為靜態(tài)服務(wù)器，并用對做反向代理，以實(shí)現(xiàn)前端應(yīng)用的部署。

隨著react，vue的普及，前后端分離之后，多采用nginx為靜態(tài)服務(wù)器，并用nginx對api做反向代理，以實(shí)現(xiàn)前端SPA應(yīng)用的部署。
nginx location 匹配規(guī)則

~ 波浪線表示執(zhí)行一個(gè)正則匹配，區(qū)分大小寫

~* 表示執(zhí)行一個(gè)正則匹配，不區(qū)分大小寫

^~ 表示普通字符匹配，如果該選項(xiàng)匹配，只匹配該選項(xiàng)，不匹配別的選項(xiàng)，一般用來匹配目錄

= 進(jìn)行普通字符精確匹配

@ 定義一個(gè)命名的 location，使用在內(nèi)部定向時(shí)，例如 error_page, try_files

browserHistory 模式的刷新問題

browserHistory 路由模式下，使用history api可以在前端進(jìn)行頁面跳轉(zhuǎn)，但是刷新的話，就需要對鏈接進(jìn)行一個(gè)修復(fù)（重定向）
我們可以使用nginx 的 try_files 來實(shí)現(xiàn)：

location / {
    root /code/app1/build;
    index index.html index.htm;
    try_files $uri $uri/ /index.html;
}
location ^~ /app {
    alias /code/app2/build;
    index index.html;
    try_files $uri $uri/ /app/index.html;
}
location ^~ /api/ {
  proxy_pass http://api.site;
}

webpackDevServer的重定向配置

const basename = "/app";
devServer: {
    proxy: {
        "/api": {
            target: "http://api.site",
            changeOrigin: true,
            secure: false
        }
    },
    publicPath: basename,
    host: HOST,
    port: PORT,
    inline: true,
    historyApiFallback: {
        rewrites: [
            { from: new RegExp(`^${basename}`), to: `${basename}/index.html` },
            { from: /./, to: basename }
        ]
    },
    disableHostCheck: true,
    contentBase: path.join(__dirname, "build")
}
多個(gè)SPA的部署與重定向

首先約定發(fā)布代碼目錄如下:

/publish_webapp/
|-- app1/
    |-- index.html
    |-- static
|-- app2/
    |-- index.html
    |-- static

nginx 配置：

location ~* ^/(w+) {
    root /publish_webapp/;
    index index.html;
    try_files $uri $uri/ $uri/index.html /$1/ /$1/index.html;
}
開啟gzip 
gzip  on;
gzip_types    text/plain application/javascript application/x-javascript text/javascript text/xml text/css;

配合webpack在打包的時(shí)候壓縮靜態(tài)文件，使用webpack插件compression-webpack-plugin
由于在部署至nginx服務(wù)器之前使用了webpack生成了gizp壓縮之后的文件，所以就不用使用nginx來壓縮靜態(tài)js了，nginx只需要配置，直接使用gzip之后的文件即可。

配置gzip_static

gzip_static on;
The ngx_http_gzip_static_module module allows sending precompressed files with the “.gz” filename extension instead of regular files.

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

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

相關(guān)文章

  • nginx部署前端SPA應(yīng)用實(shí)踐

    摘要：隨著，的普及，前后端分離之后，多采用為靜態(tài)服務(wù)器，并用對做反向代理，以實(shí)現(xiàn)前端應(yīng)用的部署。 隨著react，vue的普及，前后端分離之后，多采用nginx為靜態(tài)服務(wù)器，并用nginx對api做反向代理，以實(shí)現(xiàn)前端SPA應(yīng)用的部署。 nginx location 匹配規(guī)則 ~ 波浪線表示執(zhí)行一個(gè)正則匹配，區(qū)分大小寫 ~* 表示執(zhí)行一個(gè)正則匹配，不區(qū)分大小寫 ^~ 表示普通字符匹配，...

    Aomine 評論0 收藏0

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

    摘要：所以單頁應(yīng)用的部署，需要將所有的頁面請求都返回，瀏覽器下載了后會自動(dòng)解析并導(dǎo)航到對應(yīng)頁面?？偨Y(jié)單頁應(yīng)用與以前的常規(guī)多頁面應(yīng)用還是有區(qū)別的，開發(fā)過程與后端解耦了，同時(shí)會出現(xiàn)跨域鑒權(quán)以及應(yīng)用部署的問題。 本文同步發(fā)布于我的個(gè)人博客上 - 單頁應(yīng)用的部署方案 本文主要簡單講一下單頁應(yīng)用的開發(fā)及部署方法，默認(rèn)你懂一些服務(wù)端知識及nginx知識，如果有任何可以在下方評論留言。 單頁應(yīng)用 SPA（...

    yanbingyun1990 評論0 收藏0

  • 可能是你見過最完善的微前端解決方案

    摘要：而從技術(shù)實(shí)現(xiàn)角度，微前端架構(gòu)解決方案大概分為兩類場景單實(shí)例即同一時(shí)刻，只有一個(gè)子應(yīng)用被展示，子應(yīng)用具備一個(gè)完整的應(yīng)用生命周期。為了解決產(chǎn)品研發(fā)之間各種耦合的問題，大部分企業(yè)也都會有自己的解決方案。 原文鏈接：https://zhuanlan.zhihu.com/p/... Techniques, strategies and recipes for building a modern ...

    Kahn 評論0 收藏0

  • React工程實(shí)踐：基于React、Redux、React-Router的前端腳手架

    摘要：項(xiàng)目地址基于和的前端腳手架。目錄前言特性環(huán)境開始工程結(jié)構(gòu)開發(fā)調(diào)試單元測試靜態(tài)部署相關(guān)文檔致謝前言如果你是一個(gè)初學(xué)者，這個(gè)項(xiàng)目可以是很好的教程。單元測試新增一個(gè)單元測試，你只需在中創(chuàng)建文件。在腳手架中用于擴(kuò)展服務(wù)和代理。 項(xiàng)目地址: https://github.com/YutHelloWo... 基于React、Redux、[email protected]、webpack和reacts...

    wangbjun 評論0 收藏0

  • 嘗試 Docker + Nginx 部署單頁應(yīng)用

    摘要：開發(fā)到部署，親力親為當(dāng)我們開發(fā)一個(gè)單頁面應(yīng)用時(shí)，執(zhí)行完構(gòu)建后會生成一個(gè)在目錄，那怎么把這個(gè)部署到服務(wù)器上呢目錄結(jié)構(gòu)前端構(gòu)建完的靜態(tài)文件鏡像所需的配置文件配置挑幾點(diǎn)配置講講，先是壓縮資源，以節(jié)省帶寬和提高瀏覽器加載速度雖然已經(jīng)支持在構(gòu)建時(shí)就生 開發(fā)到部署，親力親為 當(dāng)我們開發(fā)一個(gè)單頁面應(yīng)用時(shí)，執(zhí)行完構(gòu)建后 npm run build 會生成一個(gè) index.html 在 dist 目錄，...

    sf190404 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<