serverless express/jade website on AWS - amazon-web-services

I am new to serverless, and try to build a simple express website on AWS with lambda and api gateway.
The site runs successfully on my local, but after deploying to AWS, there is a issue about jade route as AWS gives a stage name to deployed API, for example: the root(/) url is something like - https://opl3cla000.execute-api.ap-southeast-2.amazonaws.com/prod(the prod is stage name). While in my jade layout.jade, I have code like
ul.nav.navbar-nav
li
a(href="/page1") Page1
li
a(href="/page2") Page2
My jade code does not include the stage name, so it gives 403 as the path is https://opl3cla000.execute-api.ap-southeast-2.amazonaws.com/prod/page1 instead of https://opl3cla000.execute-api.ap-southeast-2.amazonaws.com/page1.
I am not sure if it is the correct configuration, and how can I fix it?

I use the middleware from awslabs/aws-serverless-express and get the answer from the author.
The reference link is below:
https://github.com/awslabs/aws-serverless-express/issues/11

Related

AWS Amplify doesn't work for URLs that contain periods

Has anyone run into problems trying to use AWS Amplify with a URL that contains periods? The app is working perfectly fine while running on the local dev server (which is using Parcel.js), so I'm fairly confident it's an issue with Amplify.
For example, we have a page at https://example.org/data/sample/H2.32.433 and end up getting an AWS AccessDenied when hitting the URL directly. As a workaround, we've been encoding the periods but that's not as readable of a URL.
We have a redirect rule that AWS provided in the Amplify docs with the following regex that redirects to index.html with a 200 (Rewrite) code:
</^[^.]+$|\\.(?!(mp4|css|gif|ico|jpg|js|png|txt|svg|woff|ttf|map|json)$)([^.]+$)/>
I'm thinking it has something to do with the redirect rule, but I'm not sure.
Any thoughts would be greatly appreciated!

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/

"same hierarchical level" Error on HTTP (beta) API Gateway

Im trying to make a new HTTP API gateway but keep getting this error when I try to make routes with multiple parameters I want something like this
ANY /{param1}/entity/{param2}
ANY /{param1}/other/{param3}
Not sure why this keeps failing...
I encountered this issue in serverless.yml when renaming a path parameter.
The workaround is to:
Take down the route (comment the said route in serverless.yml)
Deploy
Bring the route back with the new parameter (uncomment the said route)
Deploy again
For more reference check https://github.com/serverless/serverless/issues/3785

AWS Api gateway custom domain routing to wrong base url

I'm developing an Angular Universal serverless app in AWS Lambda/Api gateway. The app works perfectly using the standard api url ( {api-id}.execute-api.{region}.amazonaws.com/{stage}/) but now I'm trying to deploy it in a human-readable url using Api Gateway's Custom domain names.
For that I followed the docs and troubleshooted using other stackoverflow's questions, but now I'm faced with a problem and can't find another question that looks like my problem.
I have already setup the API, the custom domain name (which created a cloudfront distribution) and a Route53 A-type ALIAS routing to this new cloudfront distribution and the routing kind of works.
The problem I'm facing is that when I'm using the new domain name, the angular app cant find assets like CSS, Icons,etc. All of them works fine using the standard api url but not with the custom.
To do some debugging I configured Api Gateway to log requests to CloudWatch, and I can see that when I'm using the standard url, the resource path log is like this:
HTTP Method: GET, Resource Path: /main.4d57a71fd195330e8ee9.js
But when I use the custom URL the same log is like this:
HTTP Method: GET, Resource Path: /development/main.4d57a71fd195330e8ee9.js
I'm guessing it has something to do with the base URL in the custom domain name configuration of Api Gateway, I tried changing it to everything I could think of but nothing fixed it.
Here is a screenshot of my Api Gateway configuration.
Api gateway - Custom Domain Names configuration
Tell me if you need anything more and sorry if bad english.
Thanks in advance.
EDIT: I should make clear that I'm trying to point to the "development" stage of my api
I believe you simply need to reconfigure your custom domain. It should be sufficient for you to change the following;
In "Base Path Mappings" section change Path from "/development" to just "/"
I had similar problem. The only workaround for me is to set baseHref to "/" in environment.serverless.ts and have one single mapping in custom domain name from "/" to "{YOUR-API}:production".
This breaks direct url access to the API but access via custom domain name works fine.

Invoking a Lambda through API-Gateway giving 403 response?

I am using AWS codestar to deploy by react application using serverless nodejs template. This is the url that is given by codestar after successfully completion of all the stages https://xxxxx.execute-api.us-east-1.amazonaws.com/Prod . This url displayed all the components in my app correctly. In navbar of my app i have items like this a ,b,c. where clicking on each one of them will redirect to a new component.(i.e.https://xxxxx.execute-api.us-east-1.amazonaws.com/a,https://xxxxx.execute-api.us-east-1.amazonaws.com/b etc. But when i refresh the page which is having a url like this https://xxxxx.execute-api.us-east-1.amazonaws.com/b i am getting a error like {"message":"Forbidden"} and in my console it is showing like this favicon.ico:1 GET https://xxxx.execute-api.us-east-1.amazonaws.com/favicon.ico 403
It seems the chrome is fetching the favicon based on the https link, which fails because there is no such favicon at the location. I tried to remove favicon.ico link in index.html but even then the chrome is using the same url to fetch the favicon which eventually fails. I followed max number of suggestions in SO to acheive this but no luck. Is there any way to say api-gateway to exclude these favicon get requests and display my app rather than showing message forbidden.
And i am pretty sure that i had enabled logs for both the agi-gateway and lambda where i didnt find any forbidden errors(i.e.403) which is weird because i can see those 403 errors in my console.
Thanks
Any help is highly appreciated.
The https://xxxxx.execute-api.us-east-1.amazonaws.com/Prod url provided by API Gateway is the base url for your site, so those paths would have to be /Prod/a instead of /a.
One way to get around that is to register your own domain and connect it to API Gateway via a custom domain. That would allow you to have https://example.com as your base url, and your paths could stay /a, /b, etc.