I just moved my static website to AWS S3 + Cloudfront & Route 43. Once I deployed my site I ran Lighthouse & Pagespeed Insights and I'm getting "Preconnect to required origins Error!".
Before I moved my site I was not getting this error, so I'm thinking it has something to do with my AWS configuration. Here is my preconnects in my index.html file.
<link rel="preconnect" href="//www.google-analytics.com" crossorigin>
<link rel="preconnect" href="//fonts.googleapis.com" crossorigin>
<link rel="dns-prefetch" href="//fonts.googleapis.com">
I'm not connecting to any other 3rd parties, only Analytics & Google font. Am I missing a preconnect to cloudfront? I searched for a couple days online and have not found anything yet, so I'm here.
If you make requests directly to your Cloudfront domain, then you will need to preconnect to it too.
I'm not positive but should your href tag values start with https?
Related
I'm hosting a static (NextJS) site on a GCP bucket, with my domain CNAME (let's say example.com) pointing to GCP. When Javascript is disabled, NextJS links in my generated content point to URLs like:
Page 1
but the actual file stored in the bucket is:
pages/1.html
which generates a 404 error when Javascript is disabled and <Link> doesn't capture the click.
I'm aware of the specialty page option MainPageSuffix in GCP, but I have it set as index.html and I don't think it can be set to rewrite someaddress to someaddress.html (and even if it could, it would not serve my root index.html corrctly when I point my browser to example.com)
I'm also aware of the as option in NextJS, but if I use it like:
<Link
href={`/pages/1`}
as={`/pages/1.html`}
>
it will not work when Javascript is enabled and I'm serving the site locally with npm run dev (I suppose it confuses <Link>?).
Is there any way to make this work? I'm using Next.js v13.0.7
(Alternatively, is there any other (free tier) option to host my site? I thought I could use Cloudflare Pages, but my static site has a lot of small pages - in the order of 100k - and Pages has a file limit of 20k)
I'm transitioning to serverless and trying to server all html/jpeg/png/css/js files in a GCP storage bucket, fronted by a GCP external HTTP/HTTPS load balancer.
HTML and images are served as their expected content-type, but CSS and JS files show this:
content-type: application/octet-stream
For Chrome, this appears to be a big problem because it will refuse to load the CSS with this error:
Resource interpreted as Stylesheet but transferred with MIME type application/octet-stream:
I have to work around it with by changing my HTML from this:
<link rel="stylesheet" type="text/css" href="css/main.css">
To this
<link rel="stylesheet" href="css/main.css">
Is there a way to have the GCP load balancer (or backend bucket) set the proper MIME type for JS and CSS files?
You can set the correct Content-Type using this gsutil command:
gsutil setmeta -h "Content-Type:text/css" "gs://mybucket/**/*.css"
The /**/* part will recursively check all files and folders in the bucket.
"No such key" error and image not fetched from Magento file system by Cloudfront if not found on S3
I am using Magento 1.9.3.4. I have came so across learning from here and configured cloudfront with my S3 bucket. (dint select S3 from drop down while creating distribution). I am using magento S3 extension for images from /media folder to S3 bucket.
I have also configured CNAME & custom SSL in cloudfront successfully.
Also i have updated magento secure and unsecure URLs with success by following this article
What i want to achieve is:-
I want to serve my magento /media folder static content through S3 & cloudfront.
My Understanding is:
S3 magento extension uploads /media folder's content to my S3 bucket. Now cloudfront use this S3 bucket images and show images in my product pages.
Problem:-
There are now 2 problems:
1) I have set below settings in ORIGIN details (so that if cloudfront don't find image in S3 bucket, it will get from my magento web server ), but still it is not working.
origin snippet
2) As a result of this may be, I am getting below error for some of product images
<html>
<head><title>404 Not Found</title></head>
<body>
<h1>404 Not Found</h1>
<ul>
<li>Code: NoSuchKey</li>
<li>Message: The specified key does not exist.</li>
<li>Key: media/catalog/product/cache/1/image/9df78eab33525d08d6e5fb8d27136e95/4/3/43795518xa63icyL.jpg</li>
<li>RequestId: D6FEF1331EC261CC</li>
<li>HostId: Rsyk57Bkwy86WpcqIBZXv22Qn6gOZjDbNPrqKbNKkC9yN7IF0QLEM2DJQqNSfXcrms2mqMCcMiw=</li>
</ul>
<hr/>
</body>
</html>
I have followed this SO article & this one and completely updated my cloudfront configuration as detailed by Michael - sqlbot in both answers.
I have also set Error Caching Minimum TTL (seconds) to 0 for 404 Error in error pages.
Now the status of the distribution is DEPLOYED after making all changes. Still problem is not solved.
Am i missing some settings or TTL/Keep alive settings or any troubleshooting will be really helpful.
I have a Django 1.4 webapp using storages.backends.s3boto.S3BotoStorage as the file storage backend to serve static files from AWS S3.
Everything works -- except admin static files. On inspection of the admin page source, it's clear the problem is coming from the admin static file URLs, for example for the admin's base.css stylesheet:
<link rel="stylesheet" type="text/css" href="https://watchdog_staticfiles.s3.amazonaws.com/admin/css/base.css?Signature=sFKzAavHHKYdJQVDGTwwSAyrrjc%3D&Expires=1387824617&AWSAccessKeyId=AKIAJAYZSKEJIVD52OCQ" />
The problem is the presence of the Signature, Expires, and AWSAccessKeyId URL parameters. With these there, the link leads to an access denied response from AWS. Without them, i.e. just going to the plain URL https://watchdog_staticfiles.s3.amazonaws.com/admin/css/base.css, there's no problem (as the file is set to be publicly readable).
These signature/expires/etc parameters are not being added to static URL links in my main webapp, just within the admin.
So my question is -- where are they coming from and how do I get rid of them?
So, I have 2 servers that serve pages. I am running ColdFusion on Windows Server 2003 with IIS6. I created the site and synchronized the files between the 2 servers. In the right hand side of my site is a popup div for the search. On Server1 in IE6, this div works perfectly, on server 2 it gets cut off. Due to the synchronization software used, I cannot have different files on the two servers.
Any help is appreciated.
Thanks
Your IE6 stylesheet if failing to load for the second site.
This URL works:
http://www.sdccc.org:81/styles/03-ie6-fix.css
This URL doesn't:
http://www.sdccc.org:82/styles/03-ie6-fix.css
Oddly, this only appears to occur in IE itself - verifying the links above in Chrome and both of them work.
Update:
The port 82 server is returning Content-Encoding: gzip and Vary: Accept-Encoding headers - the port 81 server is not.
I suspect this is a bug with IE not accepting the gzipped content?
Two equal documents in the same browser has to produce the same page:
As I can see the document produced by each servers are practically the same, except for the CSS stylesheet:
<LINK href="./sd81_files/01-ejungle.css" type="text/css" rel="stylesheet">
and
<LINK href="http://www.sdccc.org:82/styles/01-ejungle.css" type="text/css" rel="stylesheet">
Yes, you can say that the files are the same, but when I saved the files into my computer, the second one did not arrive. Check the link and try again.
I finally figured it out! It seems that 2 image files, for some reason, didn't have read permissions on them on the second server:
/images/search_04_drop_04-ie6.png
/images/search_jason_04-ie6.png
updated the permissions and it started working.
Thanks for all of your help in this.