<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" >

<channel><title><![CDATA[Murvin Lai - Tech Blog]]></title><link><![CDATA[http://www.murvinlai.com/tech-blog]]></link><description><![CDATA[Tech Blog]]></description><pubDate>Fri, 11 Nov 2022 14:22:58 -0800</pubDate><generator>Weebly</generator><item><title><![CDATA[Vue.js & Serverless - AWS Lambda / API Gateway / DocumentDB]]></title><link><![CDATA[http://www.murvinlai.com/tech-blog/vuejs-serverless-aws-lambda-api-gateway-documentdb]]></link><comments><![CDATA[http://www.murvinlai.com/tech-blog/vuejs-serverless-aws-lambda-api-gateway-documentdb#comments]]></comments><pubDate>Tue, 13 Oct 2020 18:22:39 GMT</pubDate><category><![CDATA[AWS]]></category><category><![CDATA[DocumentDB]]></category><category><![CDATA[Lambda]]></category><category><![CDATA[Node.js]]></category><category><![CDATA[Quasar]]></category><category><![CDATA[Serverless]]></category><guid isPermaLink="false">http://www.murvinlai.com/tech-blog/vuejs-serverless-aws-lambda-api-gateway-documentdb</guid><description><![CDATA[So.. I haven't really done any serious coding for a year. I was more focus on business and marketing, just trying different things.&nbsp; But I missed Node.js....  Vealty... new project  I cofound a company Almond Tree Media (www.almondtreemedia.ca) which was originally focus on business, marketing &amp; IT consulting.&nbsp; Then because of the pandemic, we decided to have our own product:&nbsp; vealty.ca. which is a platform for 3D tour / video / 4K photos presentation for realtors' listing.&nb [...] ]]></description><content:encoded><![CDATA[<div class="paragraph">So.. I haven't really done any serious coding for a year. I was more focus on business and marketing, just trying different things.&nbsp; But I missed Node.js....</div>  <h2 class="wsite-content-title">Vealty... new project</h2>  <div class="paragraph">I cofound a company Almond Tree Media (<a href="https://www.almondtreemedia.ca" target="_blank">www.almondtreemedia.ca</a>) which was originally focus on business, marketing &amp; IT consulting.&nbsp; Then because of the pandemic, we decided to have our own product:&nbsp; vealty.ca. which is a platform for 3D tour / video / 4K photos presentation for realtors' listing.&nbsp; We also intend to provide many services around that.&nbsp; So, I need to build a platform that is robust and use the latest Technology...&nbsp;</div>  <h2 class="wsite-content-title">Front End</h2>  <div class="paragraph">For frond end, I just learned how to use <a href="https://cli.vuejs.org/" target="_blank">Vue cli</a>, which is cool.&nbsp; I love how it simplifies the setup and the deployment.&nbsp;&nbsp;<br /><br />Because I want my web UI can also be able to easily turn into native app, I did a lot of research of different UI Framework.&nbsp; At the end, it came down to 2 candidates: <a href="https://vuetifyjs.com/en/" target="_blank">Vuetify</a> and <a href="https://quasar.dev/" target="_blank">Quasar</a>&nbsp;.&nbsp; And I finally chose Quasar.&nbsp; The reason is that it seems to have more support on different platforms.&nbsp; &nbsp;I didn't use Quasar CLI just because I have used Vue CLI, I just didn't know how to integrate them together. so, i use Quasar as a plug-in, for now. I will talk more about the experience with it later. so far, pretty happy with it.&nbsp;</div>  <h2 class="wsite-content-title">Server side</h2>  <div class="paragraph">&nbsp;After I have done a prototype for front end, I let my designer to work on the UI design. I jump into server side.&nbsp;&nbsp;<br /><br />I had experience with Elastic Bean Stalk and MongoDB.&nbsp; so, this time, I want to do something different.&nbsp; I want to use Lambda and DocumentDB (AWS Mongo). I did a lot of readings and got some advices from my good friend.&nbsp; So, instead of writing a lot of lambda functions for each REST resource. I just use Express.js but deploy as a Lambda.&nbsp; To do that, I use serverless.com Express example to start with.&nbsp; (also see&nbsp;<a href="https://github.com/serverless-components/express" target="_blank">github.com/serverless-components/express</a>&nbsp;)&nbsp; In which I had a very good start.&nbsp; It is just amazing how it simplifies the deployment and creating AWS resources. (e.g. create the API gateway and Subdomain for me).&nbsp;<br /><br />Then, I hit my first road block.&nbsp; First, I created the DocumentDB using the AWS Cloud9 &amp; DocumentDB example, which has no problem. Then, I tried to connect to DocumentDB from my lambda using Mongoose ( and also Mongo Client).&nbsp; It failed.&nbsp; I know there is something about the connection because of the connection timeout. So I checked the VPC of the lambda.&nbsp; It has no VPC attached.&nbsp; &nbsp;So, I did more research and I also add the IAM Role for the lambda which include these policies:&nbsp;<br /><br /><span><a href="https://console.aws.amazon.com/iam/home?region=us-west-2#/policies/arn%3Aaws%3Aiam%3A%3Aaws%3Apolicy%2FAWSLambdaFullAccess">AWSLambdaFullAccess</a><br /><a href="https://console.aws.amazon.com/iam/home?region=us-west-2#/policies/arn%3Aaws%3Aiam%3A%3Aaws%3Apolicy%2FAmazonDocDBFullAccess">AmazonDocDBFullAccess</a><br /><a href="https://console.aws.amazon.com/iam/home?region=us-west-2#/policies/arn%3Aaws%3Aiam%3A%3Aaws%3Apolicy%2Fservice-role%2FAWSLambdaVPCAccessExecutionRole">AWSLambdaVPCAccessExecutionRole</a></span><br /><br /><span style="color:rgb(119, 119, 119)">and i added that to the serverless.yml.&nbsp;&nbsp;<br />still didn't work.&nbsp;&nbsp;<br /><br />I even tried to manually add the VPC to the lambda but didn't work.&nbsp; I was stuck.&nbsp; I even messaged to AWS Support, stackoverflow etc.&nbsp; but didn't get any answer.<br /><br />Until I asked my friend who worked in AWS and had better experience than me to help.&nbsp; After some searching, he found out that the API gateway point to the "default" version of the lambda, not the latest.&nbsp; So if I added VPC manually to lambda, API gateway still point to the older version. So i just need to manually remove the "default". And Wola ! it works.<br /><br />so, next thing is, I have to learn serverless and how to do the yml.&nbsp; especially the VPC component YML.&nbsp; so that when I deploy, I can add the VPC to the Lambda.&nbsp; :)</span><br /><br />I will share some codes later.&nbsp;<br /><br /></div>]]></content:encoded></item></channel></rss>