Making Websites With Next.js And Strapi - [10] - Deploying To Digital Ocean

now we are going to deploy our strappy API and our next year's application to digitalocean and put it online so to do that we are of course going to be using digital ocean and open Lightspeed administration panel and the server which is going to help us to put all of this together and so that we don't have to do absolutely everything by hand also if you want $300 in your digital ocean credit for 60 days please use the referral link currently on the screen also the link is in the description below you will get $100 for 60 days and so you can tinker around with digital ocean and for every $25 you spend I will get $25 also on this digital ocean grid so everybody wins now that you have signed up to digital ocean with my referral code you got your hundred bucks and you are able to tinker around with stuff on digital ocean like for example deploying your strappy and next year's application so we are just going to go to create click droplet and robot is just a place where you are going to deploy your apps or a server in normal terms so we are not going to choose any of these images but we are going to go to marketplace and search for Lightspeed as you can see you have four options we are going to choose no js' one of course for the plan we are going to choose standard here we are going to go with the cheapest option of course so it's going to be one gig of ram one gig one CPU 25 gigs of SSD and one terabyte of transfer you now need to choose the region of course choose the region needle nearest to you so I'm going to choose Frankfurt one and here for the authentication you can choose between password and SSH keys if you are already don't have SSH keys I urge to add them because it's much easier to work with SSH keys with passwords so choose whatever you like and I think that's about it let's just name our project next strapping okay and I think that's about it create our droplet now the top droplet has been created let's SSH into it so I'm going to copy this IP open up my terminal and you just do a sage root and then the IP ok so once you log in here because of this image you have few things you need to take care of first of all if you have a domain you can add your domain right here we are not going to be using this right now but you can add it so for now I'm just going to ctrl C out of this and it's going to ask you this every time you SSH into your server until you set up your domain so it's a nice thing that open Lightspeed does for you also you have an access to an administration panel and to find out the password of that administration panel you can use this command right here so cat that Lightspeed password let's just write so this is the password for my administration panel so if I go to my browser copy my IP again and paste this in I get hello world from open Lightspeed nodejs great so our site works so if we wanna access our administration our open Lightspeed administration you would go to port 78 however this currently doesn't work because open Lightspeed is going to set up some security for you also some basic security so it's going to close down some ports actually it's going to close down all of the ports except for port 80 and I think port 43 3 which is used for SSL so we need to enable this port to be able to access our administration and to do that you just go to a terminal and you do you fw allow and then the number of the port and in our case that port is going to be seventy eighty okay and while we are here let's just do the same thing for the port 3000 because our nexus app is running on that port and also for the port one three three seven because our strappy application is running on that port okay so we allowed some ports enable them now let's go to our actually let me just do something here so we will need this password again i'm going to copy it now let's go to our browser and as you can see this now works except we don't have a certificate so it says it's not secure you click on advanced and proceed to this destination and now we are greeted with this login screen for open Lightspeed administration you just do admin and the password that we just copied and now you're here okay so here we can set up our virtual hosts for our application and also listeners for our application which is which are the two things that we are going to be doing in open Lightspeed administration now we are going to create our virtual hosts so you go right here as you can see you already have one virtual host called example so we are going to create another one we are going to call this one strapping and root is going to be strapping with a slash and the config file is going to be comfy H hosts strappy VH kampf Kampf okay so this is our config file if we try to save this it's going to say that we don't have it and that it doesn't exist so we just click to create it is created successfully and also just say yes to all of these options right here save this great now let's create another host another virtual host actually by going here again and this one is going to be called next step profile is going to be also called eh hosts but instead of strappy of course we are doing next step and VH Kampf calm yes yes and try to save it it doesn't exist click to create great save this now all we need to do is gracefully restart our server and to do that you just click on this button right here click go ok so now our virtual hosts are kind of set up not exactly we need to add as you could see right here so come on it's some time does this I don't know the first time you create a new virtual host so now you have this virtual host config file and we are going to fill it in by using SFTP logging into our server and then just copying to files that are already prepared they are also going to be available for you on github in the digitalocean directory so I will of course leave a link down below so you can use anything you like for this step I'm using forklift but you can use FileZilla or any other SFTP and FTP file manager that you like so to set up set this up I'm just giving it a name of next rappy it's the protocol is going to be SFTP the server is my IP address and the username is just root but of course if you opted out to use the password instead of SSH keys you would have to add the password password here I currently don't have to do that I'm just going to click Save and then I'm going to log in to my server so I'm currently my root directory now everything we need is inside of us our LS us our local LS WS directory so this is the Lightspeed's directory from which it controls everything so if we click here you can see that we have this example example right here that's the virtual host that was already present when we first entered our open Lightspeed administration so let's just just like we have this example right here let's just create a strep directory and also next app directory okay so now we have next step we have strappy first thing we need to do we need to set up our V vhosts config file and those files are in Kampf and then we we hosts and then next step strappy okay so in the project files so on github if you download it you will have this digital ocean directory and then it you have a few files so first of all let's go to V V hosts and next step strappy as you can see we have next step and we have strapping so if I go to next step I'm just going to go right here and rewrite this file replace it okay and we do the same thing for strapping just copy over this file now these VH come from files are the same files that you get in this example folder except if we take a look at them as you can see they have this references to the example directories we just remove all those references and replace them with either strappy or next step great so those are our VH comm files so now let's set up folder structure for directories in which we are actually going to host our files to which we are going to deploy our files so let's first do it for next step if we go to next step as you can see this is an empty folder so just go to folder structure right here and copy everything from it to next step and of course as you can imagine this is the same folder structure that you get in your example directory and let's do the same thing for strappy okay so let's go to our strappy directory we are going to do this one first if go to HTML then you go to note you get this F dot J's file if we take a look at it it's just it just says hello world from open Lightspeed no J's so we want to change this to say hello world from strapping save it if you go to your IP you are currently getting this message hello world from open Lightspeed node.js and this is because if we go to our administration you go to listeners you go to this default listener which is listening on port 80 which is default HTTP port so you just do default and as you can see it is using this example virtual host so we want to change that to strap it click Edit just choose strap right here save it and then of course gracefully result server click it go okay so now we are using our strengths virtual host if I go here refresh this page as you can see now we are getting hello world from straitly great so this works now what we need to do is we need to transfer all all of our stripey files to that node folder and then set up strappy and make it work somehow so on the left side of my film a file manager I'm currently in my stripe folder and on the right side I'm also in my stripy folder but on my server so strappy HTML node great so we need to copy all of our strappy files here actually not all of them you don't want to copy all of them so we are going to copy API we are going to skip built also you don't wanna copy this sketch idea TMP so you do kampf extensions public then let's see you right here so you need package lock and Becky Jason and that's about it also favicon that's it so you copy only these files because we are going to install strappy on our server so install all of its dependencies and build its administration panel so just click copy and wait for it to finish so now that we copied everything let's go to our terminal and now we want to go to that strappy folder and to do that you do CD so us our local LS WS strappy HTML and node great so this is the directory if you do LS as you can see these are all the files that we currently copied so first of all we need to install all of the dependencies you do that but by just doing NPM install once this is done once all the dependencies have been installed we need to build our administration area for stripe and to do that you just do note N equals production because we want to build it for production NPM run build once this is done you can maybe MPM run start to actually runs through IP application and now as you can see it tells us that you have to go to localhost 1 337 admin to create your administration account if we go to our browser you just get this screwed-up stripey page I don't know what why this is happening I think it's reading something from the public folder and then displaying it so you need to go to the port 1 3 3 7 admin great so this works except it actually doesn't work because if I exit out of my terminal session or if I quit out of this by doing ctrl C so I just terminate this application now if I go to my browser and refresh this page of course we are not going to get anything so how do we handle this situation well we want to create start dot J's file which is going to start up every time our server restarts so that is one more thing that Lightspeed is doing for you so if something happens and your server restarts it's going to look for that file and automatically start up your application so if we go to forklift or FileZilla or whatever you are using in the digital ocean folder you have start files so I'm going to go to start file strappy and you have this start J's and as you will see this is a very simple file which is just requiring strappy and then running straight start that's it nothing else so we are just going to copy that to the root of our application so star Jess is here right now and now we are going to go to our administration you go to virtual hosts then you go to strapping then you go to context and then you go to here or click at it and as you can see you have something called startup file so we are just going to define our startup file to be started jeaious now ok save this gracefully restart our server so now if we go to our application or our IP if i refresh it you get this read page again but if I go to admin you get to strap you admin and we are not running anything inside of our terminal as you can see it is completely empty ok so this works but it doesn't work the way that we want it to work because as you can see we are accessing it through admin out register and we are not defining the port we don't want to do that because we want our next application to be just on the IP and our API on port 1 3 3 7 so talk so to correct that situation we are going to go to listeners then you go to this default listener and you change this port from 80 to 1 3 3 7 save it gracefully restart ok now if i refresh this page as you can see now this site can be reached but if we go to port 1 3 3 7 now it works ok so here you would just add your admin username password and your email address and you click ready to start so now our strap is working however you don't have any data from your local installation of strapy and some things do not work so for example if you go to this page and you go to movies you get forbidden ok so first of all I just create a movie so we add a new movie call it a movie you set release date for example and you set us like a movie great save this now we have our one movie here but again as I said this still doesn't work and it doesn't work because you don't have public permissions to access this endpoint so we are just going to go to roles and permissions you go to public and for every content type that you have you just add count find and find one okay and then you save this and now if we check out the movies endpoint as you can see now it works great so our API is currently working what we need to do next is we need to make our next GS application also work so just like we did with strappy we need to transfer our files so I'm going to go here go few steps back and find my next step inside of us are local SS l s WS folder and then you go to HTML you go to node currently we have only app GS or here so we want to copy components contexts pages public theme you don't need us config you need next SEO config next config yes package lock and package JSON files and that's about it do not copy the next one now in our terminal we are also going to go a few steps back so to be us our local LS WS and you see the into next step and then HTML and then note okay so we are here right now now of course we need to install our dependencies so you just do npm install now once this is finished you can create your env file because in our env file we are going to have the URL to our API which is of course going to be different for our production setup and for our local development setup so you just do Nano that env and in it you would do API URL it is going to be equal to and it's going to be equal to this right here so all right be address will 1 3 3 7 copy this and just paste it in here so this is going to be our API URL you do control X to exit out and it's probably going to ask you if you want to save it I already saved this one so we have our env file setup next thing we need to do we need to build our next JSF and to do that you just do npm run build and of course just like with our strap yet we need to have some sort of a start startup file I copied this file from next year's documentation so we are creating a custom server inside of our star J as well because you can't run it easily like you can strap it but it's nothing too complicated we are not going to go into it you can just copy that code either from documentation or from digitalocean folder in github repository so here I'm going to create start J s file and in it I'm just going to copy everything from that file that I have in digitalocean so I'm not going to copy it like I did for strappy so go to digitalocean start files next step and if you take a look at this you have this code right here so we are just creating a custom server which is going to run once we set up our startup file ok copy this and then I'm just going to paste it inside of my start J's file on my server do control X say yes enter and that's about it so now we have our start dot J's file and in fact we I didn't show you this for strappy but if you just do note start J's you should be able to run your application like this so this is exactly what startup file in open Lightspeed does so I'm going to quit out of this because of course we don't want this to run or a server and next thing we need to do we need to go to our administration to Lightspeed console of course and go to virtual hosts next step you go to context and we want to edit this observer context and here for the start of file just like for strappy we define start GS save this and refresh the page okay so now if we go to our I be okay if you go to one three three seven this works we also get we are also getting this even if we go just to our IP without the port because it's still pointing to strapping so what we need to do we need to create another listener so we are going to go to listeners and create a new listener which we are going to be calling next step so it's going to be called next step the port in this case is going to be 80 not 133 seven or 3,000 and this is not going to be a secure virtual host so we are saying no because we don't have a certificate and then we save this of course gracefully restart and now we have next step default so default is going to put port 1 3 3 7 while next step is going to port 80 and of course I forgot something this won't work because we didn't map our virtual host right here so let's do that you do next step for virtual host and for the and for domain you just do our IP address without HTTPS so save this and again gracefully restart okay so now let's try to see if this works so we go right here and try to refresh this page okay sometimes this doesn't work immediately so try to exit out of this and rebuild your Nexus app again so we are going to go right here and do npm run build okay so let's try it now you can see our application now works however we do not have navigation right here because we don't have any navigations defined in our strappy we have a movie so if we go to it we get to a movie if we add another movie to our administration strapping administration of course so you need to log in again so you will add another movie not now sorry set up release date don't forget to set up the slack because if you don't then when you click on that movie you're going to get an error so the slug is going to be another movie save it okay and now if you go to our rep as you can see we are immediately getting another movie if we click on it we get a movie and so on ok so da now this works and this is great I must tell you the preparation for this video was very hard so I took I spent at least two days figuring all of this stuff out so I'm just going to leave the links to the documentation that kind of helped me while doing this so you can maybe read through it and maybe do some things differently if you don't like how this is set up also don't forget to use my referral digitalocean link so you would get hundred bucks for free for the next 60 days and whenever you spend 25 bucks I get 25 in digitalocean credit and everybody wins so and well guys this has been it for this video remember everything we did here will be available for your github the link will be in the description below and as always thank you guys for watching and I will see you in the next one [Music]

Channel: Watch and Learn

Views: 12,655

Keywords: strapi, next, next.js, tutorial, deployment, digital ocean, JavaScript, OpenLiteSpeed

Id: IktnuT9UgbM

Length: 27min 34sec (1654 seconds)

Published: Fri Jun 12 2020