In an attempt to host a (static) SPA app on Google Bucket Storage, I am wondering if it is possible at all, considering a typical SPA have dynamic routes.
For example, in a request to a SPA app:
www.myapp.com/user/jon
You would config the server to route such request to the index.html file,
or else it will throw a 404.
How can I configure Google Bucket to redirect all (even better if I get to specify) requests to the index.html in the bucket?
Have you looked at setting the website metadata attribute in your bucket:
https://cloud.google.com/storage/docs/static-website
Related
Our application is currently focus around one single domain, let's call it: mydomain.com
Currently, we have separate docker containers via cloud run serving microservices from nested path, such as:
mydomain.com/auth -> auth microservice cloud run container
mydomain.com/files -> storage bucket
mydomain.com/public -> public microservice cloud run container.
The issue I'm having is trying to run a static SPA published on firebase from the root of the domain.
mydomain.com -> firebase hosting.
However, there doesn't seem to be any option for this in the spec and load-balancing is listed as N/A in the documentation, which makes sense as they're static files served from a CDN.
Is there a way to achieve this via firebase?
Google LB rewrite engine is limited to only stripping fixed prefixes. For SPA app we need stripping variable suffixes instead. Fortunately bucket HTTP hosting engine allows rewrites of unknown URLs to error page:
gsutil web set -m index.html -e 404.html gs://web-stage/
If we replace 404.html with index.html we obtain classical SPA URL mapping:
gsutil web set -m index.html -e index.html gs://web-stage/
with only one downside: non-root virtual URLs are returned with HTTP code 404. It is not an error and should be ignored.
Thanks to #SebastianG! I saw 404 trick earlier but hesitated to implement it: Deploy SPA application on Google Cloud Storage using Load Balancer and CDN
Overall steps are:
gcloud alpha storage buckets create --location=europe-west1 gs://web-stage
gsutil iam ch allUsers:objectViewer gs://web-stage/
gsutil web set -m index.html -e index.html gs://web-stage/
npm install
npm run build
gsutil -m rsync -r build/ gs://web-stage/
plus you register your bucket as a default route in LB so unknown URLs trigger 404 handler in bucket's HTTP web server.
I'm trying to host a static site in S3 with ability to handle some dynamic content using Lambda/Api Gateway. Can't seem to be able to do that.
I want URLs to look like this:
example.com/index.html
example.com/images/*
example.com/css/*
example.com/api/* -> API Gateway
Also, when redirecting I'd like to keep the example.com as a root domain. I tried RoutingRules in S3, but redirects from the client. I need this to be transparent from the user, like proxying requests.
While Bob's answer is pretty neat for public websites and is simple but if you are looking for other alternates which can work for internal sites or don't want to use CDN, you can try following options.
Option 1 -
This is most common option people prefer. You just configure 2 different DNS hosts for static vs api.(Assuming you enable proper CORS for *.example.com)
example.com(S3) --> S3 static content
api.example.com(APIGateway) --> Lambda
Option 2 -
Example.com(APIGateway) --> /apigLambda -->Lambda
Example.com(APIGateway) --> /* --> S3 Bucket/S3 File.
API Gateway Configuration -
API Gateway S3 Backend Proxy -
Example API Urls -
https://xxx.execute-api.us-east-1.amazonaws.com/dev/apigLambda
https://xxx.execute-api.us-east-1.amazonaws.com/dev/myfilename.css
Reference -
https://docs.aws.amazon.com/apigateway/latest/developerguide/integrating-api-with-aws-services-s3.html
Note - In above reference Url, the bucket name is being accepted in Url Path but my example hides bucket name so users have no idea of S3 bucket name when they see API Gateway Url.
Option 3 -
As per your comment just use {proxy+} as resource for proxying S3 to support sub-folders calls but as you suggested, making just pass-through proxy doesn't give much options to transform HTTP response body which I believe still ok since you know your website content files.
You can configure this by putting a CloudFront distribution in front of both the API Gateway API and the S3 bucket for static content. This would also allow you to take advantage of CloudFront's edge caching.
I'm using API Gateway as a proxy to fan out requests to different services based on the requested url. For example, /api/${proxy+} is mapped to an EKS cluster with my REST api behind it. But everything that's not under /api is mapped to an S3 bucket with my static files. That's the /${proxy+} part as seen below. It's all working, except that when I request / it returns "Missing Authentication Token." Weird, because /${proxy} doesn't require API tokens or authentication of any kind.
My setup is shown below:
I have tried a variation where I added a method on "/" and return index.html specifically from that S3 bucket
I'm planning to host s3 website with following DNS.
S3 bucket name: example.com
S3 endpoint: example.com.s3-website.amazonaws.com
I also want to separate manual page for my service:
S3 bucket name: manual
S3 endpoint: manual.s3-website.amazonaws.com
When I enter example.com/manual, it should forward all request to my manual S3 but URL should not be changed.
For example, when I access, http://example.com/manual/en/index.html,
it should show manual.s3-website.amazonaws.com/en/index.html
but the URL should not be changed.
I tried to use redirection rules of 'Static website hosting' of bucket properties, but it just redirects to the my manual page (it changed the url).
And I'm using jekyll, but it doesn't support proxy forward unlike nginx.
Is there anything solution, guide, or example to refer?
It would be possible if you would use CloudFront. You don't have to change your S3-setup.
create an origin for each bucket
create a second Behavior for the manual path
And you're done.
I have a Cloud storage bucket with static files in it.
I have set up a load balancer with Cloud CDN enabled on the cloud bucket above.
When I go to the public_IP assigned in the load balancer I get an xml error message access denied as this is just an ip, not a landing page.
When I go to public_ip/index.html, then the website load.
EDIT (removing) :The content of the bucket will only be served by a sub-domain of an external domain name, that's why I can't name my bucket as the domain name.
It is possible to rename a bucket as a subdomain, and the landing page definition works, but the base question remains.
Is there a possibility to set the landing page for the IP address anyhow?
Yes, it's possible to configure a landing page for any Cloud Storage bucket using the gsutil command line tool. For example, the following command configures the landing page for the bucket named elving:
gsutil web set -m index.html gs://elving
Unfortunately, it's not currently possible to configure this using the Google Cloud Console. You must use the API directly or use a tool such as gsutil. You can find more information about gsutil at https://cloud.google.com/storage/docs/gsutil.