{"id":589,"date":"2017-09-24T21:45:27","date_gmt":"2017-09-24T21:45:27","guid":{"rendered":"http:\/\/wiki.thomasandsofia.com\/?p=589"},"modified":"2017-09-24T22:52:42","modified_gmt":"2017-09-24T22:52:42","slug":"lambda-building-a-serverless-webpage","status":"publish","type":"post","link":"https:\/\/wiki.thomasandsofia.com\/?p=589","title":{"rendered":"Lambda &#8211; Building a serverless webpage (49)"},"content":{"rendered":"<h2>Links<\/h2>\n<p>Download the example files.<\/p>\n<ul>\n<li><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2017\/09\/index.txt\" target=\"_blank\" rel=\"noopener\">index.html<\/a><\/li>\n<li><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2017\/09\/error.txt\" target=\"_blank\" rel=\"noopener\">error.html<\/a><\/li>\n<li><a href=\"http:\/\/wiki.thomasandsofia.com\/wp-content\/uploads\/2017\/09\/hellocloudgurus.txt\" target=\"_blank\" rel=\"noopener\">hellocloudgurus.py<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>Setup<\/h2>\n<h3>Setup S3<\/h3>\n<ul>\n<li>Must have Static Web Hosting enabled.<\/li>\n<li>Files must have Public read access enabled.<\/li>\n<\/ul>\n<div class=\"warning\">\n<p>When accessing S3 using a custom domain, the name of the bucket must EXACTLY match the domain name.<\/p>\n<ul>\n<li>Example: new S3 bucket = &#8220;s3.thomasandsofia.com&#8221;<\/li>\n<li>Set the CNAME for s3.thomasandsofia.com to equal your URL for the bucket.<\/li>\n<\/ul>\n<\/div>\n<p>&nbsp;<\/p>\n<h3>Setup Lambda<\/h3>\n<ul>\n<li>Compute &gt; Lambda &gt; [Get started now] or [Create function]<\/li>\n<li>Select Blueprint\n<ul>\n<li>[Author from scratch] a.k.a. Blank function<\/li>\n<\/ul>\n<\/li>\n<li>Configure triggers\n<ul>\n<li>click the &#8220;empty box&#8221; image, then select &#8220;API Gateway&#8221; from the dropdown.<\/li>\n<li>API name: &#8216;LambdaMicroservice&#8217;<\/li>\n<li>Deployment state: &#8216;prod&#8217;<\/li>\n<li>Security: &#8216;Open&#8217;<\/li>\n<li>[Next]<\/li>\n<\/ul>\n<\/li>\n<li>Configure function\n<ul>\n<li>Name: HelloCloudGurus<\/li>\n<li>Description: HelloCloudGurus<\/li>\n<li>Runtime: Python 3.6<\/li>\n<li>Paste the code from the hellocloundgurus.py file linked above.\n<ul>\n<li><em>Feel free to change &#8216;Thomas Roberts&#8217; at the bottom of the script to your own name!<\/em><\/li>\n<\/ul>\n<\/li>\n<li>Lambda function handler and role\n<ul>\n<li>Role: Create new role from template(s)<\/li>\n<li>Role Name: HelloCloudGurusLambda<\/li>\n<li>Policy templates: Simple Microservie permissions<\/li>\n<li>[Next]<\/li>\n<\/ul>\n<\/li>\n<li>[Create function] &#8211; This might take several seconds, so relax a moment.<\/li>\n<\/ul>\n<\/li>\n<li>Locate the Lambda link\n<ul>\n<li>Compute &gt; Lambda &gt; HelloCloudGurus &gt; &#8220;Triggers&#8221; tab<\/li>\n<li>This is tricky.\u00a0 I could NOT find a quick like like shown in the video!\u00a0 Instead, I created my own.<\/li>\n<li>Locate your ARN displayed under the words &#8220;API Gateway: LambdaMicroservice\n<ul>\n<li>arn:aws:execute-api:<span style=\"color: #ff00ff;\">us-east-1<\/span>:727545344356:<span style=\"color: #ff6600;\">y2g5acdrxg<\/span>\/prod\/ANY\/<span style=\"color: #008000;\">HelloCloudGurus<\/span><\/li>\n<li>URL = https:\/\/<span style=\"color: #ff6600;\">y2g5acdrxg<\/span>.execute-api.<span style=\"color: #ff00ff;\">us-east-1<\/span>.amazonaws.com\/prod\/<span style=\"color: #008000;\">HelloCloudGurus<\/span>\n<ul>\n<li>Using this link should display the name entered at the bottom of the .py script (default &#8216;Thomas Roberts&#8217;)<\/li>\n<li>If you see a JSON error, but the raw data tab displays the correct data, the script will still work, so move on!<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Setup API Gateway<\/h3>\n<ul>\n<li>Application Services &gt; API Gateway<\/li>\n<li>You&#8217;ll see the LambdaMicroservices has already been setup for you\n<ul>\n<li>This was part of the delay earlier!<\/li>\n<\/ul>\n<\/li>\n<li>That&#8217;s it!\u00a0 Thanks for looking<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h3>Update index.html to call the function<\/h3>\n<ul>\n<li>edit &#8216;index.html&#8217; and replace the &#8220;YOUR-API-GATEWAY-LINK-HERE&#8221; with the link you created in the &#8216;Setup Lambda&#8221; section and save the change.<\/li>\n<li>Upload both the index.html and error.html files to the root folder of your new bucket.<\/li>\n<li>Enable Public read access on both files.<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h2>View your serverless webpage!<\/h2>\n<ul>\n<li>http:\/\/s3.<em>bucketname<\/em>.s3-website.<em>region<\/em>.amazonaws.com<\/li>\n<li>When viewing the page, click the [Click here] button\n<ul>\n<li>&#8220;Cloud Gurus&#8221; should be replaced with the name you entered in the python script!<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Links Download the example files. index.html error.html hellocloudgurus.py &nbsp; Setup Setup S3 Must have Static Web Hosting enabled. Files must have Public read access enabled. When accessing S3 using a custom domain, the name of the bucket must EXACTLY match the domain name. Example: new S3 bucket = &#8220;s3.thomasandsofia.com&#8221; Set the CNAME for s3.thomasandsofia.com to ..<\/p>\n<div class=\"clear-fix\"><\/div>\n<p><a href=\"https:\/\/wiki.thomasandsofia.com\/?p=589\" title=\"read more...\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[18],"tags":[],"class_list":["post-589","post","type-post","status-publish","format-standard","hentry","category-amazon-web-services-aws"],"_links":{"self":[{"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=\/wp\/v2\/posts\/589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=589"}],"version-history":[{"count":9,"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=\/wp\/v2\/posts\/589\/revisions"}],"predecessor-version":[{"id":603,"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=\/wp\/v2\/posts\/589\/revisions\/603"}],"wp:attachment":[{"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=589"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=589"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wiki.thomasandsofia.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}