简体   繁体   English

将 brotli 与 AWS Cloudfront + S3 一起使用

[英]Using brotli with AWS Cloudfront + S3

I'm deploying a React App using Cloudfront and S3 and I would like to enable brotli for compression.我正在使用 Cloudfront 和 S3 部署 React 应用程序,我想启用 brotli 进行压缩。 I've seen some tutorials that address this problem using lambda@edge.我看过一些使用 lambda@edge 解决这个问题的教程。 The behavior configuration for my Cloudfront distribution is the following我的 Cloudfront 发行版的行为配置如下

在此处输入图像描述

I also have the 'Compress Objects Automatically' option set to 'No'.我还将“自动压缩对象”选项设置为“否”。 I have associated the two following lambda functions for origin requests and viewer requests, respectively:我已将以下两个 lambda 函数分别用于源请求和查看器请求:

  • origin request:来源请求:

 'use strict'; /** * Funciton registered on 'Origin Request' CloudFront Event */ exports.handler = (event, context, callback) => { const request = event.Records[0].cf.request; console.log(JSON.stringify(request)); const headers = request.headers; const isBr = headers['x-compression'] && headers['x-compression'][0].value === "br"; const isGzip = headers['x-compression'] && headers['x-compression'][0].value === "gzip"; /** * Update request path based on custom header */ let extension = ""; if(isBr) extension = ".br"; else if(isGzip) extension = ".gzip"; request.uri = request.uri + extension; callback(null, request); };

  • viewer request:观众要求:

 'use strict'; /** * Funciton registered on 'Viewer Request' CloudFront Event */ exports.handler = (event, context, callback) => { const request = event.Records[0].cf.request; const headers = request.headers; console.log(JSON.stringify(request)); /** * Detect if brotli is supported by the browser. * Pass a custom header x-compression to be captured by the lambda in the origin-request phase. */ if(headers['accept-encoding'] && headers['accept-encoding'][0].value.indexOf('br') > -1) { headers['x-compression'] = [{ key: 'X-Compression', value: 'br' }]; } else if(headers['accept-encoding'] && headers['accept-encoding'][0].value.indexOf('gzip') > -1){ headers['x-compression'] = [{ key: 'X-Compression', value: 'gzip' }]; } callback(null, request); };

When I tried to open the app using Cloudfront's domain name in the browser in throws an Uncaught SyntaxError: illegal character in bundle.js:1.当我尝试在浏览器中使用 Cloudfront 的域名打开应用程序时,会抛出 Uncaught SyntaxError:bundle.js:1 中的非法字符。 However, when I use S3's endpoint for opening the app it works perfectly.但是,当我使用 S3 的端点打开应用程序时,它运行良好。 The following is my webpack.config.js :以下是我的webpack.config.js

 const path = require('path'); const autoprefixer = require('autoprefixer'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const CompressionPlugin = require('compression-webpack-plugin'); module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, 'dist'), filename: 'bundle.js', chunkFilename: '[id].js', publicPath: '' }, resolve: { extensions: ['.js', '.jsx'] }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/ }, { test: /\.css$/, exclude: /node_modules/, use: [ { loader: 'style-loader' }, { loader: 'css-loader', options: { modules: { localIdentName: "[name]__[local]___[hash:base64:5]", }, sourceMap: true } }, { loader: 'postcss-loader', options: { ident: 'postcss', plugins: () => [ autoprefixer({}) ] } } ] }, { test: /\.(png|jpe?g|gif)$/, loader: 'url-loader?limit=10000&name=img/[name].[ext]' } ] }, plugins: [ new HtmlWebpackPlugin({ template: __dirname + '/src/index.html', filename: 'index.html', inject: 'body' }), new CompressionPlugin({ filename: '[path].gz', threshold: 0, minRatio: 2, test: /\.(js|css)$/i }), new CompressionPlugin({ filename: '[path].br', algorithm: 'brotliCompress', threshold: 0, minRatio: 2, test: /\.(js|css)$/i, compressionOptions: {level: 11} }) ] };

I've placed my code in this GitHub repo (I've also uploaded the dist/ directory which is the one I upload to S3 for the deployment).我已将我的代码放在此 GitHub 存储库中(我还上传了 dist/ 目录,这是我上传到 S3 以进行部署的目录)。 I'm new to this technologies so I ran out of ideas.我是这项技术的新手,所以我没有想法。 I also tried adding.html and.png extensions to the plugins constructors in the Webpack configuration file but that didn't work either.我还尝试在 Webpack 配置文件中的插件构造函数中添加 .html 和 .png 扩展名,但这也不起作用。 Any help would be appreciated, thanks in advance任何帮助将不胜感激,在此先感谢

CloudFront now supports Brotli edge compression. CloudFront 现在支持 Brotli 边缘压缩。 You can set Compress Objects Automatically to 'Yes' and eliminate the Lambda@Edge function.您可以将自动压缩对象设置为“是”并消除 Lambda@Edge function。 CloudFront will take your uncompressed files from S3 and can compress cacheable requests to Brotli or Gzip at the edge for you. CloudFront 将从 S3 获取您的未压缩文件,并可以在边缘为您将可缓存的请求压缩到 Brotli 或 Gzip。

See here for specific configuration docs: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html具体配置文档请参见此处: https://docs.aws.amazon.com/AmazonCloudFront/latest/DeveloperGuide/ServingCompressedFiles.html

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM