Deploying a Next.js 13 14 App on AWS EC2 with VS Code - Step-by-Step Beginner's Tutorial

hello and welcome to this tutorial on how to get started with Amazon and its ac2 instances so we will see how to start an instance from scratch from creating the instance to launching it and then connecting via SSH using us code after that we install a nextjs application and start the hello page the guide is quite basic so it's suitable for beginners no specific background knowledge is required and of course you'll need an active AWS account and also W code installed in your PC so let's start with the activation of the Hance then we access your AWS through the BS code we access directly distance important note we always log with an E user profile not the rout and this is because it's not recommended to log directly from the root for security region and of course the root Administration profile as the complete isation privileges over the entire account rout should only be limited to administrative operation so we log into our uh aim profile with permission for operation only for in this case for ec2 then access the ec2 directly we are in the uh AWS account search ec2 in the bar so we can find ec2 here's the dashboard this is the the list of my ec2 distances we launch a new Hance so we go directly we push the button we give the name of the Hance the name can be nextjs uncore oral is okay and after that we choose the Linux distribution and you can find many system and I will always choose Amazon Linux for various reasons first of all this Linux version is optimized for AWS it means that that there is that team that always optimize this distribution and release a new version uh it's an excellent choice for rting web application in it E2 and mainly due to its stability and continuous optimization yeah so it's regularly updated by AWS te so I recommend using it in the clown environment alternatively you can choose many other type of Linux based instances such as Ubuntu windows redet and many others or you can also upload your own version so we choose Amazon Linux the last distribution is the 2023 the architecture is uh 64bit is okay the instance type here essentially we can open a door on a parallel universe which is the world of instances in E2 offers a vast array of instances to meet your specific needs this range uh include many kind of instances for example for machine learning with a high performance JP for graphics rendering other kind of instances for special Ram request storage systems and more the T3 family provides fairly standard distances for common application and so we will choose the3 micro that actually is free in this is in the free tier we will generate a key pair if we don't have we can generate one I already have many key pair I can choose this one xjs the very good tutorial that actually is the same oh it's not the same but I will use this one and we go and we create a new Security Group in my case I will use an existent security group that is I can choose this one later we will see how to set it the storage is okay for gigabyte and there we go we set everything so we can launch the instance we wait so it's really fast a few seconds we have our instance ready we go to the instance and we can see the new instance that is already running and is initializing if we click on the instance we can see many information we can see that this is the public address so we can access directly the instance through thep this is the DNS we can use that for this I mean in the west code for SSH connection and then we have many other information we don't go in deep in the E2 instances because it's a really extended topic maybe we can see in later in other tutorials we just check the information that we need for the connection so the instance type is three micro this is the VPC all the details and this is the security group so I already use the security group let's see uh in detail of the security group settings so we can addit the inbound rules and the the important is the SSH for connecting so I just authorize only myp in this case so you can choose myp or any P that you want and I also keep the 3,000 port to connect nextjs Local Host this is important to allow nextjs to connect in the Death Mode we can allow every p and we save the rules so my rule actually already saved I didn't make any changes so after that we can go into our V code first of all we are going to set a new SSH connection before before the connection please add the extensions a remote ssed that this will allow you to connect directly to external server and also remote SSH editing configuration we go to the list of our SSH we wait this loading okay here we go it's all the connection already set we go to config and this is the list of the server connection we can add the new one so we copy block the the most important information is this four so OST name identity file and user of course we can add many other attribute but in this case we only need this three so the OST is going to be the name of our instance the name of our instance we just create now is nextjs the Vergo tutorial sorry it's not this one this is terminated is nextjs tutorial we set here we can we put the name of the instance we also need the the DNS of the instance that is this link We copy and we paste here before connecting we have to set also the the pointer of the folder where we put the the pen file with the key pair the file we already download before and here we go is this one we can put directly in the SSH folder in our windows or if we use Linux we can also set L folder here in Windows is here user s and we copy here so this is our key pair that we need for the connection so we change the name here okay after that we save it and we upload with the update sorry the the new connection so you just wait some seconds and automatically you will get it here we just wait here we go we see the new connection to our nextjs tutorial instance so we go to connecting the new window we just wait few seconds and yeah it's connected continue it will confirm and there here we go we are connected with the instance so here we can see all the folders that actually we are in the E2 user folder that is from the home folder in Linux so now it's time to install nextjs before installing nextjs we need to provide no JS and install no no. JS in Linux because it's required from nextjs first of all we check if we have nodejs we don't have so comma not found we want to install the latest version of nodejs we can go to this link that actually is on with gab it's gab.com node Source distribution Amazon Linux version we want to install the letters that now is the 20 version 20 we copy the script this this script directly in our terminal and there we go we wait that Eno install nodejs we wait that's great so now we can check not version just to be sure that everything is done correctly also NPS valid perfect we have the version 10.1.0 so we can see also Ino seted the folder npm the not package manager and now it's time to install the nextjs so the next maybe we can also before installing xjs we can also update the Linux packages so we can just sudo update nothing to do anyway we can is always a good is a good habitude to update all the package to the last version at this point we can install nextjs so we digit npx create next app latest and here we go we install it okay so now we have some questions create we proceed is okay so we give the name of our folder we can call the Vero we want to use typescript yeah I prefer typescript because is actually nextjs is native in this case we sell select yes s length yes the wi CSS if you use this framework is it's really good actually if you want to use boot or other CSS framework we can also don't install tail win I like it Tailwind so I install Source directory we don't need because we want all the fer to be created directly in the hoer level of the app rout so the app rout is the latest paradigma introduced by nextjs that replace the holder one the pages router so we can confirm we don't need any import alas this is the prefix that uh will be applied automatically to hold the import in every file so we don't need actually any prefix so we put no and we wait that all the package will be installed we wait for the installation it's okay okay so next GS is installed we have the new project folder thego as we specify in the process so inside the the bgo we have many F we have some folder folder H with where we can put all the routing Logics the node models with all the model that nextjs use we can also install more later for our application public for all the static stuff and everything like a jaon and here we go nextjs is installed so we want to launch the script because in this tutorial the last step is to launch our first hello page actually is the nextjs default page we can use next Dev we also have other script that we will see later in the tutorial da will launch our next environment for development purpose and uh that's what we're going to do now but first we have to go in the folder in in our project folder CD the bgo and after we start we and run Dev so it will start our page on locost here we go local post this is the default page of nextjs and here is the page wait loading here we go nextjs page we have reached the end of this video tutorial and I genuinely hope you have enjoyed it content if it has been helpful to you please show your support by liking the video and sharing it with your friends on social media if you haven't already I warmly invite you to subscribe to my channel to stay updated on upcoming lessons don't forget to check out my website the verol labs.com where you will find a pleora of interesting programming content you can also send me collaboration request and explore all the programming Services we offer your participation and support are crucial in my growing and to grow this community and providing you with even more valuable resources thank you for the bottom of my heart for being here with us and I look forward to seeing you in the next video tutorial

Channel: Programming with Devergo

Views: 1,491

Keywords:

Id: npv0fSQ5stM

Length: 13min 1sec (781 seconds)

Published: Mon Feb 05 2024