跟着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.