How does one serve multiple static pages from a single S3 bucket? - amazon-web-services

Let's assume one has an Amazon S3 bucket example.com configured for static hosting. In the configuration, the console allows setting an index file and an optional error file. But I'm struggling to figure out how to add another page to the site. I thought this would be straight forward but I cannot find the answer in the official documentation or on the internet.
If I want to add one more page to the static site (e.g. example.com/page2) and there is a page2.html file already in the S3 bucket at the root, where is the correct place to make this routing configuration? Can it be done through the S3 console? Or does it need to be configured through some kind of a DNS record? As a further complication, this needs to also work with and without the www in the URL.
On the DNS side I currently have the following configuration:
CNAME | WWW | www.example.com.s3-website-east-1.amazonaws.com | TTL 30 min
URL Redirect Record | # | http://www.example.com unmasked

Are you trying to access the page at example.com/page2.html or example.com/page2
If you want to access the page at example.com/page2 then create a 'folder' called page2 off the root and in that folder put a file called index.html
If you want to use example.com/page2.html, then create a file called page2.html and put it in the 'root' of the bucket.

Simply create a file called page2.html. It will be accessible via example.com/page2.html.
No routing configuration is required.
The index file alias is only used if no page is specified (eg they go to example.com/).
As for mapping www.example.com to example.com, you would create another bucket with the name www.example.com and use "Redirect requests" to point back to example.com. (If using a CNAME works for you, that's probably easier, but test it first to see if it functions as expected. See: Mapping naked domain (www.domain.com) to static website which is saved in S3)
See: Configuring a static website using a custom domain registered with RouteĀ 53 (Follow the manual steps rather than automating via CloudFormation, so you can better understand what has been configured)

Related

AWS Route 53 Domain Point To Github Pages

I am new to working with AWS and route 53 so any help is appreciated.
I have created an organization on GitHub, and then created a simple repository for a static site to display with Github pages. this is working as expected and I can see the static site at the URL generated by Github (something like: https://<githubOrgName>.github.io/<repoName>/)
I got a domain from AWS and now I'm trying to set it up so the apex domain (e.g. "my-domain.com") points to the Github pages site.
I followed the instructions found at: https://docs.github.com/en/pages/configuring-a-custom-domain-for-your-github-pages-site/about-custom-domains-and-github-pages ... but it doesn't seem to be working.
I am trying to make it so that the apex domain points to the repository Github page. something like:
https://my-domain.com -> https://<githubOrgName>.github.io/<repoName>/
... but this only shows a blank screen when I go to the root domain ("my-domain.com"). I have also tried to go to https://my-domain.com/<repoName>/... but this shows me a Github 404 page (so it seems to be correctly forwarding something to Github):
my AWS route 53 configuration is similar to the following (i have tried to remove sensitive details):
can anyone explain to me what I am doing wrong? I am new to working with domains so any help is appreciated.
Using Route53 alone won't help you there, because your target URL contains a URL path i.e. /<repoName>/.
DNS is a name resolution system and knows nothing about HTTP
Furthermore, the origin server (github.io) might be running a reverse proxy which might be parsing the request headers, among which is the Host header. You browser automatically sets this header to the url you feed it. Eventually, you send it the wrong header (i.e. https://my-domain.com/), which Github cannot process. You can explicitly set this header (e.g. via curl) to what Github is expecting, but I believe it's not what you and your users would like.
Instead, you could try using layer 7 redirects (301/302) with the help of Lambda#Edge (provided by AWS CloudFront). I have created a simple solution using the Serverless framework, which does the following redirects:
https://maslick.tech -> https://github.com/maslick
https://maslick.tech/cv -> https://www.linkedin.com/in/maslick/
https://maslick.tech/qa -> https://stackoverflow.com/users/2996867/maslick
https://maslick.tech/ig -> https://www.instagram.com/maslick/
But you can customize it by adjusting handler.js according to your needs. You might also need to create a free TLS certificate using AWS Certificate Manager in the us-east-1 region and attach it to your CloudFront distribution. But this is optional.
Lambda#Edge will give low latencies, since your redirects will be served from CloudFront's edge locations across the globe.
How I got it to work was:
Set a CNAME record from example.org to <USERNAME>/github.io. in the Route 53 console
Set Custom domain to example.org in the Github Pages settings for github.com/<USERNAME>/<REPO>
Note: You shouldn't be setting the CNAME record to <USERNAME>/github.io/<REPO>
Source: https://deanattali.com/blog/multiple-github-pages-domains/

Configuring Google Cloud Load Balancer path rules

I'm trying to configure the Google Cloud loadbalancer to do the following:
I have a website running on a Wordpress machine in a VM instance which I want users to access when they enter outairnet.com.
And I have a separate html file that I want users to access when they access outairnet.com/map.
WP is running on a compute engine VM, connected to a VM instance and to a backend service. The seperate html file is on a service bucket, connected to a backend bucket.
I've triedd to configure a very simple path forwarding rule, which made sense to me. But it just adds up to anyone trying to access outairnet.com/* gets to the WP (which is fine)
but accessing outairnet.com/map doesn't point to the storage bucket with the html file, however accessing outairnet.com/index.html does point to the separate html file.
My LB config looks like this.
I think I'm on to the problem but still can't solve it.
it looks like google console adds a /* rule even when I try to delete it.
so its a /* path rule that catches everything despite having a more specific rule like /mypath/* in addition.
but after removing it is just readded automatically for some reason. why?
It's possible - there are a few steps involved such as creating a bucket with your static page, adding it as a backend service in your load balancer and creating a new path-rule in it to redirect the requests.
And now the details:
Create a new bucket - pick the name you like (outairnet-static or something that will be meaningful to you so you don't delete by accident). You can ignore all the tutorials telling that it has to have the exact name of your domain - since it will only be hosting a file accessible under outairnet.com/mylink/ it will work regardless of the name used. I tested it.
Create a directory in your bucket named exactly ax the path under which you want it to be. If you want outairnet.com/mylink/ then directory's name has to be mylink. Upload your files into that directory. Name your main index file index.html unless you want to provide full file path.
Make the bucket avaialble to everyone.
Go to your LB configuration and edit backend services; add a new backend bucket.
Go to your Host and Path Rules and configure a new path; Enter the name of your site and the path (Remember that the path value must be /mylink/*.) and select the bucket you've just created from the dropdown list.
No changes necessary for the frontend. Save the changes and in a few moments it should be working.
I just added another path rule with just "/" directing to the VM and it seemed to do it, but now the only glitch is www.outairnet.com/map is fine but outairnet.com/map without www directs to the vm and not the bucket

Regular expressions in GCLB Url Map

I need to create the following rules in Google cloud load balancer:
/en/example
/ar/example
/.../example
Such as the 2 letters represents a locale.
I couldn't find a way to setup regular expressions in the load-balancer url-map.
How could this be achieved?
I was able to create fallowing environment:
Domain: example.com
Three buckets: www.example.com, example-en and example-ar. All three publicly accessible for read;
www.example.com contains index.html file in the main directory
example-en contains index.html file in the /en/ directory
example-ar contains index.html file in the /ar/ directory
Each bucket required setting up index page to work:
gsutil web set -m index.html gs://www.example.com/
Setting website configuration on gs://www.example.com/...
gsutil web set -m index.html gs://example.en/
Setting website configuration on gs://example.en/...
gsutil web set -m index.html gs://example.ar/
Setting website configuration on gs://example.ar/...
I configured HTTPTS load balancer (with GCP's managed SSL certificate) for example.com and 'www.example.com`.
Backend services & backend buckets contain three above buckets.
Host and path rules are configured that:
if you go to www.example.com you will get index.html from www.example.com bucket
if you go to www.example.com/en/ you will get index.html from example-en bucket
if you go to www.example.com/ar/ you will get index.html from example-ar bucket
You can redirect any path to any bucket you want, the only requirement is that the redirected path must match the path in the bucket (otherwise it won't work). You can also use subdomains and redirect them to other buckets. It's possible to add new services and paths to existing LB so you can make changes later on.
Let me know if this answers your question.
Last thing is setting up a front-end (one for port 80 and one for 443 with SSL encryption).
You can also have a look at the Path Matcher documentation which will give you some more ideas.
Regex is not available in GLB at this time
We can only use path based request route to the backend services(instance group / bucket)
Reference:
Path rules do not use regular expression or substring matching.
Source: https://cloud.google.com/load-balancing/docs/url-map-concepts#pm-constraints

Amazon S3 redirects to /index.html not root of page

I have two sites statically hosted at S3.
Site example-one.com should redirect to example-two.com.
I added a redirect in the S3 bucket for example-one.com.
Like shown in the picture below.
Problem: entering example-one.com results in example-two.com/index.html
Question: How can I make it redirect to **example-two.com and not example-two.com/index.html ?**
When I access example-two.com directly it results in example-two.com as intended.
example-two.com has the S3 static site setting index document given as index.html
I use CloudFront for both domains. They previously had set the setting default root object as index.html, however I removed this earlier today so it's blank now.
To see it live access the link
Please specify if further details are needed :-)

AWS S3 Redirect only works on bucket as a subdomain not bucket as a directory

Many people have received 100s of links to PoCs that are on an internal facing bucket and the links are in this structure.
https://s3.amazonaws.com/bucket_name/
I added a redirect using AWS's Static website hosting section in Properties and it ONLY redirects when the domain is formatted like this:
https://bucket_name.s3-website-us-east-1.amazonaws.com
Is this a bug with S3?
For now, how do I make it redirect using both types of links? My current workaround is to add a meta redirect tag in each html file.
The s3-website is the only endpoint that supports redirects unfortunately. Using the s3.amazonaws.com supposes that you will be using S3 as a storage layer, instead of a website. If the link is to a specific object, you can place an HTML file at that url with a JS redirect, but other than that there is really no way to achieve what you are trying to do.
In the future, i would recommend always setting up a Cloudfront distribution for those kinds of usecases, as that will allow you to change the origin later on.