Search code examples
amazon-web-servicesamazon-s3vue.jsgoogle-cloud-platformgoogle-cloud-endpoints

Calling cross domain requests from almost static site


I'm using vuejs and almost everything I do is on client-side, but for thing I need to call the server-side to check if URL exists or not.

I don't want to make these requests from browser, because that doesn't make sense to fetch different website from my scripts that will be more like calling any bad website without user knowing it in background, so I need to call cloud-function(gce) or aws lambda(since I don't want to host the site on server for it, since it has just one api call).

What would be the best way to accomplish it, I'm looking for something like website is www.webapp.com and cloud-function call on www.webapp.com/checkUrl


Solution

  • If you choose AWS platform, you can use S3, CloudFront, Route53, API Gateway and Lambda to accomplish your goal.

    Step01

    • Create a S3 bucket and upload your frontend vueJs code
    • Enable Static Web Hosting onto your bucket from S3 properties
    • Create a CloudFront distribution
    • Create a CloudFront origin pointing to your s3 bucket url (you have to add static website url of the s3 bucket)
    • Set the default behaviour pointing to S3 orgin ID

    Step 02

    • Create your lambda function

    • Create a API gateway

    • Add new resource (GET/POST) pointing to your lambda

    • Deploy your API

    • Go back to the CloudFront distribution and add a origin pointing to your API Gateway

    • In the behaviour tab, create a new behaviour eg: (/checkUrl) and point it to the OriginId of the API Gateway

    Step 03

    • Goto Route53 and create a new Hosted Zone
    • Set the NS records of the hosted zone in your domain configuration
    • Create a new record set (eg: www.webapp.com) and point it to the DNS of your CloudFront distribution
    • Update your CloudFront distribution's Alternate Domain Name to www.webapp.com