Adding Serverless Webpack to your Project - fix Lambda Upload Limits

as you start to deploy more and more things inside your service repo you need to manage how they are deployed this video is going to show you how we can use webpack to make sure that we're only putting the code that we need into our landers hi guys I'm Sam with complete coding and in this video we'll be using webpack and the service web pack plugin to setup and configure our service repo so that when we deploy a lambda we're deploying just the code that we need to deploy this doesn't make a huge difference right at the start but as your service projects grow you have got lots and lots of different code in there and we don't want to deploy all of the code to every single lambda this will make your deployments quicker and it's a much more resilient way to design api's so let's jump into the code and we can see how we'll do all of this if we go and have a look back in our AWS console we can search for lambda and then we will see that we have the my service project - dev - get user which we can go into and as we scroll down we see here saying the deployment package of your lambda was too large to enable inline editing this happens because when we deploy by default with service it uploads everything in the service repo into every single lambda while this works is not great as you get more folders as you get more lambdas as you get more code this is going to become more and more bloated with files you don't need what we can do to resolve this is use something like web pack to package all of our code into smaller sections so to get serviced to package up our lambdas into just what is needed we need to add in a plug-in called serverless web pack we can do that in the plugins list so it's a new plug-in called serverless - where pack to get this working we also need to say that we want each of the lumbers to be packaged individually that's the simplest saying package and then individually is true we can now save this file with a little bit more accessable we need to do to get this service web pack working first we need to install the plug-in so we do that by running MPM install - - save and then the name of the plug-in which is serverless - web pack the next thing after this is installed we actually need to install web pack itself so again MPM install - - save web pack web pack is a way of combining code and putting it all into a single file that is recognized as an efficient way of reducing the amount of code you're uploading so to get WebP up working we also need to pass in some config for web pack so we need to create a new file in our repo called web pack dot config dot j s and inside this file we need to write a module dot exports and in this case it's just an object so there are a couple of things the first thing is the target which is what are we trying to compile down and in this case we're trying to compile down node because this is a nodejs project and the mode for us we're going to be using production this just means it minifides it as much as possible and then we can save this file now back in our service back in our terminal we can run SLS deploy again and what this is going to do is it's going to now build it with webpack that's going to make sure that we only have the files that we need and that they compressed down so they're a lot smaller than they were before so again I'll get back to you once this is all updated so this most recent SLS deploy has finished so we'll jump back into our console and have a look how things have changed in this service get user lambda we can refresh the page and now if we scroll down to the function code we can see that we have just one file here this is the function and what web pack has done is it is compressed it down to make it as small as possible so this is just a single file and a single line of code which has everything that we've written inside it obviously this isn't very good for reading but it makes it much much more efficient for uploading your lambdas there is a way of getting the best of both worlds getting the improved upload speeds and the separation of the code that is needed but without having to minify it what we can do is we can go back into our web pack config j/s file and change the mode from to none if we save this weave now saying that we are not running in a production environment therefore we don't need to add the extra processing to minify the code what we'll do now is go into our terminal and run SLS deploy I'm going to do this just for one function so - F get user and what this is going to do is it's going to use the new web pack config to deploy that get user function we can now head over to our console and see how that has changed things if we go into lambda and it's last modified 14 seconds ago is the get user lambda function and we can scroll down to our function code as you can see straight away this isn't the same as we saw before at the start there is all of this strange comment stuff but this is just some information about web pack if you scroll past that you then get to the main section of code here you can see the handler which is exactly what we have inside our actual code so it's easy to read and understand we have our data object and all of our logic we also have our responses object which is exactly what we would expect from responses the way that web pack has done this is copied the code from each of those files and basically put them all in one file but without having reduced that down to the smallest size possible this is actually the way that I run most of my deployments and the reason for that is that if there is an error in your code then it tells you there is an error on line 98 so you can look at the code and know what has gone wrong with the minified code it just says that you've got an error on line one character 35,000 which is less than helpful the one disadvantage of this if you consider it a disadvantage is that someone else could go into your lambda and read your code but if the only people that can access your AWS account are your colleagues or people you trust then that should not be an answer our own issue because no one else can access the code inside your lambdas unless they have access to your account and access to read your lambdas because lambda code is not public thank you for watching this video well we've learned how we can use webpack and service webpack to improve the way that we deploy our service application we've done this so that only the code that we need in the lambda is uploaded to the lambda this is a much more secure way of doing things and it improves our deployment if you found this video helpful make sure to give it a like because it really helps the YouTube algorithm find that these videos are useful and if you want to see the next video in the series make sure to hit that subscribe button and turn on that Bell notification so that you get notified when it comes out and hopefully I'll see you again in that next video

Channel: Complete Coding

Views: 6,100

Keywords:

Id: N56FtfXiD4A

Length: 10min 23sec (623 seconds)

Published: Thu Apr 30 2020