Step by step guide to show a html file from s3 bucket using lambda and API gateway

Part I: Uploading html file to S3 Bucket

1. Login and search in aws console S3

2. Create new bucket. Let name it: tech-shop

3. Upload registration.html (all other files, if any) in this bucket


Part II: Viewing html file

1. Create a lambda function. Let name  it: userRegistration

2. Delete the default js code in lambda function in index.js 

3. Write the following code in lambda function index.js file

<code start>

const aws = require('aws-sdk');


// set region

aws.config.region = 'ap-northeast-1';

// new S3 Object

const s3 = new aws.S3();


const params_to_get = {

    Bucket: 'tech-shop',//process.env.BUCKET,

    Key: 'registration.html'

};


/**

 * Get login file from S3.

 */

exports.handler = async (event) => {

    try {

        const data = await s3.getObject(params_to_get).promise();

        return data.Body.toString();

    } catch (e) {

        return {

            statusCode: 500,

            body: JSON.stringify(e.message),

        };

    }

};

<code end>

4. Create test event in lambda function. Let name it testevent and click on Test to test it

5. Create resource in API gateway to access the lambda function. Let name it user-registration

6. Create get method in user-registration resource

7. Go to method response add two headers: Access-Control-Allow-Origin and Content-Type

8. Go to integration response add mapping template, set values '*'  for Access-Control-Allow-Origin and 'text/html' for Content-Type and write in text area $input.path('$') on template part of the text/html 

9. Click on actions, then Deploy API and choose stage if you want to deploy any of existing stages or create new stage. Let name it: web

10. After deploy you will get the link and add stage name/resource name to check the response. Example: 

https://37i140nmj9.execute-api.ap-northeast-1.amazonaws.com/[stage-name]/[resource-name]

https://37i140nmj9.execute-api.ap-northeast-1.amazonaws.com/web/user-registration

Comments

Post a Comment

Popular posts from this blog

Using a GraphQL API in React

Image
  How to fetch data from an API using GraphQL in a React App Of course everyone is familiar with REST APIs, but there is another type of API that is becoming increasingly popular and that is the GraphQL API. GraphQL is a data query language for APIs. The significant difference between GraphQL APIs and REST APIs is that in a GraphQL API, we explicitly indicate in our query which  specific data  we want to fetch and request. In a REST API, we get back  all  the data from a url endpoint. Thus, GraphQL saves us some time by giving us more control over which data we want to request and receive from the API. The first time I encountered GraphQL was when I was learning how to create a Gatsby.js app; it uses GraphQL to access your app data. I’ve also attended a workshop where I learned how to build a GraphQL API using MongoDB and Node.js. Naturally, the next logical step in my GraphQL expedition would be to use GraphQL with a frontend library like, React. In this blog, ...
Read more

GraphQL Query Options

  Intro This page will walk you through a series of GraphQL queries, each designed to demonstrate a particular feature of GraphQL. These examples will work on the  real  schema used on  graphql-reference example . You can run this example locally to experiment and poke around the innards of the site! To get to the GraphiQL editor, go to  localhost:8000/___graphql  (that’s three underscores). You can also open the  CodeSandbox version  of the example site. For more background information, read about  why Gatsby uses GraphQL  and  how to use GraphiQL  in any Gatsby site. Basic queries Example: Site metadata Start with the basics, pulling up the site  title  from your  gatsby-config.js ’s  siteMetadata . Copy copy code to clipboard { site { siteMetadata { title } } } In the GraphiQL editor, try editing the query to include the  description  from  siteMetadata . When typing in th...
Read more

A re-introduction to JavaScript (JS tutorial)

  Why a re-introduction? Because   JavaScript   is notorious for being misunderstood. It is often derided as being a toy, but beneath its layer of deceptive simplicity, powerful language features await. JavaScript is now used by an incredible number of high-profile applications, showing that deeper knowledge of this technology is an important skill for any web or mobile developer. It's useful to start with an overview of the language's history. JavaScript was created in 1995 by Brendan Eich while he was an engineer at Netscape. JavaScript was first released with Netscape 2 early in 1996. It was originally going to be called LiveScript, but it was renamed in an ill-fated marketing decision that attempted to capitalize on the popularity of Sun Microsystem's Java language — despite the two having very little in common. This has been a source of confusion ever since. Several months later, Microsoft released JScript with Internet Explorer 3. It was a mostly-compatible JavaScri...
Read more