Brotli not being served with AWS amplify but gzip files are - amazon-cloudfront

I'm using Aws amplify to host a vue3 app, I have got webpack bulding the .gz & .br files, have updated my redirect in aws amplify to </^[^.]+$|.(?!(gz|br|css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>
so as gz and br are included. So gzip file are now being served but its not serving brotli files, the amplify cloudfront is setup to enable both gzip and brotli, so i'm stumped as to whats wrong, would anyone know why?

Related

Is there a way to access a private .zip S3 object with a django app's .ebextension config file deployed on elastic beanstalk

We have a django app deployed on elastic beanstalk, and added a feature that accesses an oracle DB. cx-Oracle requires the Oracle client library (instant client), and we would like to have the .zip for the library available as a private object in our S3 bucket, public object is not an option. We want to avoid depending on an Oracle link with wget. I am struggling to develop a .config file in the .ebextensions directory that will install the .zip S3 any time it is deployed. How can was set-up the config to install on deployment?
os: Amazon Linux AMI 1
Sure that is a common practice to get your private files from s3.
You need to have IAM permission (on EB cluster) to access your s3 bucket and download files.
The config in .ebextensions can look something like this:
container_commands:
install:
command: |
#!/bin/bash -xe
aws s3 cp s3:/bucket-name/your-file local-filename
Just like a friendly suggestion, EB is ok to start with but if your app will go to production you will run on some problems (like cannot enforce some ports to not be opened etc) and maybe there are some better options for you to host your app (ECS, EKS etc)

AWS ElasticBeanstalk Amazon Linux 2 .platform folder not copying NGINX conf

I've been moving over to ElasticBeanstalk using Amazon Linux 2 and I'm having a problem overwriting the default nginx.conf file. I'm following the AL2 docs for the reverse proxy.
They say, "To override the Elastic Beanstalk default nginx configuration completely, include a configuration in your source bundle at .platform/nginx/nginx.conf:"
My apps folder structure
When I run my deploy though, I get the error
CommandService Response: {"status":"FAILURE","api_version":"1.0","results":[{"status":"FAILURE","msg":"Engine execution has encountered an error.","returncode":1,"events":[{"msg":"Instance deployment: Elastic Beanstalk ignored your '.ebextensions/nginx' configuration directory. To include these configuration files, move them to '.platform/nginx'.","timestamp":1598554657,"severity":"WARN"},{"msg":"Instance deployment failed. For details, see 'eb-engine.log'.","timestamp":1598554682,"severity":"ERROR"}]}]}
The main part of the error is
"Elastic Beanstalk ignored your '.ebextensions/nginx' configuration directory. To include these configuration files, move them to '.platform/nginx'.""
Which I'm confused about because this is where I've put the file/folder.
I've tried completely removing the .ebextensions folder and got the same error.
I've tried starting from a completely fresh beanstalk environment and still got that error. I'm not understanding how beanstalk is managing this.
Based on the comments.
The issue was caused by duplicate locations of the nginx config file. This was due to deleting the nginx default path in .ebextensions, while EB re-creating it.
Since this seems as a bug, AWS support ticked was created.

How to serve static files with nginx after using npm run build with webpack

after generating a development build with npm run build i get the message saying
"Tip: built files are meant to be served over an HTTP server.
Opening index.html over file:// won't work."
What is the best way to do this with nginx? Currently to test it i am using an npm module called serve.
Also, if i got to my homepage at mydomain.com and search for a user, everything works like it is supposed to, redirecting me to mydomain.com/users/brad but if i then do a url search formydomain.com/users/brad i get a not found error, any help is appreciated!
In my case, when I have to serve static content with nginx, it often looks like :
location /static {
alias $myroot/staticfiles;
}
Also, if you haven't already, read the NginX guide to Serving Static Content.
If your are familiar with the Docker technology i would recommend to use a Docker Nginx Container and add your static content from the Webpack Buildflow to your container (this can be automated with a build server). Have a look at the following Docker Image from Nginx: https://hub.docker.com/_/nginx/.
Otherwise you have to install nginx on your Server where you host your Homepage. For this have a look at your Server OS and reach out to the web for a detailed nginx setup for your server. Without any configurations nginx will serve the static content on Linux-like server from /usr/share/nginx/html
If you only have FTP Access to your server you can transfer your built files via FTP/SFTP to a specific folder e.g /myHomepage and then your static content is server from yourdomain.de/myHompage.

Caddy webserver Brotli example

I was trying to deploy my angular2 app with brotli compressed distribution to Caddy webserver.
Are there any examples for the caddy webserver with Brotli compression support?
Caddy currently only serves pre-compressed Brotli files.
So first make sure you have an installation of Google's Brotli tool.
Then generate Brotli-compressed copies of your files with
/path/to/bro --input example.html --output example.html.br
Please note: Make sure to not delete the original.
Caddy will automatically serve the Brotli version where available and the raw version otherwise, it would also be helpful to do the same with pre-compressed gzip, though Caddy can also gzip-compress on the fly.

AWS Elastic Beanstalk - Request Entity Too Large (413)

I am trying to deploy a Node-based web service to elastic beanstalk but running into problems when posting too much data. The issue seems to be at the nginx layer, not the Node / express layer. The message I get is:
<html>
<head><title>413 Request Entity Too Large</title></head>
<body bgcolor="white">
<center><h1>413 Request Entity Too Large</h1></center>
<hr><center>nginx/1.6.2</center>
</body>
</html>
Based on other answers on StackOverflow, I added a folder to the root of my project called .ebextensions and a file inside called nginx.config. The contents of this file are:
files:
"/etc/nginx/conf.d/proxy.conf" :
mode: "000755"
owner: root
group: root
content: |
client_max_body_size 50M;
I deployed this along with my node application and even restarted the app server. So far it seems to have no effect. Am I doing something wrong?
I figured out what the issue was. The .ebextensions folder was hidden in my file system and was not being included in my deployment ZIP when I published to AWS.
This didn't work for me. Instead, I created a proxy.conf file with just
client_max_body_size 10M;
in it. I put it in a folder named <root>/.platform/nginx/conf.d, zipped it, redeployed it, and all was well. I got this approach from the "Reverse Proxy Configuration | Configuring nginx" section of this page.

Resources