nginx布置前端SPA运用实践

2024年3月8日 160次阅读 来源: Jere 
跟着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.

    原文作者：Jere
    原文地址: https://segmentfault.com/a/1190000013218418
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞