Deploy Flask App (FE + BE) on AWS Lambda and API Gateway by awsmasterchef

hello guys so in this video we will be going to see how we can deploy and flask application that have both front end and back end on AWS Lambda okay so I already have an video to deploy flask application just only back end on to awf Lambda but I think P also wanted to deploy front end as well so I would be creating this video okay so uh what I have done till now I have setled up settled up an uh flask application that has an front end and back end as well and uh the application looks like something like this like uh on the screen it just having basic uh form to connect with me although back end is not working properly so the example would be I can just enter any name then after I can enter any email and then after hello word okay just a message and if I click on send message it says thank you for your message test okay and then after it says basically total uh X people visited us today okay so it is just for the just just for the reference perspective okay so if I show you code here like it's an again basic application so I'm running it here right uh the first landing page is sort of contact with me and I am rendering contact. HTML page which is here and uh uh kind of I also we have those two photos basically on this page some CSS here and on the next page we again have in photo right so uh I I think uh uh that's that's the main around the application now we will be going to see how we can deploy it on deploy it on the ad LDA okay so what we are going to do first is we uh uh I would give you a brief context like what library we are going to use then after we will be going to create a Lambda function and then after we'll see these steps okay so what we are going to do we will be going to utilize this AWS hyund wsci Library which is kind of uh help us to deploy this flask application onto AWS L now what it says is basically let's say you have an flask application you just need to use this def Lambda Handler and inside this Lambda Handler function you you can bind your application flask application inside the AWS response okay so what it going to do it will going to uh kind of convert the API convert the request coming from the API Gateway to the uh format required by the flask application okay so here I will go so what I will do first I will going to create a new function name it as an flash capab okay then after choose runtime as in Python 3.11 and then after I think keep all the configuration as default and then after created okay in the second step if you see like we are using uh some libraries right this flask and we have to use this AWS hyph wsj as well which is out of the box not available on lws Lambda environment okay so to have this so that we can use those two libraries what we need is we need we have to create a layer basically right so what we will do layer is basically is just a way to provide I mean where where you can upload uh those libraries right so I will going to create a new layer name it as an flask I think description you can uh I think uh just optional field then we have to upload a zip file so now we would be going to see how we can create those layer basically okay so what I am it like I am inside the same project folder inside my flashcab basically and I am going to create a new folder with name python okay make sure you create folder with the same name okay then after in The Next Step you have to open an command terminal inside the same directory okay inside the python folder only and then after you are going to install the libraries which you need on WS Lambda okay so I will need p uh flask so I will install it pip install Flash so uh I will I will just install this uh flask make sure you you add hyph T and Dot at the end okay so that it will going to install it in the same Library I mean in the same directory right so it is kind of installing so it will not take I think much time it's a very quick and fast process I will say once it is done we have to install AWS Hy wsg as well right so what I will do I will quickly go here right and just copy copied this and then after cut it and again hyph T dot right yeah so once this is done I think we can close this terminal box this terminal this is not required now so now if you see go inside the python we we have all the libraries right so now in The Next Step what we will do we will just compress to Z file okay and again we are going to upload this ZIP file to Lambda function right to Lambda layer basically so here I am then after I will come here just use this and upload this python. ZIP right so here we can select I think python as the runtime which is supported and uh I think compatible architecture are both so just created okay so I will quickly show you like if I just add import flask here okay and just save it deploy it and test it just test event save and again test click on text so now you can see we are getting the error no module name flask but I think as soon as this layer is created what we will do we will just copy the Arn right then after scroll down we have to add a layer and inside dat a layer we can specify Arn just click on verify and then after click on ADD once this is done I think we can I think uh those those those error would not be there right that last time we got so if I again try to run it just click on test so hello from LDA right so this time this import Flash work very well okay so now in this way we have kind of till now we have added libraries AWS wsdi and flask as well okay so now we have to upload this code to a WS Lambda function okay so I will again come back here we don't need this python. ZIP file I think I will delete this so that uh the code folder would be I think I will just come back from here I will try it okay so now we have what we have to do you have to just zip your zip your project file completely and then after you have to upload it to the DAT Lambda function right so I am zipping it so now we can upload this project. ZIP to uh Lambda function right so I will come here I will be going to select this my bad not sure why it is upload from Z file yeah so so now I am uploading this project. Z file okay so it's quite heavy the reason being is I think we we do have some some pictures as well so that's that's the reason uh it is quite heavy 1.93 MP but definitely I think we would be going to give the solution to reduce it as well okay so now what you can see now we have the complete project as well uh uh with the same name right with flask name static folder templates f.p file and all those things right so now what we have to do we will be going a kind of not sure why it is hanged I think yeah so now what we going to do but is so small okay I think there's some some sort of issue not sure why uh might be okay uh I actually this this box used to like is quite big in uh as of now like it is very small so that's that's how I am getting confused so what we have to do we will just going to command it that's the first thing second we would come here we are going to import AWS hyph wsci okay we have imported it then after what we have to do we have to use this right so again I would come here and then just paste it okay so now if I saved it deploy it okay in the next step what we have to do we have to change the uh this Handler function basically okay so previously the file name is is Lambda function and the method name is Lambda Handler but now you can see the file name is f.p and function Handler name is again Lambda Handler okay so what I will do I will just edit it just change this to app. Lambda Handler okay so now it will going to work okay so now we have seted up our our uh Lambda function and the Lambda layer but now question comes how would we how we are going to use it okay so for that perspective we need API Gateway right so to create API Gateway we will we would be going to API Gateway console and there we are going to create a new rest API Gateway okay so first I think it is going to ask ask us like what API Gateway do we need rest API sdtp API or web socket so we are going to create rest API so rest API just simply provides some great features so so that's a reason so new API again I am naming it as an flask API and created okay so if you see it here what I will do we have to create a resource and in that resource we are going to use the proxy resource okay so what is proxy resource basically so let's say your flask application have 10 routes and you have to create the one way is you have to create those 10 routes individually one by one inside the API Gateway and another way is you can create a single proxy route which basically tells API Gateway to whatever path whatever request path you are getting just redirect this path to the flask application or to this AWS Lambda function okay so that's that's the reason we are going to use the proxy route so that we don't need to Define multiple routes here okay then after just use BLX C+ and then after we have to redirect this request to edit integration to the Lambda function flash cap and then after just save it okay once this is done I think we are going to deploy this API new stage choose the stage as and Dev and deploy it okay okay so now this this is kind of done if I choose the end point uh so we don't have I think okay so sorry my bad so stages is here okay what I will do I will just copy it and paste it and just enter it so it says basically missing authentication token the reason being is we have not added slash I think no uh we have added slash I think what a issue so we have added okay so sorry my bad I think we have to add and Method as well inside it which is again an I think uh proxy integration so that like it is started to work I will explain you once once this is going to work right so select the method so any request and just created so this method is done again I think we have to uh Lambda integration is already there so we have to deploy this API choose the stage as and tab I refresh it it still says I think missing authentication token so what would be the issue okay so now it is started to work sorry my bad it takes a little time okay so what the issue is if you just uh like create a simple resource only okay so in that perspective only SL route is going to work but if you want it to uh like get work all those sub routes as well basically slash xy/ X whatever path it is right so in that case we have to add a method as well okay so that's a perspective of adding a method okay so make sure we have like first is we have to create a resource choose use any create proxy route and then after put just Lambda integration and again create a method with proxy integration only okay so that's how it works going to okay so now you can see it is started to work the only issue is like if I just type it test test gmail.com and then after hello word okay so if I just click on send message so it says forid Okay the reason being is it is migrating to/ visitor path right so but if in case of API Gateway it should be with the the kind of the API Gateway uh URL then after SL Dev which is the gate I mean the stage stage name and then after the exact path so that's the issue it is not working so for that we have to modify it modify it a little bit okay second issue is what issue we are getting is you you can see we are not getting the images Okay the reason being is it is not able to fetch images from the static folder right so the reason again the same it the photo is available at this SL static I mean this complete path and then after SL static while if you see it the logo path we would be getting is slatic logo.png okay it is not now you can see like SL D is missing from it here right the this complete path you can see https something started with one u s z x it is missing SL Dev okay so that's the issue right so to solve those two problems what we are going to do we are going to upload all the static data to S3 S3 bucket the reason would be it would be quicker and fast for you to get the data from S3 rather than getting data from Lambda function and it would cost you much cheaper as well if you if you get this data from FL I mean from the S3 S3 bucket so what we will do we are going to create a new bucket you can choose any name as you want just for now I have created a new bucket with name flask app asset bucket okay and in that what we are going to do we are going to upload all those three files whatever we need okay so we just came here click on upload and then after we are just going to upload it not sure why it is not supporting drag and draw feature so now here you can see I'm uploading those all three files yeah so now those three files are uploaded successfully but you can see like as of now if I try to access those files right with with this object URL it I would not be able to access it the reason being is the as of now this is like this this is an private uh bucket and we nobody can access this okay so to give it permission what we are going to do we are going to make this S3 bucket as in public okay so for that perspective what we have to do we have to go inside the permission section we have to click disable this all the public access so I mean so kind of we are allowing it save changes confirm so that's the first thing second we have to add an bucket policy to make it fully public right so I will quickly open notepad file I have that already written and policy so here is the policy I'm just copying it going to paste it so this policy is basically uh is to make this bucket public only so you can replace your bucket name here okay and then after you just going to save it okay so if you see now if I go here and try to access this this file this would be I am able to open it okay so now that's that's the path okay so now what we have to do we have to go all where wherever we are using the static path and we have to change that file name okay so what I will do I will just search for static so we have to change we have to add path for logo file right so I will go here we can copy this logo. PNG and just add it that's the one thing then after we have to add path for BG copy so I will again go back here BG copy. jpg just copy it going to replace this pg. copy jpg and then after if I again see static there is no static thing here okay so we have stars. jpg come back here Stars just copy it and just paste it okay so save it then after if I again rerun this stop and rerun and again I come back here uh on my on my local system so ideally this should get yes so I think this is getting open and now if I just show you quickly like from where it is coming so it is coming from this sttp as I mean from the S3 website okay so in this way basically we have verified like this this S3 bucket is working fine so now we have to upload this path this this complete project folder again to AWS Lambda okay so before that I think we can again set as well like uh if you see what what we have done is like uh again on this contact. HTML if I go here inside the contact. HTML what we are basically doing is okay so we are kind of referencing once all those all those things are done we are going to go to the SL visitor space that's the issue right the reason being is uh like uh AWS API Gateway doesn't know/ visitor it knows sl/ Vis right so for that perspective I think we have to change it a little bit we have to play with play with it a little bit so what I will do I will basically we are first going to set this this uh fix this uh uh this uh image loading issue and then after we will again play with this okay so I just going to rename it pro. zip just came I think to here flash cap upload from zip file and then after save it okay so cancel it maybe what I will do I will we will we don't need this this static as well right so I will just idea we don't know we don't need V andb we don't know this so app do only we need okay so it has change it upload from Z file so this time it is very small right 3.42 KB only so that's the advantage of separating out those Heavy images as well to the uh to the uh I mean to S3 bucket right okay so my bad actually we have missed to uh like uh I think that AWS Hy wsg code is removed so what I will do I will just quickly add that code as well right so we have to import that's the first thing and then we have to just copy this as well right so if I copy this just paste it and deploy it okay now we are again going to hit this this IDE this should work this time this API right so if I go here yeah so this this is deployed now if I refresh it yeah so now you can see we are able to upload the images at least right this is this this has started to work okay so if you wanted see if you see like it takes a little time to upload to to to f the images first time right so maybe if you wanted to make uh like make it a little better or you wanted to make the user experience a little better what you can do you can just add an Cloud front in front of this S3 website and then after just use the cloudfront cloud cloudfront URL inside your application okay this would this would make the loading time of those images very fast and very quicker okay so that's the that's kind of one Improvement I'm not going to do it maybe if you want you can do it right second point I think the issue we are getting is if I think I just enter a name let's say AWS Master Chef okay and then after I think email test gmail.com and then after hello word so if I click on send message so it says forden the reason being is on clicking of send message actually we have to uh uh redirect this request to some some different button right send message so for that what we have to do is let me quickly show you we have to show the custom popup okay I will show you the error actually so if I click on send message okay uh my bad I will go to more tools Network I am not able to see network give me a while okay network is here only so if I just click on send message so now you can see it is sending message to/ send message while it should send to// send message right so uh what we have to do I think we we are kind of uh definitely uh we have to go here you can find it here so now we have to add/ Tav and/ send message right so we kind of we are changing it hardcoding it uh on the basis of stage name inside the uh your rendering template right so what I will do I will go here inside the Lambda function only open this contact. HTML go to 140 line and here we have to slash T slash save it just deploy it okay so it it has been deployed so I will going to close it if I click on send message now it should work so again okay so I think it has not updated the template so I will going to refresh it once so I will just add test test gmail.com and then after hello so at this time it should work if I click on send message so it says 400 why is saying STS B request the responses could not pass request body into Json could not pass I think maybe uh the error is from uh I think some some error is from the back end only okay so maybe this this this is not a I think major issue might be it is something related to only so I think now this way I think we mainly I think the point is I wanted to show you uh the process to deploy it and now I I think you have the correct idea how you can deploy it okay so if you have any queries or comment you can post it out in the comment section thank you

Channel: awsmasterchef

Views: 125

Keywords:

Id: 2Jvzc4Q4Ky0

Length: 25min 16sec (1516 seconds)

Published: Tue Jun 18 2024