nginx部署前端SPA应用实践

gotham 发布于2019-07-25 14:10 / 1190人阅读

摘要：随着，的普及，前后端分离之后，多采用为静态服务器，并用对做反向代理，以实现前端应用的部署。

随着react，vue的普及，前后端分离之后，多采用nginx为静态服务器，并用nginx对api做反向代理，以实现前端SPA应用的部署。

nginx location 匹配规则

~ 波浪线表示执行一个正则匹配，区分大小写

~* 表示执行一个正则匹配，不区分大小写

^~ 表示普通字符匹配，如果该选项匹配，只匹配该选项，不匹配别的选项，一般用来匹配目录

= 进行普通字符精确匹配

@ 定义一个命名的 location，使用在内部定向时，例如 error_page, try_files

browserHistory 模式的刷新问题

browserHistory 路由模式下，使用history api可以在前端进行页面跳转，但是刷新的话，就需要对链接进行一个修复（重定向）
我们可以使用nginx 的 try_files 来实现：

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的部署与重定向

首先约定发布代码目录如下:

/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在打包的时候压缩静态文件，使用webpack插件compression-webpack-plugin
由于在部署至nginx服务器之前使用了webpack生成了gizp压缩之后的文件，所以就不用使用nginx来压缩静态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.

专线服务云服务器部署前端到云服务器nginx nginx高级应用 spa nginx部署https

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/39794.html

nginx部署前端SPA应用实践

摘要：随着，的普及，前后端分离之后，多采用为静态服务器，并用对做反向代理，以实现前端应用的部署。随着react，vue的普及，前后端分离之后，多采用nginx为静态服务器，并用nginx对api做反向代理，以实现前端SPA应用的部署。 nginx location 匹配规则 ~ 波浪线表示执行一个正则匹配，区分大小写 ~* 表示执行一个正则匹配，不区分大小写 ^~ 表示普通字符匹配，...

Aomine 2019-08-26 11:40 评论0 收藏0
单页应用的部署方案

摘要：所以单页应用的部署，需要将所有的页面请求都返回，浏览器下载了后会自动解析并导航到对应页面。总结单页应用与以前的常规多页面应用还是有区别的，开发过程与后端解耦了，同时会出现跨域鉴权以及应用部署的问题。本文同步发布于我的个人博客上 - 单页应用的部署方案本文主要简单讲一下单页应用的开发及部署方法，默认你懂一些服务端知识及nginx知识，如果有任何可以在下方评论留言。单页应用 SPA（...

yanbingyun1990 2019-07-25 14:45 评论0 收藏0
可能是你见过最完善的微前端解决方案

摘要：而从技术实现角度，微前端架构解决方案大概分为两类场景单实例即同一时刻，只有一个子应用被展示，子应用具备一个完整的应用生命周期。为了解决产品研发之间各种耦合的问题，大部分企业也都会有自己的解决方案。原文链接：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的前端脚手架

摘要：项目地址基于和的前端脚手架。目录前言特性环境开始工程结构开发调试单元测试静态部署相关文档致谢前言如果你是一个初学者，这个项目可以是很好的教程。单元测试新增一个单元测试，你只需在中创建文件。在脚手架中用于扩展服务和代理。项目地址: https://github.com/YutHelloWo... 基于React、Redux、React-Router@3.x、webpack和reacts...

wangbjun 2019-08-20 18:27 评论0 收藏0
尝试 Docker + Nginx 部署单页应用

摘要：开发到部署，亲力亲为当我们开发一个单页面应用时，执行完构建后会生成一个在目录，那怎么把这个部署到服务器上呢目录结构前端构建完的静态文件镜像所需的配置文件配置挑几点配置讲讲，先是压缩资源，以节省带宽和提高浏览器加载速度虽然已经支持在构建时就生开发到部署，亲力亲为当我们开发一个单页面应用时，执行完构建后 npm run build 会生成一个 index.html 在 dist 目录，...

sf190404 2019-06-28 17:04 评论0 收藏0