I've created a static website (using Hugo) that has links that look like http://www.example.com/post/my-post/. I upload the site to AWS (in an S3 bucket with CloudFront). When I point my browser to that URL, I get an AccessDenied error. But if I tack on "index.html", all is well.
I suspect there's some really obvious bit of config that I'm missing. Apologies, if this is a stupid question, but I couldn't think up an effective google search to find an answer.
Related
I have a static site that I served to s3 called tidbitstatistics.com
I wrote a script using boto3 to replace the files with new ones and since then, my site doesn't open - instead it downloads the index.html file.
From what I can tell, I didn't change any settings. The site was working fine before I re-uploaded the files. Since then, I deleted all the files and re-uploaded them manually, but I am still running into the same error.
I thought this might have to do with the file types, but they were the correct text/html file types when re-uploading manually and I am adjusting my script to specify file types when calling put_object instead of upload_file with boto3.
Static site hosting is turned on for that bucket and public permissions to read are set. I'm just not sure how s3 all of a sudden won't serve my static site.
I followed the answer here, but I don't see a Content-Disposition property.
Any help would be appreciated - web development is not my strong suit!
I have followed everything from the above link. By following the link .I had hosted my website on google cloud. My static website contains multiple pages(5 pages). In the hosted website I cant find images and other html pages except "index.html" page.
Can anyone please help me by letting me know how to host static website of multiple pages and letting me know how to keep my website secured?, so it would be very helpful for me.
https://codelabs.developers.google.com/codelabs/cloud-webapp-hosting-gcs#5
i think reason behind image is not loading is
you examine the file paths for your files, also be sure that you spelled the name of the image correctly.
refer this link for more details.
Since you didn't provide any more details I can only give you some pointers on what to focus on.
Create a bucket named www.yourdomain.com - www is very important unless you just want to use just yourdomain.com.
Change access permissions so everyone can read it's contents.
Upload your files to the main directory. When someone accesses the site first file that GCP will look for is index.html so make it your home page. Make sure you uploaded all of them. If the images in your page are stored in a folder (img, images etc) then upload that folder with the files inside to your bucket. From your description it looks like either you're missing them or they are in the wrong folder.
Obtain your own SSL certificate or use GCP's managed certificate (free of charge)
Set up a load balancer
Point your domain to your LB's external IP
At that point you're ready to go and your site is up & running.
If this is the first time you're doing it I recommend to start from readin official documentation on how to set up a static website in GCP.
You can access your site without using load balancer to check if it's running correctly by using a link in the format https://storage.googleapis.com/my-bucket/my-object. Have a look at the truobleshooting static websites to get more insight.
Have a look at my other answer covering this topic: https://stackoverflow.com/a/64442826/12257250
Alternatively you can try hosting your site using firebase.
I'm trying to get a prototype Next.js project up by doing a Static html export (i.e. next export) and then copying the generated output to AWS S3 and serving it via Cloudfront.
I've got the following two pages in the /pages directory:
index.tsx
Pricing.tsx
Then, following along from the routing doco I added a Link to the pricing page from the index page, like so:
<Link href="/Pricing">
<a>Pricing</a>
</Link>
This results in a link that looks like example.com/Pricing (when you hover over it and when you click the link, the page does change to the pricing page and the browser shows example.com/Pricing in the URL bar).
The problem is, that link is not real - it cannot be bookmarked or navigated to directly via the url bar.
The problem seems to be that when I do a next export, Next.js generates a .html file for each page, but the router doesn't use those .html suffixes.
So when using the site, if the user tries to bookmark example.com/Pricing; loading that bookmark later will fail because Cloudfront will return a 404 (because CF only knows about the .html file).
I then tried changing my Link to look like:
<Link href="/Pricing.html">
<a>Pricing</a>
</Link>
That causes the router to use example.com/Pricing.html and that works fine with Cloudfront - but it actually causes a 404 during local development (i.e. using next dev)!
Other workarounds I could try are renaming all the .html files and removing the extension before I upload them to S3 (and make sure they get a content-type: text/html header) - or introducing a Cloudfront lambda that does the renaming on the fly when .html resources are requested. I don't really want to do the lambda thing, but the renaming before uploading shouldn't be too difficult.
But it feels like I'm really working uphill here. Am I doing something wrong at a basic level? How is Next.js linking supposed to work with a static html export?
Next.js version: 9.5.3-canary.23
Alternate answer if you want your URLs to be "clean" and not have .html on the end.
To get Next.js default URL links working properly with S3/Cloudfront, you must configure the "add a trailing slash" option in your next.config.js:
module.exports = {
trailingSlash: true,
}
As per the documentation
export pages as index.html files and require trailing slashes, /about becomes /about/index.html and is routable via /about/. This was the default behavior prior to Next.js 9.
So now you can leave your Link definition as:
<Link href="/Pricing">
<a>Pricing</a>
</Link>
This causes Next.js to do two things:
use the url example.com/Pricing/ - note the / on the end
generate each page as index.html in it's own directory - e.g. /Pricing/index.html
Many HTML servers, in their default configuration, will serve up the index.html from inside the matching directory if they see a trailing / character in the URL.
S3 will do this also, if you have it set up to serve as a website and IFF you access the URL through the website endpoint, as opposed to the REST endpoint.
So your Cloudfront distribution origin must be configured as a Origin type = Custom Origin pointing at a domain something like example.com.s3-website.us-east-1.amazonaws.com, not as an S3 Origin.
If you have your Cloudfront/S3 mis-configured, when you hit a "trailing slash" style URL - you will probably see your browser download a file of type binary/octet-stream containing 0 bytes.
Edit: Beware pages with . characters, as per issue 16617.
Followup to Shorn's self-answer of using the as field in the next/link component. This worked for me, however it would fail if I refreshed the page I was on.
Instead, I used exportPathMap to link my pages to a page.html equivalent that would be created when running next export.
The downside of this approach is that when running next start, those .html files will not be created or accessible. They will, however, from next dev. As I am creating a purely static website, I've now just been using next dev.
While making this change I was validating by manually copying my built assets from next export into S3 and hosting in CloudFront as Shorn was doing -- I no longer do this to validate and haven't had issues so far.
If anyone knows, let me know what I else may be missing by ignoring next start as part of development. This solution has worked for me so far though.
After writing this question, I found a reasonable workaround - though I'm not sure if it's the "right" answer.
Change the Link to:
<Link href="/Pricing" as="/Pricing.html">
<a>Pricing</a>
</Link>
This seems to work in both local dev and for bookmarking the site as served by Cloudfront. Still feels kind of wonky though. I kind of like those non .html urls better too. Oh well, maybe I'll do the renaming workaround instead.
I want to list the object URLs of all files in my public bucket. I read all the documents about s3 and s3api, but I couldn't find what I was looking for.
I don't want to define the pre-sign URL. I want to list the existing URLs of all files in the folder.
I'm sorry I couldn't add code, but I have a very specific problem and I can't find my starting point.
I'd appreciate it if someone help.
Solution:
https://github.com/cagdasdemirer/AWS-S3-URL-Listing
I don't think there's a direct way to get the URLs of all the S3 files in bucket. This is how can do it:
List all the files in S3 using:
aws s3 ls s3://bucket-name/folder-name
Build a URL like this:
http://s3.amazonaws.com/bucket/key (for path-style URL), or
http://bucket.s3.amazonaws.com/key (for virtual-hosted style URL)
Store it in the folder.
This SO link may help you: https://stackoverflow.com/a/44401684/7541412
Let me know if it helped.
Thanks
I'm new to AWS.
But, I have an S3 Bucket containing a static website and it is hooked up to CloudFront. Originally, I had just a "under construction" HTML file. But since I removed it and actually added my website, I'm still seeing the old HTML.
If I browse to the cloudfront.net or the us-east-1.amazonaws.com I can see my full website. But its when I browse to my actual domain name when I see the old HTML.
I have changed the meta-data to to one hour and I also tried the same within CloudFront TTLs.
I also read that I had to invalidate my old file, which I did do but it doesnt seem to be doing anything.
Any suggestions would be appreciated!