Deploy Next.js application to AWS EC2 using GitHub Actions

hello and welcome back to integration ninjas in this tutorial we will learn how you can deploy a next year's application on aws2 instance using Docker containers and GitHub actions next year is a popular framework for building react applications offering server side rendering static site generation and a rich development experience in this tutorial we will walk you through the process of deploying a nextjs application to a virtual server on aws2 uring scalability reliability and ease of management we will leverage Docker containers for packaging our application and dependencies allowing for consistent deployment process across the environments additionally we will automate the development uh the deployment process using giab actions enabling seamless integration with all Version Control workflow our next just application includes mongodb for handling create and list operation you can add any other operations as well if you required it will provide a full St solutions for building a dynamic web application by the end of this tutorial you will have a comprehensive understanding of deploying next year's application on aw2 dockerizing your application on portability and automating deployment with GitHub actions let's dive in and get started with deploying our xjs application on AWS ec2 so let's understand what we are going to do we'll have a repository where we are using the next next JS and the mongodb we have two jobs one is build job and another is deploy job okay so we have build job where we are in that job we are going to create a en EnV file with the secret credentials that we are going to handle so every node and react project we store a EnV credentials for the local environment and the production one we have some different environment files so that we are going to create on the runtime and we'll build the project with the docker file and we'll publish that Docker image to the docker Hub and we'll register a self hosted runner on the data boed Runner and the deployer job will just pull the image from the docker Hub and will run the next year's application as stalker container that's a simple workflow overall now let's set up something that we need first we can set up the mongodb instance for our project need we can click on the project and let's create it as nextjs hyphen app okay and let's create this create this project okay and this is completed now create a deployment so let's click on the database now build a database and we are going to use the m0 free one for Learning and exploring the mongodb you can select any other as well if you have now let's name this as cluster name as da cluster and leave the settings as it is and create the deployment okay and correct so this is the password and the username that you are going to create database user okay so these details I'm going to delete this project anyways you can see this password but you should not share this details with anyone else okay since this is in progress choose a connection method okay this is done and we are done with this things here and now we can go to the ec2 we search here E2 and click on the E2 and let's create a aw2 instance okay and let's click on the launch instance and let name or E2 instances next app and the uban 2 we are going to use uban 2 and the free tier eligible one and we'll leave the settings as it is and we can select a key pair that you want to use to securely connect to your instance and let's launch this instance that's it and the instance has been successfully created so here we can access the instance directly from the UI as well so let's do this here we need to do a few things here okay it's still having some issue seems like let's try to connect it again yeah this is connected we can we have the terminal access in the browser now so here let's update this uh we we need to update like so to up AP get update and the docker few things we need here so let's do this right away here since we have opened this so let's do this we are doing AP update and the AP install Docker and we are starting the docker image and then we'll see if the docker is up and running we'll see Docker PS This is not working so we'll give permissions here so this command is used to give permissions here and now let's see doer PS and we'll just restart this doer we can see the docker version as well all right so everything is fine here okay so we can do one more thing here we have this project here so we are going to do everything here right here we need a runner on the ec2 instance okay so what we can do let's click on the secrets not the settings and you go to the code and Automation and click on the actions drop down and select Runners and there is another Runner let me just remove this out we click on the new cellos Runner and click on the Linux and let's do this here let's create a directory actions Runner and move to this directory and then what we should do here is we should download this action binary and then we should unzip that it will download a zip file so we are going to unzip that and once this is unzip we are going to register the configurations like create the runner and start the configuration so that's it we are going to do here and after that we just need to start it as a container like Runner enter the name of the runner group default enter the name of Runner let's name it as easy2 let's skip this and the default work folder okay and that's it it we can just start the runner with this run Dosh it will start the runner here it's very simple but I want this Runner to be keep running in the background so here we need to like just open this terminal and see if we close it will be closed Runner will be closed if you see here the runner registered is offline now so what I should do click on this again and let's see this documentation here the application as a service here we should run these two commands here and we are good enough to start this as a backend service that's it and we can just see our runner will be up and running in the background we can see it will be idle here now yes now we are good so we have done our here now so let's go to the ec2 and let's see now what we should do here is we have this application here it has this uh page component page. jsx topic list which fetches the topics and add some topics nothing else so let's test this out do tnv okay we haven't stored that mongodb password right let's run this in local and see if it is working database and we need to do one more thing before this this we should allow this access from the anywhere confirm this and click on the database okay quick start uh database access we can see here the edit we can click on the added password we can autogenerate secure password we can see this copy and just update the user now we have password here so we'll just update this detail and we'll run this in the local npm run da and let's see how our application is looking like this is looking like a wow there is some errors still okay we need to update some details here in the mongodb DJs file we need to go to the database and we should click on the connect option and we should click on the drivers and should copy this URL and we should have this in the connection string we should update all this details here Dev cluster and other details as well so this looks good here all right so let's run it now okay now we can click on some uh topic one description one and add this topic so this is getting added so just delete this out okay we can see the details has been deleted okay so our application is running fine so now we are going to deploy this so how we are going to deploy this let's create a Docker file here so in the docker file like uh it's a very simple and easy process here so like similar like what we do for the node applications we are going to use uh base image which will be node 20 uh node 20 we are going to use we can use the Alpine image all right let's use this image and let's suppose as a builder and after that we will Define a work directory with the SL app and then we are going to copy the package.json into this directory package.json to this destination directory slash that's it and then we are going to run npm install hyph iph production and then we are going to copy everything from this directory to this directory after this npm install is completed then we are going to do npm run buil so if we see the package.json here we have two commands npm run da is to like feasible only for the development environment when we are deploying to the production we should use npm run build we should create a build package and then we should deploy with the npm Run start that's it so here we have done the same thing we are going to expose a port 3,000 and we are going to run this command here uh [Music] npm Run start that's it this is the docker file we need Let's cross check everything is fine okay this looks good here now we'll create a cicd file for our application uh we can go to the GitHub workflows and then we create a cicd do yml and let's name this F uh workflow as deploy uh nextjs application and when it should be triggered on the push events on the push events on this branches will be this particular Branch what is the branch name I don't know let's see this is deploy with ec2 okay now we will create two jobs as we have seen in this uh diagram build job and deploy job one is uh one will be the build job which will be running on the to latest that is GitHub hosted Runner but you can use your own Runner as well I'm going to use UB to latest which has all details pre-installed like doer and every other details it provides free access to 2,000 minutes so you can use this as well or you can use your machine as a runner that's also your choice here we are going to Define few steps here steps are first step is nothing but we are going to check out the source code uh check out the source and here we are going to use one action which is action SL checkout this is getup provided action this will check out the source code in that run directory and then what we are going to do is we are going to create a EnV file Okay so how we'll create the EnV file here okay so we are going to run a command here that Eco and this is just a simple script command the what we have in this here password right password is equal to Dollar so where we are going to store the password so this details we should store in the repository secret variables you should click on the secret and variables here in the security section and click on the actions and you can see the password here so you click on this you can edit this you can just add it similarly I will just update the password here okay what is the password here I'll just update it here you can create a new as well like any secret you can give but we have already added so we are going to use this and site URL which is nothing but this URL okay and it will be column 3,000 okay all right so we are going to use these two secret variables so how we are going to use in this cicd file here here is simply dollar and two c presses closing Secrets dot uh password and we'll write this information to the EnV okay and we'll do the same thing here we'll write a sign right underscore URL okay once we have so this this will clone this project and will create a EnV file with this details so you don't need to pass any Docker arguments or set this environment will or need to configure anything in the E2 it will be happened automatically so that's a EAS very ease of process so once is completed we are going to log into our Docker Hub suppose like okay okay before that like we can do we can just build our image uh we can see build Docker image that is nothing but we will run one command Docker build hyund T so in the docker Hub if you see you need to create a repository uh and you need to write your project name here you should add public or private repository I have already created nextjs app so I'm going to use the same repository name here so this name is nothing but integration ninjas D nextjs hyphen app okay and it will create it from this current directory and once this is created I'm going to log in into the docker Hub log to dockerhub and run this command here Docker login hyphen U and we need to provide the uh we need to provide the username and the passwords hph p and then this details so here we can just write it here as secrets. talker username you you can add the secret details in your secret variables it should be Docker password I have already added you also need to add the same things here you should not expose this you can hard code as well but this is not a good practice and once the login is completed we are going to publish the image to the docker hub publish image to dockerhub so once this is completed we what command we should do we should just do Docker push this integration next app and we'll just give a tag to our image which will be the latest one always that's it we can use GitHub Dosha to make it unique so that's on your choice now we need a deploy job once this build job is completed that should be triggered after the build job only okay so this is fine and it should be running on the runner that we have created uh on the AWS the name we can use selfhosted for selfhosted rner and uh here we need to add some steps those are simply but here we have complete access to our AWS ec2 instance that we can see here we have complete access we can run any command here so now what we are going to do we are going to pull the image from dockerhub pull image from dockerhub and we are going to run the command Docker pull this image all right and once this is completed we are going to run this as container uh run Docker [Music] container we are going to use Docker run hyph d hyph p and we we have exposed the 3,000 port and we will allow one port from the security group that will be 3,000 so that's fine all right and we'll just uh we can give a name to our container which will be nextjs app container and that's it I think yeah that's that should be fine and we can just give a image name as well here so we are going to good here that's it next just app so here we can I I'm thinking to add one more step actually here let's uh Delete the old container if exist delete old container like if we deploying the next time let's add that as well I was thinking of that to add uh docker RM hyph F and the next GS the same container actually otherwise it will give a error that container already exist or something okay now we are good here this should work properly one more thing is left is we can just uh enable this Security Group go to the security section and in the security group we just click on the inbound roles add rule which I we have exposed 3,000 right and will allow access that's it and now let's deploy this to the branch get status all right so everything seems to be looking good get add dot get commit hyph app deploy to AWS ec2 get push let's see if the action is triggered or not okay action is triggered we can see the two jobs deploy job will be triggered once the uh build job is successful so here we can see the process here build Docker image so create en EnV is successful check out is successful ful and the docker image is in progress here so whatever the commands we have written here so everything is working here seems to be looking good here since the EnV Concepts we have just because we have copy everything from this directory and we have created this directory runtime so EnV we have created so this is in the local code and we will be copied to the docker this directory that's how it is working we'll see that okay so this seems to be completed publish image to Docker Hub let's see this the image here okay let it just finish this is image is post here and the yeah the section is completed once this is completed deploy job will start right here okay this is completed here now we can see the docker Hub this is the next year's app and we can see the image just updated few seconds ago that's it and let's move to the deployer job and we can see the pull image from Docker Hub is in progress here pull is completed and the delete old container since there is no container so it just throw some error response and the Run container has started this is the docker container ID on the ec2 now let's try to access our application with the ec2 public ip4 address you can tag it to your domain name that can be configured with the port 40 Port 80 and Port 443 for HTTP and https for this tutorial this is the way we are going to use okay so we can just see our application is up and running and let's see the topic is AWS Amazon web services and let's add this topic so we can see the topic has been added and we let's try to add some details here update the topic so this is fine and the delete is also we can do any delete here so let's add gcp Google Cloud platform let's add it here anyways and let's add some dummy data and let's try to delete this okay seems to be it's working fine so correct so we have successfully deployed this application finally and yeah so in this overall video like we have covered the entire journey of deploying a next GS application on aw2 using Docker containers and GitHub actions we started by containerizing our application with Docker ensuring consistency and portability across different environments then we leverage the G ACS to automate the deployment process streamlining or development workflow and ensuring rapid iteration in the deployment Cycles by deploying your next Jo application on aw2 we have unlocked the scalability and reliability of cloud infrastructure enabling our application to handle varing levels of uh traffic and ensuring High availability for our users additionally the integration of mongodb for Crea list operations and the edit crud operations has provided us with a powerful full stack solutions for building Dynamic web applications like within the single front end application if you see the application is front end application only but internally it communicates the you can see here the list mongodb doj it internally invokes the apis and it works like that we can see from the route section here API route. JS it internally connect the mongod DV so that's how it works here so that's how it works here and as you continue to explore the world of cloud native deployment and development remember the principle and practices covered in this tutorial whether you are building your next project or scaling and existing one the combination of nextg and Docker aw2 and GitHub actions offer a robust foundation for success in modern web development thank you for joining us on this journey and we look forward to seeing the in incedible applications you will build and deploy in the future if you found this video helpful don't forget to like share and subscribe for more content on web development cloud computing and software engineering until next time happy coding have a good day

Channel: Integration Ninjas

Views: 1,268

Keywords: ultimate guide to deploying nextjs and nodejs app on aws ec2, nextjs, nextjs 13, nextjs tutorial, nodejs, nodejs tutorial, what is nodejs, deploy nodejs app to aws, next js, 2023, node js tutorial, deploy nextjs app on aws, react, developer, reactjs, html, css, js, javascript, tutorial, frontend, webdev, dev, clone, backend, fullstack, motivation, reactnative, react-native, redux, typescript, deploy nextjs to aws

Id: sjTdluu1yDU

Length: 29min 13sec (1753 seconds)

Published: Thu Mar 28 2024