nginx部署前端SPA應用實踐

Aomine 發(fā)布于2019-08-26 11:40 / 1397人閱讀

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

隨著react，vue的普及，前后端分離之后，多采用nginx為靜態(tài)服務器，并用nginx對api做反向代理，以實現(xiàn)前端SPA應用的部署。

nginx location 匹配規(guī)則

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

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

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

= 進行普通字符精確匹配

@ 定義一個命名的 location，使用在內部定向時，例如 error_page, try_files

browserHistory 模式的刷新問題

browserHistory 路由模式下，使用history api可以在前端進行頁面跳轉，但是刷新的話，就需要對鏈接進行一個修復（重定向）
我們可以使用nginx 的 try_files 來實現(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")
}

多個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在打包的時候壓縮靜態(tài)文件，使用webpack插件compression-webpack-plugin
由于在部署至nginx服務器之前使用了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.

GPU云服務器云服務器部署前端到云服務器nginx nginx高級應用 spa nginx部署https

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

轉載請注明本文地址：http://systransis.cn/yun/107334.html

nginx部署前端SPA應用實踐

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

gotham 2019-07-25 14:10 評論0 收藏0
單頁應用的部署方案

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

yanbingyun1990 2019-07-25 14:45 評論0 收藏0
可能是你見過最完善的微前端解決方案

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

Kahn 2019-08-26 14:04 評論0 收藏0
React工程實踐：基于React、Redux、React-Router的前端腳手架

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

wangbjun 2019-08-20 18:27 評論0 收藏0
嘗試 Docker + Nginx 部署單頁應用

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

sf190404 2019-06-28 17:04 評論0 收藏0