Building and deploying Next.js applications with Docker

hello and welcome everyone this is arman and i'm very happy to be with you today on this very special occasion of tucker's ninth birthday and in this great event docker community all hands number five with all these amazing speakers and all these amazing talks make sure you check them out as well today we're going to be talking about next js an awesome meta framework built on top of react and how you can efficiently use it with docker both in development and in production at code we've been using nexus in production for quite some time now and this is going to be a hands-on talk where i'm going to share some of these practices with you that also could work for you but before we jump into that topic let me introduce myself quickly i'm arman i'm jalar i'm right now leading a company called coyote and coyote is a school of software engineering where we work with career changers and create a new generation of software engineers we also partner with startups and become their technology teams and we build their technology products um now i like to talk a lot i'm a conference speaker and i'm also an open source author i have numerous libraries and projects available on github if you're curious that range from front-end libraries to microservices frameworks to guitar processors in the browser to brain signals processing and so on and so forth now without further ado let's get to the topic again today we're going to be talking about next.js which is i think aptly named next because it kind of resembles the what we should be doing in 2022 with web development the next generation of web development um but before we get to that let's talk about the problem specifically the problem with react or more general the problem with web development now it's complicated there are tons of tools tons of libraries technologies that you need to learn and to choose from and there are several good bad and better ways to do seemingly simple things like routing or state management and i know don't shout at me when i say these things are simple but they are supposed to be simple or they were before um and everything relies on javascript to run in the browser sometimes downloading megabytes of javascript is necessary to render an otherwise static web page and this makes the web a really slow and painful experience i mean if you're watching this video i'm sure you're well aware of these challenges and the the current frameworks that we have don't really make it an easier journey for us and cue next to us which is almost a lifesaver in this situation seriously go check their web page they have an amazing web page with a lot of examples one of the best documentations i've ever seen in the open source community and they have those examples on github so you can easily see and learn how to use next.js for your specific scenario and so here is a trimmed down version of what nextjs can offer to you my favorite one is by far service side rendering because it gives me the ability to make my marketing teams happy by doing service side rendering what it takes is it what it does is it takes your react application renders its server side and sends to the browser a fully rendered html that is still interactive after the browser finishes downloading the necessary javascript files for react and others and we call that that process hydration so this is a very effective strategy of speeding up your web page sometimes a little bit but also serving your seo needs and also for people who have javascript turned off or people who don't have that much bandwidth it is super straightforward for them to download a very simple html so the overall perceived performance of your web page is like off the charts nextgs also works with typescript and sas by default out of the box it kind of tells itself as zero configuration and you can get started without any config which is amazing if you compare to webpack and others it also does static site generation like your blog and so on you could do it with other frameworks as well but i think next.js is in the sweet spot of like flexibility versus ease of use it even allows you to build apis so you can even use it for your backend as well instead of express if you would go down that route i'm not sure how feasible that is but you know your miliage may vary overall it has an amazing developer experience and that's why we love it and we try to use it in as many projects as we can but now enough talk let's get to coding and let's see how we can work with next.js inside docker now i'm going to switch over to my ide and i have an empty folder set up to create a next.js application and then put it in docker i'm going to create by the default command yarn create next app period to create in this folder it's going to take about 10 seconds to download the packages and install them because i believe i have all of them in my cache already so this this gives you a bare bone next.js application and you go ahead and start it with yarn dev of course you could also use npm for this um you see the app is up and running let me switch to the browser and there you go this is what you see by default when you create a new nexus application this is your default screen and it's actually pretty good it's running as a dev server so it has hot reloading and everything turned on so let's head back to the repository one great thing about next.js is that your routes are set up as files in your file system so this is the index.js that we're rendering right now you can change this to anything you like welcome to the new world of next.js and if i switch back to the browser you're going to see it automatically updates and whenever you change it let's change it back it updates automatically as well this is nothing fancy right now let's add a new route i'm gonna duplicate this and rename it docker and say happy birthday docker yes amazing now let's go to the browser and switch to docker and there you go happy birthday yay you can also change this without restarting the server happy memory is darker all right now nothing too fancy yet there is also the possibility to do a production build how you do that is by running yarn build and it gives you a dot next folder that actually has all the production files that you need you can directly deploy it or you can do yarn start and it starts the production server this time there won't be any hot reloading because it's running an optimized production version and it's going to be much much faster of course so this is how you run your production application which is great but how do we run it in docker how do we make this a seamless experience for all of our developers so that they have the same experience as the production server regardless of their operating system so what we do is let's first for example start with a very simple development docker file i'm gonna go to the root and add a new file hill here and here we are so the simplest way to start with a docker file is to basically start from a base image what we're going to do is we're going to pick a node.js based image let's say node 16 alpine and it's also a good idea to always create a working directory for your application otherwise your files will be on the root file system which is not a good idea let's put them under an app folder now what what you actually do when you do yarn create is you pick a template and what we're going to do a similar thing here we're going to copy our package json and our yarn lock files to this app folder these are what are necessary to install this application and then i'm going to run yarn install basically this installs your dependencies that are out of the way so this layer will be cached whenever you need to rebuild this image which is great if you don't change your packet json or yarn like json you don't need to run these layers and run yarn install again which is actually a slow operation so you can quickly move ahead next up i'm going to add my next config.js so copy next config js which is all the configuration you need to start and then we have a couple of folders here we have the pages folder public and styles so i'm going to go ahead and add them as well these are all the folders that i need right now to run my application if i need more i need to copy them still and finally the command to run our application is yarn dev it's what we did in the terminal so this is actually very simple we create these files do yarn install and then do yarn dev that's how we run our application next up in order to work with this better i would like to create a docker compose file because i'm not going to build and run this docker image on its own i need a docker compose yaml so even though it's not quite necessary i start with the version declaration i define a service let's call it an app service the image name should be docker next.js i don't know dev the build instructions is very straightforward just build this folder and we need to define the ports that we have let's find port 3000 and we should be good to go now we run this by docker compose up but i always add two more and that is build and force recreate now this basically builds your image from scratch and runs your application you see it's it has compiled let's go to the browser and see if it's there yep happy memories docker it's there welcome next.js it's also there yep all good this is now running from my decor compose file which is super neat let's head back all right let's review what we did we have a docker compose file and we have a docker file super straightforward we have a base image we copy our files and we define a command yarndev and in dockercompose we build the current folder define some ports so that our application is accessible and everything is good there's a challenge though if i go and change happy memories back to happy birthday you will see that it's not automatically updating my browser in fact even if i refresh it's not updating because hot reloading currently doesn't work in this build that's kind of a bummer because in development you would actually really benefit from hot reloading there is no need to go back in experience so in order to enable that we need to change our docker compose a little bit and we're actually going to mount these folders these pages publican styles folders to our docker container so that tucker can read them live and pick up any changes and do whatever it needs to in order to refresh our application so i go in and type volumes and here i need to add pages to app pages public to app public and styles to app styles now if we run the same command again docker compose up build force recreate you will actually see that the application is updating in real time you can see it in the console when i'm changing and saving the file it is recompiling which is actually super good let me switch to the browser happy birthday happy memories happy birthday happy memories all right so we have a development tracker file now just because we mounted these folders we can actually remove them from our development docker file which makes it super simple you just add your packet json yarn lock yarn install your next config and then just do yarn depth you don't need anything else and this is your decrement decker compose development file where you mount your volumes super cool it just works now the more challenging bit how do we make this run in production what should we look out for in production now for production builds we need a stripped down version first of all it needs to only run it needs to only include what it needs to run and it needs to be performant it needs to have a small image it shouldn't include any artifacts build artifacts or unnecessary um libraries and so on so next.js already gives us a production build but it's only for next we also need to do a production build for our decker container and now i'm going to talk a little bit more about the best practices of building a front-end docker container for production to run in production let's go ahead and create a new docker file i'm going to call it docker file dots production now this is a little bit challenging i'm going to paste an entire file which is a dried version of an example that you can find in the official repository from next.js but i'm going to be talking a little bit more in detail what it does so it's like from 10 lines we went to maybe 50 lines um let's let's see here we start with the same base image but this time we call it dependencies we're going to use a multi-stage build here in docker it's an amazing feature in which it lets you discard intermediate layers and come up with only a tiny image composed of a small number of layers so we do use the first layer to install our dependencies we copy our package json file and yarn lock and run yarn install be careful we have frozen lock file here which is super important to ensure that you only install the exact versions that are specified in your yarn lock and then we're done this layer is done it's going to be cached and when it's used in the final production image it's going to be thrown away we don't need these layers at all in our production image in our final image this basically saves you from doing one single run command with a bunch of slashes and ampersand characters and so on that's what we used to do beforehand now in the next layer we're going to use a builder and we use the same base layer base image and what we do is we define our working directory again this time we copy our next.js configuration file we copy our source code as well pages public and styles and we run yarn build this is the layer that builds your production application now we we ran that command before we know that it gives us a production optimized build now as a last step we have the runner the second step will also be discarded in this final production image it's only going to be this layer the third layer the final layer in production and this is where we create a new user and we stop using the root user and switch to next.js user you can read more about the security bits of why it's important to use a non-root user in production but what we do is we copy the public folder the static folder and a folder called standalone from next.js now next has this amazing capability to create a standalone version of this application to run in production which means you don't have to do any management of a custom package.json or your you don't need to worry about like development dependent dependencies or anything it is a trimmed down version production optimized version that can run on its own you don't even need yarn or whatever so there in that regard it also gives you a new server.js that you need to run with node command so this is going to be our command node server.js all right so this is the production build it is a lot of steps i encourage you to take it line by line to go through it and see what it does it's not super complicated and the best thing is this gives you the minimum amount of layers in production now there's one more thing we need to do in order to make this work nexus has an experimental feature called standalone and we need to activate that for this build to work and you you do that by going into next config.js this is only the only configuration you actually don't even need this file up until this point you put an experimental flag of output standalone true you do this it creates the standalone build and you can run it with node server js now again in order to make this happen let's add a new file docker compose production let's not change this docker compose production yaml and here this is actually going to be way simpler i'm going to again define a version i'm going to define my services app image let's call this docker next.js for production i need a build step the docker file should be docker file production i define my ports and i think we're done let's go now let's stop this now in order to run this you need to add the production file name for docker compose so it's going to be docker compose minus f docker compose production yaml up build force recreate yeah it's running the multi-stage build a little bit cached and we already have our application listening on port 3000 let me go and try that yep so if i switch to the browser and refresh you're going to see we have happy memories and welcome next yes now of course it's not going to update let me switch back to the codebase it's not going to update when i change happy memories to happy birthday switch to browser refresh it's not updating because this is a production build this has this doesn't even have like any of the source files it doesn't know how to build this for this to work we have to rebuild it from scratch so we run the docker compose up command again and we run yarn build again this is like a tongue twister we run yarn build again and when we switch back to the browser and refresh we see happy birthday happy birthday doco all right basically this is all there is to it to run next.js in production you can use docker compose in production as well that's something i really like to do because it's really easy to define your services in this fashion and yeah that's it there you have next year is running in docker both in development and in production it's not a lot of lines it's a very good starter for your development and production efforts and feel free to use the code base i'm going to put this up on github i'm going to share the link with you in a second let me switch back to my presentation yes all right with that thank you for listening to me thank you for watching my talk today it was an amazing experience to be with this great crowd here um you can see this the link to the slides under to the repository feel free to play with it feel free to download it change it however you like and if you run into any issues or if you want to chat just drop me a message on twitter and i hope to see you next time happy birthday docker i'm really happy that you're with us and i'm really happy that we're doing this together bye-bye

Channel: Docker

Views: 41,532

Keywords: docker, containers

Id: aNh8iShFXto

Length: 26min 8sec (1568 seconds)

Published: Fri Apr 01 2022