Deploy Strapi on Digital Ocean Full Guide

in this tutorial I'll be showing you how to deploy strappy on digitalocean app platform along with images stored on digital ocean spaces so strappy is a cotton measurement system CMS you can think of it as something similar to WordPress but without the front end so it's just storing your content just storing your data and so if you look at the pricing here you see that the compressing starts at 100 a month which I think is just not a not suitable for small projects you know you pay 100 a month one thousand two hundred dollars a year it's just a bit ridiculous so what we're gonna do is we're going to use a digital ocean to just self-host it for about one-fourth the price so let's just get started so the first thing you want to do is make sure you have node.js installed so to make sure you haven't installed you just go to your terminal and you can run this command node-v and it should say the current version that you have installed now the second thing you need to do is make sure you have a GitHub account so we're going to be basically pushing our code to GitHub so that it can Auto auto deploy to a digital ocean so you don't need to worry about the CI CD continuation integration continuous deployment stuff you know just uh deploy for you and finally you'll need a digitalocean account for this uh before you make account make sure you use a referral code to if you find a random referral code to click on it before you make your account because you do get a free uh 200 credit for 60 days so you don't need to pay anything but you still need a credit card but they won't charge you it's just to verify that you're a human so yeah just find a random referral code or I'll just put mine uh down below and you can just use that one so after you create your digitalocean account uh now we're I'm in the dashboard page so just click new project here and name your project [Applause] because you're calling mine digital ocean strappy example and I guess you need to select some purpose and just click create and here click this skip for now all right now we're done uh with digilution for now so we're going to be moving on to uh printing the strappy application locally first so to do that put your terminal and do this command MTX create Scrappy app add latest and then your name the name of your Scrappy application so I'll just call mine the same name digital ocean stuff example and finally I'll be just using one option which is the typescript option um to set the project with typescript if you don't like trust if you don't like typescript like just want to use JavaScript it's fine just omit this uh option and then just hit enter and then yeah I know uh did you install this yes and then here you can choose a the installation type we just do Quick Start and that's uh creating the strappy application all right now it's done and it's starting at the a development server so here It'll ask you to register admin account uh let me just do this right now so you don't need to just use whatever name you don't need to use your real name and then uh please use that email this is just for if you forget your password uh you'll send the password reset email foreign and now now you're uh in uh but this is just locally so now I'll need to get this ready for a production environment now what you want to do is open up uh your code editor and open up this strappy project so I'm using vs code and now if you go to the uh strappy docs they do have a guide here that we're going to just follow for this part so they say the first step here is uh creating the subdirectory so let's go here in the config and if you want to add a folder called environment EMV and then you want to add another folder called production and the next step would be to copy this file and create a file called database dot PS because we're using uh since I'm using typescript so using JavaScript you do database.js and you copy the JavaScript code so I'm just copying the typescript code paste it here and then just formatting this a bit all right and then same thing here create a file called server.js sorry server.ts [Applause] and then copy this code and now we need to install this package PG postgres package foreign PG now the next step is to make a create a repository on GitHub and upload all this code to GitHub so we're gonna go to GitHub and I already have this page open and just create a new repository so I'll be calling mine this the same name same name as I did before and then just click create and then we're gonna just basically copy run these commands in the terminal okay now we're gonna um and after that do just do good add dot to add every file and then we do the git code and then get branch and then this and then this so now everything's pushed so let's just refresh this page to make sure and there you go we pushed our code to GitHub now the next step is to go back to digitalocean and go to the project we created and we're going to create a an app here so I'm going to click the create button and let's select the app apps option and here um I'm gonna choose uh where you want to deploy your code from so we use GitHub and I already authenticated uh previously so but you'll need to basically authenticate with GitHub it's just granted per granted uh permissions so after you do that you're able to just select the Repository and then here just leave everything as default and make sure uh Auto auto deploy is enabled now now that we're in the resources section uh you only click edit plan here and the first thing we're going to do is just uh reduce the containers to one um in the beginning uh you don't really need two containers it's just um later on uh if you want to scale your server you can add more containers but for in the beginning we just use one container which is good enough and then now we need to add a resource which is a database resource so here select database and then click add and then uh and then just make sure the database name you could just leave it as DB and then just click create and attach and now that should be it for resources now um you could move to environment variables so if we go back to the guide here uh if you scroll down to the we should add environment variables section uh this is there's this green box here which we can just copy here to add the environment variables that we need which is uh all this basically so let's go back to digital ocean and this and then uh you want to add it to the global environment variable so the first one so make sure it's Global and hit edit and there should be this bulk editor button just click that and then just paste uh everything you copied and click save so it should add everything here click save again and then click next and then here you're able to just uh well one thing is uh in this guide you need to add these environment variables as well here to the by your strappy component but we'll add it later because I found out that for some reason if you added an L it will the deployment will fail for whatever reason so just we'll just edit it later after just click next and then here in the app in the pool you're able to edit the app name so I'll just change it whatever you like [Applause] I'm gonna hear um you can select which project this app belongs to so I'll just use the one that we I created and just hit save and then here you're able to select whatever region you want so for me it just Auto selected a Toronto you can choose the push upper region you like and then click next and then finally uh just here just review everything and you see that okay we have a class is 19. and then just click create so now it's trying to build but this the first video is going to fail since we didn't add the strappy environment variables yet so we'll do that now so do that make sure you're in the settings tab here as a select uh your strappy component and then you want to scroll down to the environment variables section here and uh for the first of all this database URL you can delete we don't need this one so for these environment variables you want to add basically these ones so app keys API tokens out admin JWT Secret JWT secret and finally transfer to consult so to get the values of these it's Unique for each project you want to go back to the code uh the strappy code itself and then there should be a DOT EMV file that should contain the values for the environment variables so if you find this dot EMV file environment file you're able to get these values so just copy this so everything after the first equal sign so app keys here and then we have a e guy token salt and then we have Adam and JWT Secret so we have JWT Secret which is the bottom one then flight transport okay so so yeah make sure you click you don't copy the first uh copy everything after the first equals sine and now uh let's click save and it will attempt to rebuild uh everything and deploy everything so this would this will take a few minutes all right so it's finally finished the point so now um let's see if our strappy app works all right and we see that it is running successfully and then we do slash admin we're able to register uh account so this is the same as we did locally but now we need to do the same thing uh in production as this is the production server so everything that we did locally is not saved here so you can just copy paste all the credentials that you used before and then just hit this button all right now we're in and everything seems to be working fine now the next step is uh actually upgrading our database so so if you're just using strappy I just want to test out strappy or in a very small project um you don't need to do this part you can just skip ahead to the uh images section where I show you how to deploy uh show you how to use the digital ocean spaces for the images but um this part is just uh pure if you want to to if your project is something that uh suited for production and you are expecting a good like uh visitors to your uh your your site or whatever it's a good it's a good idea to just switch the match database a digital ocean manager database for your database since our database right now is we're using a Dev database so to do this um the first thing you need to do is modify the strappy application as you see here so we need to install this uh run this uh command in the terminal and then we need to copy this new code this new code here and replace the database.ts file and we need to replace the database.ts file with this code just replace everything here save and now uh let's just push everything to GitHub [Applause] now the next step is we need to create a match database on digital ocean so to do this go back to the project here and there should be uh create yeah so click the create button again and select databases so from here uh you're able to choose data center region so for me it's because Toronto is the closest to me so I'm just choosing that and then in this database engine you want to select post postgres database and then for the configuration uh just you just select the 15 model like as you can see here like um you see that the piece of the stats here compared to the dev database is much better like the I believe is like 512 megabytes and there's like there's like one gigabyte for the dev database so this is like 10 gigabytes so you can store a lot more depending on uh what kind of content you want to store on strappy and finally yeah you need to choose a name I'll just go with the default and then finally select the project so change the product to the one to the strappy one and that should be it and then yeah just hit create a database cluster all right so now while it's loading you can just go through these steps so just click get started and then uh yeah so the first one is just restricting the connections to the database so we don't want anyone else we know on the public to be able to collect connect to this one so only this strappy application can connect can connect to it and now this one uh this one just leaves everything as a default just use the default whatever is shown here it's fine and this one is uh if we're not migrating or anything so you can just skip this just hit I'm done all right so now we just we wait for this database to finish setting up now this database finally finished setting up so now the next step is we want to attach this database to the strappy project so to do that we go back here to our project and then click on the strappy app and here there should be discrete button this blue one so not the green one but the blue one down here and then it should be able to select create slash attach database so just click that and then uh select previously created digital ocean database and then select an existing cluster so we should be it should be this postgres one that we created and here yeah just select uh whatever option is here and then click attach database all right so now um we actually have two databases so we need to delete uh this Dev database so click on the uh this Dev database here and click destroy database and then click destroy all right so you can ignore the building since uh this the next book is going to fail as well because we don't have we need to add a new environment variables so go back to the make sure app is selected here and then go back to app level environment variables and you want to delete uh basically everything that has a database in the name in the keys for the keys so this one this one this one this one and this one and I'm going to add two new environment variables so the first one is database URL and the second one is database underscore CA and you also want to copy the values and then now for the DB cluster name you want to choose the name of uh the you know to replace it with the name of the DB the database that we've created so I'll just duplicate this tab and we go to uh where where the database is here and then this is the name of the database so it should be here this one if you copy this and replace just DB cluster name with that right and the same thing for here just replace this part with that and click save so now if everything goes well um it should deploy again successfully so now we just need to wait again all right it's the point again so now uh let's check if it's everything's still working properly and yeah it still appears to be fine let me just go to the admin page which is the dashboard wait a sec okay yeah so we applied it for this but uh you will need to create an account again I guess since we wiped we delete the old database so it has it also deleted the account as well that we uh created so it just we need to create a new account so yeah the apologies for this so yeah you could just uh to make things easier later just use the same email and passwords you did in the development environment in the very beginning so yeah okay now we're in so this part's working properly so now the final step is just uh setting up uh digital ocean spaces um you might be running why we need a digital spaces for the images and uh the media and stuff and why don't just use the uh database that we use the match database so the reason for that is actually uh it's not really a good idea good practice to store images directly in a database because it takes it takes up a lot of space in your database and which would you know as you see here can lead to Performance issues and it will just really just use up all your storage so what people do is they usually store the images uh in some storage service you know which is a digital spaces and then what you do is you save the image URL in uh the database so to do this uh we're going to use a package called strappy provider upload do so to for the uh to set this up so first step would be installing this package so go back to the terminal and then run this command okay and then the next step word is uh basically editing the plugins dot JS file again I'm using typescript and there's actually no plugins.js file so we need to create one so just do plugins.ts and then just copy all this code and then um yeah oh yeah so we actually don't need uh these last two options so see the director you can just delete we don't need those [Applause] so now uh we'll just push this to GitHub again [Applause] let's do uh all right so now we actually need to create a spaces so to do this go back to the project click create and then it should be a spaces option and from here you choose whatever uh data center you want usually one that is uh close to the one you use for strappy so that they're actually the physical distribution between them is close so the speed is faster so just uh make sure you select one that's close to the other one so I guess there's no Toronto one so now next step is yeah make sure you do not enable CDN on my test is with enabling CDN and it doesn't work actually yes so I'm not sure why but it does not work so make sure you do not enable CDN so now uh just create a name for this I'm going to use the same name and then make sure you select the same project as make sure you're still going to slap a strappy project here and that should be it uh as you see it does cost additional parts of the month but it is uh the benefits it provides is worth it so just hit create so now um for the so now we have created this and now we just need to add the new environment variables so which is uh should be these four so for the space as this key is space s axis secret just click through here and it will lead you to the correct page and you need to select spaces key I'll put this I'll put this link in the description and then I just click generate new key and then in this game I wouldn't know whatever whatever name you want all right so now it's generated the key as well as the secret so uh now we need to go back here and go back to the project and go back to the strappy example I mean the strappy app and then go back to settings and then now you need to go back to app level environment variables click edit and then make sure that you add these environment variables uh so space access key space secret key space endpoint and space bucket so the key is uh this so maybe I make sure you don't share this with anyone or they'll be able to get access to your digital ship spaces but I just this is I'm just example so whatever and then for the end point is uh so it's like the base URL so uh if we go back uh go back to the spaces uh it should be uh the region so it's not the uh name of the so whatever okay just copy this and then so here copy this origin endpoint and then paste it here and just delete everything that is before the region so remember the region is uh I stuck in New York so this is the region so you don't need anything before that and make sure it's like the https whatever stuff everything is gone so it's just like this and then finally the space bucket which is uh the name of the space so so which is right here so this is the name of whatever you named your space and then finally click save all right and now it's now we're going to wait again we're just deploy so yeah if you uh if it shows an error it's fine it's just from the previous uh deployment when we pushed the GitHub uh we did not add the environment variables yet here so it's it's fine all right so now it's done and let's see if uh this actually worked so go live up and again go to slash admin so now we need to log in with the account that you created let me just close all the other tabs so just log in with the account all right so now we're in so the check is uh the images actually works let's just go here and just add a all right and then now click upload asset to the library all right so okay so first we see there is some issue here the image is actually not being displayed properly we'll fix that soon but let's just go back to the spaces and you see that okay we have actually uploaded the image successfully so we see that uh the image is stored in here now you might be wondering why there's three different ones it's just uh because it stores strappy stores the image in like three different sizes basically so it's nothing to worry about but this issue is definitely something that is uh we need to fix so what is actually going on here is uh if you open up the Chrome developer tools you go to console we have it's basically this error here so blah blah blah blah so you see it's a Content Security Plus here so basically this this is an issue where uh basically your site here right this URL it doesn't allow it doesn't allow us to load images from our uh our digital spaces URL right so if you look here this is the where our images is stored right so this is the URL of our digital ocean spaces and this is the image here so it's not allowing us to basically load images from this from any URL from any URL so that's why it's not being displayed here so to fix this we need to go back to uh our code so here we need to go to this file middlewares.ts and then we need to paste in uh this code so I'll have this code in the description so just uh highlight we need to replace the second part so strappy colon colon security replace the entire thing with this code here right so basically what this allows what this does is uh it allows us to load images from uh this digital ocean spaces URL again I'll have this call in the description so all you need to do is copy and paste it and just replace the strappy uh dashes security part with it and now just push this code to GitHub again [Applause] and then we go back to digital ocean and now it is building and deploying it again if anyone just wait now it's done deploying and now uh let's just refresh this page and we should see that this issue is now fixed we see that we can just uh the image is displayed correctly so there you go so now we basically set everything up uh correctly so if you know if you're new to strappy uh you'll see that you know in the production environment you're actually not able to edit any of the uh content types or collection types uh and you're not able to create a new collection types or components or whatever so the reason is that you need to do this in strappy develop so you just need to run a [Applause] now you just need to run npm run develop so it starts uh the strappy server locally so this is why I said before to just use the same credentials as your production environment same as your development environment because you could just reuse the same account so yeah so now in the uh development environment you can see that we're able to edit all this stuff and what it works is you edit it here and you push to GitHub and then it will deploy in the production environment like if we just add a random collection type uh you would in here push it to GitHub and then after it deploys on digital ocean you should you should see here again if you want to guide on how to on like a strappy guide uh just let me know in the comments or something if you want to like a strappy guide let me know in the comments but yeah this video is is already quite long and I don't want to make this video longer so there you go uh this is how to deploy strappy on digital ocean apps so in total I think if you add everything up the cost is like 12 plus 15 for the database so 12 for the strappy app 15 for databases five for spaces so it's 32 dollars a month uh so yeah like compared to Cloud right so the base one is 99 um so it is you know one not one for the price was once 130 price of it

Channel: KaizneCodes

Views: 5,105

Keywords:

Id: xFKgemt5ZbM

Length: 39min 50sec (2390 seconds)

Published: Tue May 02 2023