How to Deploy your Strapi app like a champ!

we've made it even easier to set up your strappy app and deploy it using cleaver so check this out i have a server right here called strappy app i'm just going to click into it and then click on add site and then for app type when you click on that and scroll down we now have a dedicated app type for strappy what cleaver is going to do is basically just allow you to do a couple clicks within cleaver to set up your strappy app and deploy it and a lot of the configurations will happen behind the scenes for you let's check it out so i'm going to click on strappy there and then use a temporary domain under advanced options i want to show you a couple things so it's automatically going to be placed on this port you could change it if you'd like but that's just the default one that cleaver will add it to and then for node.js version i already have node.js 16 installed on the server if i didn't have anything installed you could select either node.js 12 or 14 or 16. be sure to always select an even version of node.js for really most node apps actually you want to install the even versions are a lot more stable than the odd versions and for node.js 16 in particular you could use this with the strappy version 4 applications if your app is using strappy version 3 use either node.js 12 or 14 for a strappy version 3 application and another thing is if i click on setup database right here i can select what kind of database server type i want to use i'm just going to leave it as mysql 8.0 and then it will automatically create a database name and user and password and then cleaver will associate all this to a env file for your application so string it all together so you don't have to all right let's click on add okay so this is adding this site now and once that's done we'll see some confetti and then click on setup and deploy this is going to take you to the web app section over here to a new web app that was created for that site and it takes you directly into settings and code repository where we're going to tie together the version control provider in my case i'm using github so i'm going to select that profile and then we just want to designate the repository and the branch to deploy so where is my code i put this under strap e4 and the branches master and i'm going to click on update to save that out all right so that's saved so i'm going to just show you a couple things real quick since i use github it also enabled this tab if you're wanting to use github actions to build your application be sure to watch the whole video because there's a couple little modifications that will make in order for it to work appropriately right and if i click on build i could see that the entry point is npm argument start so this is all the basic defaults for a strappy application you can of course change this if you need to if you customize it a little bit and then in environment this is going to load the env and then we could see the database connection variables here from when we first set up the site and then deployment hooks this is just a standard set if you have anything special if you have anything additional that you need to do during a deployment for your application feel free to go ahead and add a new hook and then you can create a custom deployment hook but we have everything basically set up so let's go ahead and just deploy it out okay and there's the confetti so the site has been deployed and we're getting some pink times back we're getting 200 codes so it looks like it was successful let's go ahead and click on visit site and view it okay so this is what we want to see we have the production site up of course if you pin admin to the very end of the url it should take you to the admin login and this will be the initial setup okay awesome so we have it up and running let's go back to cleaver i'm just going to x out this i want to point out a little bit of troubleshooting techniques a lot of deployments you might see that everything completed successfully but when you go to the url you see a 502 error if that happens for you be sure to check your pm2 logs once a deployment completes at the very top right here it automatically pulls the latest pm2 logs and just scroll to the very bottom and then this is what you want to see you want to see that's online other places that you could go to look at the pm2 logs are mostly on the server of course so if i go to the network here i could just click right over to that related server and then go to the services section and one good nifty thing is look at the node 16 and check the heartbeat and then scroll down a bit this will give you more lines of context to look at as well as a report for the individual application um but really i look at the bottom right here we see that the server wasn't started properly but eventually it was so we could ignore that but sometimes you might see that there is a port conflict issue or maybe there's a database connection issue that will very clearly come up within the pm2 log and another place you can look at it is under the logs section and then click on pm2 logs down here and then load that report and then same thing we could look at the pmt logs here and one quick pro tip actually if i go back to the web app and then click into the web app we see the pm2 process report for that particular application here if you see it offline or if you see a 502 error really a good thing to do as well is just to click on restart app and that will restart the pm2 process and then look again to see if the site generates after that all right that was just a couple troubleshooting tips i wanted to provide now to go to github actions we're going to go back to the settings section so if you have github for your version control provider you can use the github actions integration and this is a pretty good option if you're using a strappy app especially if you're using more of an economic server and i'm thinking like a digital ocean five dollar droplet a lot of times they don't have enough memory to build the application on the server especially if you have other sites on the server you might hit a javascript out of memory error i think it's it says something like that so a good thing that you could try is if you have github is to enable github actions that way the build is actually done on github so save your server's processing power and to enable that you'll want to go ahead and enable github actions and then click on update so doing that will update your project to show you what that looks like let's go to deployments here and just a quick little way to get over to github um go to code and then we see this github workflow file is now here so cleaver added this workflow file you could actually go in here and make some additional edits if you would like if you would like to do some automated testing before it deploys uh feel free to go in and edit the file anything above this line right here and since i enabled github actions it also triggers a initial run so i could see that running right here but let's go back there's one thing i was mentioning before that you may have to do if you have different environment variables that you have for your application is using the github actions process actually ignores for whatever reason the environment variables but what you can do is basically copy this connection information for database and then just paste it over into settings build and then within the pm2 ecosystem section under the environment section just paste that in there and this is what the strappy app is going to do it's not going to go off the env file it's just going to go off environment settings triggered by a pm2 and of course you want to update the format so put quotations around the key names and then the colons and then quotations around this so just keep doing that for the rest of these variables here and then run the deployment again and then it should work without any errors

Channel: Cleavr

Views: 5,492

Keywords: strapi cms, strapi, cms, nodejs, deploy, cleavr

Id: Mo8JiOwNIzM

Length: 8min 3sec (483 seconds)

Published: Wed Dec 08 2021