{"componentChunkName":"component---src-templates-tag-js","path":"/tags/serverless/","result":{"data":{"site":{"siteMetadata":{"title":"LoginRadius Blog"}},"allMarkdownRemark":{"totalCount":3,"edges":[{"node":{"fields":{"slug":"/engineering/serverless-overview/"},"html":"

Serverless computing has been gaining a lot of popularity in the last couple of years, and for a good reason. It saves developer's time, allowing them to focus on writing code rather than dealing with infrastructure. Deploying powerful and scalable applications has generally become much quicker and easier with serverless. However, there can be drawbacks as well, such as vendor lock-in and lack of control.

\n

This blog will briefly go over some of the most popular serverless computing options from major cloud providers. There are also plenty of great resources online explaining serverless architecture in detail, so definitely go check those out if you haven't already. Now, let's go over some of the popular choices for serverless computing.

\n

Popular Cloud Options

\n

Almost all major cloud providers offer serverless computing such as AWS, Azure, Google Cloud, IBM Cloud, Alibaba Cloud, etc. In this blog, we'll only be going over a few.

\n

1. AWS Lambda

\n

AWS Lambda was released in 2014 and has played a significant role in the rise of serverless computing.

\n\n

Recent notable updates include:

\n\n

2. Azure Functions

\n

Launched in 2016:

\n\n

Recent notable updates include:

\n\n

3. Google Cloud Functions

\n

Launched in 2017:

\n\n

Recent notable updates include:

\n\n

4. CloudFlare Workers

\n

Launched in 2017:

\n\n

Recent notable updates include:

\n\n

Conclusion

\n

There are a lot of great options worth considering when looking for serverless computing from a cloud provider. This was a very brief introduction to some of the most popular choices, so definitely check out each provider's official documentation for more detail!

\n","frontmatter":{"date":"March 04, 2021","updated_date":null,"title":"Top 4 Serverless Computing Platforms in 2021","tags":["Serverless"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":1.5037593984962405,"src":"/static/5c35cac6bac6aa7487ccce9ebb7d8d94/ee604/cover.png","srcSet":"/static/5c35cac6bac6aa7487ccce9ebb7d8d94/69585/cover.png 200w,\n/static/5c35cac6bac6aa7487ccce9ebb7d8d94/497c6/cover.png 400w,\n/static/5c35cac6bac6aa7487ccce9ebb7d8d94/ee604/cover.png 800w,\n/static/5c35cac6bac6aa7487ccce9ebb7d8d94/f3583/cover.png 1200w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Andy Yeung","github":null,"avatar":null}}}},{"node":{"fields":{"slug":"/engineering/a-journey-with-aws/"},"html":"

Amazon Web Services offers scalable, reliable, and inexpensive cloud computing services. Below are some salient features provided by AWS.

\n
    \n
  1. Secure cloud services platform
    2. \n
  2. Compute power
    3. \n
  3. Database storage
    4. \n
  4. Content delivery
    5. \n
  5. Pay for what you use
    6. \n
\n

Prerequisites:

\n\n

AWS EC2(Elastic Compute Cloud)

\n

It is the most commonly used service of AWS and catered deployment of various applications as per AMI configured before creating an EC2 Instance.\nAmazon Elastic Compute Cloud (Amazon EC2) is a web service that provides secure and resizable compute capacity in the cloud.\nIt is designed to make web-scale cloud computing easier for developers.
\nHere are some of the important steps while setting up new EC2 Instance->

\n

Choose an Amazon AMI.\n\n \n \n \n

\n

Login to EC2 via CLI

\n
$ ssh -i ec2-key.pem ec2-user@11.11.11.111
\n

Switch to ROOT

\n
sudo su
\n

AWS RDS(Relational Database Service)

\n

Amazon Relational Database Service is a web service that makes it easier to set up, operate, and scale a relational database in the AWS Cloud. It provides a resizable, cost-efficient capacity for an industry-standard relational database and manages everyday database administration tasks.\nAfter setting up RDS, you can be logged in to the local tool(SQL Developer/ MY SQL Workbench) and copy RDS's endpoint with Username/Password configured while setting RDS.

\n

\n \n \n

\n

AWS API Gateway

\n

This AWS service is used to Create, Publish, Maintain, and Monitor secure Application Programming Interfaces(API). Moreover, it provides an easy interface for code running on AWS Lambda.\nHere are some of the pointers that explain the need for this service.

\n\n

This service enables us to make APIs on the go with a few clicks; also, we can use the Mocking approach to make dummy routes without any original data. In this faking data is used and bouncing back to without any activity.

\n

\n \n \n

\n

AWS DynamoDB

\n

Dynamo DB is a NO SQL database provided by Amazon Web Services. The main job of Dynamo DB is to Store & Retrieve any amount of data and serve any level requests of traffic.\nIn this, there are different terminologies as that of a regular database. Secondary Indexes is a Data Structure that contains a subset of attributes from a table.

\n\n

\n \n \n

\n

We can include Leaflet in our application by including the CSS stylesheet and the JS file from the unpkg CDN. Let's start building the application by starting with the following code at the project root. Create a file named index.html and put the following markup in it. The map shall be rendered in div#mapid.

\n
<!--index.html-->\n<!DOCTYPE html>\n<html lang="en">\n\n  <head>\n    <meta charset="UTF-8">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <title>MapViz</title>\n    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />\n    <style>\n      #mapid {\n        position: fixed;\n        width: 100%;\n        height: 100%;\n        top: 0;\n        left: 0;\n      }\n    </style>\n  </head>\n\n  <body>\n    <div id="mapid"></div>\n    <script defer src="https://unpkg.com/leaflet/dist/leaflet.js"></script>\n  </body>\n\n</html>
\n

Now, we gather a link to the GeoJSON file for metro stations in Washington D.C., that we shall be visualizing, from the MapBox documentation. It should look similar to the following:

\n
https://docs.mapbox.com/help/data/stations.geojson
\n

Create a new JavaScript file named script.js in the same directory as the HTML file. Include this file in the web page by adding the following line to it.

\n
<!--index.html-->\n  ...\n  <body>\n    ...\n    <script defer src="https://unpkg.com/leaflet/dist/leaflet.js"></script>\n    <script src="script.js"></script>\n  </body>\n  ...
\n

In script.js, we can use the Fetch API to make an AJAX request and get the data as a response to a GET request using promises and take a look at what we are dealing with.

\n
// script.js\nlet data = {};\nconst dataUrl = 'https://cors-anywhere.herokuapp.com/https://docs.mapbox.com/help/data/stations.geojson';\n\nfetch(dataUrl)\n  .then(response => response.json())\n  .then(data => console.log(data))\n  .catch(err => console.error(err));
\n

We can take a look at the data in the Developer Console. We observe that it is a JavaScript object. The various properties associated with the data can be viewed by checking the individual features.

\n
{\n  "type": "FeatureCollection",\n  "features": [\n    ...\n    {\n      "geometry": {\n        "type": "Point",\n        "coordinates": [-76.9750541388, 38.8410857803]\n      },\n      "type": "Feature",\n      "properties": {\n        "description": "Southern Ave",\n        "marker-symbol": "rail-metro",\n        "title": "Southern Ave",\n        "url": "http://www.wmata.com/rider_tools/pids/showpid.cfm?station_id=107",\n        "lines": ["Green"],\n        "address": "1411 Southern Avenue, Temple Hills, MD 20748"\n      }\n    },\n    ...\n  ]\n}
\n

Before we begin adding the layers to our map, we need to instantiate a Leaflet map object with the DOM ID of the map container and center it on our point of interest at a specified initial zoom level.

\n
const map = L.map('mapid').setView([38.8977, -77.0365], 15);
\n

As we need a base map (the base layer) for our map, we can use one that is provided by Mapbox. In order to use that, you need a Mapbox API access token that you can create on their portal.

\n

The following snippet instantiates a tileLayer object and adds it to our map:

\n
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {\n  attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',\n  maxZoom: 18,\n  id: 'mapbox/streets-v11',\n  tileSize: 512,\n  zoomOffset: -1,\n  accessToken: 'your_mapbox_api_access_token'\n}).addTo(map);
\n

We can use the following snippet to parse the GeoJSON and add it to the map.

\n
L.geoJSON(data).addTo(map);
\n

Replace the code in script.js with the following, and refresh the web page:

\n
let data = {};\nconst dataUrl = 'https://cors-anywhere.herokuapp.com/https://docs.mapbox.com/help/data/stations.geojson';\n\nconst map = L.map('mapid').setView([38.8977, -77.0365], 15);\n\nL.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {\n  attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',\n  maxZoom: 18,\n  id: 'mapbox/streets-v11',\n  tileSize: 512,\n  zoomOffset: -1,\n  accessToken: 'your_mapbox_api_access_token'\n}).addTo(map);\n\nfetch(dataUrl)\n  .then(response => response.json())\n  .then(data => {\n    L.geoJSON(data).addTo(map);\n  })\n  .catch(err => console.error(err));
\n

As the dataset contains Point features, markers will be added at the respective coordinates. Our web page will now look like the following:

\n

\n \n \n

\n

Now, we can move on to deploy this web page on Netlify.

\n

Deploying on Netlify

\n

Netlify is an awesome platform to host your web applications. It also offers many other features such as serverless functions.

\n

\n \n \n

\n

Once you have pushed your web page to a Git repository, hosted either on GitHub, GitLab or BitBucket, navigate to Netlify and click on the New Site from Git button.

\n

\n \n \n

\n

Next, select your Git provider and your repository:

\n

\n \n \n

\n

Go ahead with the defaults, and now your site shall be published on Netlify, and all future pushes should result in a Netlify deployment:

\n

\n \n \n

\n

Nice! Now we have a web map, even though a very basic one, live! Check out the Leaflet documentation for more!

\n

Source Code

\n

Demonstration: Priceless Poincare

\n

GitHub: leaflet netlify starter

\n","frontmatter":{"date":"October 14, 2020","updated_date":null,"title":"Visualizing Data using Leaflet and Netlify","tags":["GIS","Serverless","JavaScript"],"coverImage":{"childImageSharp":{"fluid":{"aspectRatio":2.0618556701030926,"src":"/static/2bf4fa98946c3aaa9aff33c4859f3bda/14b42/map.jpg","srcSet":"/static/2bf4fa98946c3aaa9aff33c4859f3bda/f836f/map.jpg 200w,\n/static/2bf4fa98946c3aaa9aff33c4859f3bda/2244e/map.jpg 400w,\n/static/2bf4fa98946c3aaa9aff33c4859f3bda/14b42/map.jpg 800w,\n/static/2bf4fa98946c3aaa9aff33c4859f3bda/47498/map.jpg 1200w,\n/static/2bf4fa98946c3aaa9aff33c4859f3bda/1abfa/map.jpg 1366w","sizes":"(max-width: 800px) 100vw, 800px"}}},"author":{"id":"Sudipto Ghosh","github":"sudiptog81","avatar":null}}}}]}},"pageContext":{"tag":"Serverless"}},"staticQueryHashes":["1171199041","1384082988","2100481360","23180105","528864852"]}