Making Websites With Next.js And Strapi - [10] - Deploying To Digital Ocean
HTML-код
- Опубликовано: 30 сен 2024
- In this episode we are going to deploy our #Next.js App and #Strapi API to #DigitalOcean.
An we are going to do it by using #OpenLiteSpeed image. That image is going to create a server and administration panel for us so that we don't have to do everything manually. It will also setup basic security for us too.
Also be sure to use my referral link to get $100 for 60 days in Digital Ocean credit, so that you can tinker around with deploying your apps and Digital Ocean in general.
Digital Ocean Referral
bit.ly/30yBKfm
Documentation used for this video
bit.ly/3dZF07e
bit.ly/37n3bdo
bit.ly/2YuGIXH
bit.ly/2zqvTNY
bit.ly/3dXadbm
Code used in this video
bit.ly/2MP1nQY
You can support my work on Patreon
/ watchlearn
Follow me on Social Media
Github: github.com/iva...
Twitter: / ivan_doric
Instagram: / watchlearntuts
Facebook: / watchlearntutorials
![Making Websites With Next.js And Strapi - [11] - getStaticProps](http://i.ytimg.com/vi/uysVGeG2PTY/mqdefault.jpg)
![Making Websites With Next.js And Strapi - [11] - getStaticProps](/img/tr.png)
I can't get the frontend to work... it keeps telling "Application error: a client-side exception has occurred (see the browser console for more information)." error 500..
it get the content into _app.js because the favicon and the metadescription are set but it isn't able to get and display the dynamic paths.. I've already set all the node folder to 777 permission but still not working.. please help me..
Love to see a video on how to send emails via Strapi's SendGrid using next js!
I will take a look at that, thanks for suggestion ;)
Hi! I am having trouble, for some reason adding Strapi's start.js to the root directory and setting it as the startup file in Litespeed doesn't have any effect. Whenever I run 'npm run start' in console, the Strapi admin panel shows up and everything is fine.
One thing I am thinking, maybe it has something to do with what's inside the start.js. Maybe it doesn't understand strapi().start(). I didnt follow any of the previous tutorials, maybe its somehow connected with those?
I ran into this issue as well. After running the NODE_ENV=production npm run build command, I also ran NODE_ENV=production npm run start, which resulted in the admin panel showing up. But now I get a POST request error when trying to register into strapi. Wondering if it has anything to do with the dependencies? Noticed I have a yarn.lock instead of package-lock.json file.
@@jacwynn1965 Did you get any solution for that? I'm stuck exactly at the same spot :(
Love your videos but I'm having the same issue as several others. npm run start works just fine but restarting the server with the start.js file produces a 500 time out error. It shows strapi running in the dashboard. I tried setting the node folder to 777 just to see if that would help based on a comment below but that didn't work either.
Works by changing the permissions of the node folder and all its contents: sudo chmod -R 777 node/
@@Jhersy Thanks man, this really helped. To elaborate:
1. ssh into your server as root (ssh root@your-server)
2. go to your folder (cd /usr/local/lsws/Strapi/html)
3. run sudo chmod -R 777 node/
thanks man, highly appreciate that..keep it up bro
Glad you like it 😀 and thanks for watching.
I used ur Referral link 👍
do u think it's a good idea to host Strapi on AWS/Digitalocean and the Next js app into different hosting provider like Vercel becuse it's free!
On Digital Ocean you can host Strapi and Next on the sam bucket, so you pay one price for both, and since you are paying for Strapi it makes sense to to just put everything in one place. On the other hand, Vercel is made specifically for Next, and Vercel also makes Next, so that is the advantage of Vercel. So you have to decide for yourself.
@@WatchandLearnTutorials thank u 👍👍
Thankyou so much sir i respeact your work.
Thanks man 😀
This is so helpful thank you so much. going to set up this tech stack for a non profit I am working with :) cheers
Cool man. Glad my tuts helped you. :)
@@WatchandLearnTutorials It seems no matter what I do the IP still always points to the app.js file inside the Example virtual host.. tried multiple times not sure what I am missing :/
@@tubehelpr I don't know. Would need a bit more info to be able to help you.
@@WatchandLearnTutorials I just recreated the droplet again following every step but at minute 12:00 in the video when I changed the app.js file the change is not reflected :/ As in it is still pointing to the app.js file in the Example/ folder... not sure what else to check
@@tubehelpr I don't know, sorry.
Need to select VM with 2Gb RAM, otherwise getting "FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory"
Well, that sucks. JS can be pretty demanding :(
@@WatchandLearnTutorials Indeed RAM doesn't matter, if Strapi is a good system. Have you seen this blog? strapi.io/blog/nextjs-react-hooks-strapi-food-app-1
@@sergeyvronskiy134 Nope. Haven't seen it. Looks interesting and a good tutorial.
Where did you get the "digital-ocean" directory (the one mentioned @ 9:24) on your local machine, i.e., the one where you copy the vhconf files over to your remote NextApp and Strapi folders, respectively?
It's in the Github repo for this series: github.com/ivandoric/Making-Websites-With-Next.js-And-Strapi
Thanks bro I was waiting for it
Start.js instead of pm2?
MrPhilbert You don't need pm2 for this setup. That's what OpenLitespeed is for.
By graceful using this tutorial to set up nextjs to use WordPress for cms. Though I am stuck on how to implement auto re-builds for nextjs when content is changed in Wordpress. Any ideas?
Why would you need to do a re-build? If you are using getServersideProps or even getStaticProps with invalidation, the content should change when it changes in WP, no rebuild required.
thank you!
No problem! :)
Anybody else having issues with the "NODE_ENV=production npm run build" section of this content? For instance, I am unable to perform a production build and in response to that aforementioned command, I receive a "Javascript heap out of memory" error message. Not sure what else to do as I have been researching ways to resolve this, and I'm mostly out of ideas.
It seems that Strapi requires more than 1gb of ram, try to increase droplet ram to 2gigs.
@@valeriandigital7884 I saw that as being a possible solution in something I read, so I'm glad you mentioned it. I will try that!
@@nickperry6282 It is definitely that. Seems that some node apps require a bit more resources. You can also build it on your own machine and then copy it to server, but that is a bit... well ... dirty 😀
how to deploy react.js and strapi on digital ocean
I have built a full stack app built i have a pb for the deployment section
thanks
really need help
I'm not really Digital Ocean expert, so really can't help you with that.
start.js does not start up
do you found the solution for this problem
@@sobhisaede9876 I have found. I installed Strapi on Example virtual host instead of creating a new one and that worked for me
Great video, Thanks!
Glad you like it, thanks for watching ;)
how to deploy strapi and react.js on digital ocean with custom domain??
docs.digitalocean.com/products/networking/dns/how-to/add-domains/ try this.
thank you so much for the tutorial 🙏
No problem man, glad I could help 😀
Thanks for the great job!
You very welcome sir 😃
Thanks for the videos! I'm deploying a large app for a company using this method via digital ocean in your video. How do we define a custom domain? or set it up to a personal domain?
When you ssh into the server the first thing it asks you if you want to add a custom domain. Did you try adding your domain that way? Also there is documentation: openlitespeed.org/kb/setting-up-name-based-virtual-hosting-on-openlitespeed/
@@WatchandLearnTutorials Thank you! Also, when making changes locally either adding content type to strapi or just making changes to my nextjs app, is there a way to push the changes to digital ocean after its already deployed??
Anyone have Process with PID: (number) is dead, when use the context startup file?
HI all. I followed your tutorial last year, and being used since than. Thank you very much. A problem occured with the new nextJs 12 version. I'm getting Request Timeout. Do you know why? the same is done as you are doing in the video.
Just a mention, if I'm using version 11 and something the site is working
@@sandorkerekes1915 I don't know, haven't tried deploying Nextjs 12 this way. Sorry.
Superb video 💥🎉🎆
Thanks 🤗
Great job many thanks Ivan :)
My pleasure :)
Nice video. I tried "npm run build" and there is no "Add Content Type" in localhost:1337/admin > Plugins > Content-Types Builder unless I run npm run develop. Anyone happens to know how to implement "run develop" with OpenLiteSpeed?
Yeah, because you can only add content types in development mode. That mode should not be used for production. So you would have to add types and everything in develop mode locally. Build your app and then push it to Digital Ocean.
Using strapi on localhost is a pure joy. However. I have been asked to create a very simple site for my client - he has hosting and a domain. It is just such a pain to get the strapi running on his server. Absolutely no support except some emails with links to the documentation (which is not working) - I'll stick to Forestry CMS for now. Much less of a hassle to be honest.
You can check out this video: ruclips.net/video/ebWJbbUT4TA/видео.html I install Strapi on a shared hosting there. I'm guessing your client has a shared hosting. But to be honest, that is just not the way to go... You really should be using DO, AWS or similar for Node apps. Because this setup will stop working after a day or two, even when using something like PM2. At least that was what happened to me. So that setup is not production ready.
hi Sir, i have tried to use startup file with strapi but not work.
my OLS version is: 1.6.2, Strapi version is 3.5.2
did you get that before
many thanks
I didn't, but some people are having similar problems. So maybe try following official guide for Strapi DO setup: strapi.io/documentation/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/digitalocean.html OR you can try one click install, since that seems to be available now on Digital Ocean: marketplace.digitalocean.com/apps/strapi
hi @John Smilga, great work.
I set up Strapi through one-click install on DigitalOcean and through Strapi in the marketplace, not LiteSpeed. However, I'm lost at the final step, I can't make it start without running `npm run start` on my terminal. How to fix it? As I said, I didn't do it through LiteSpeed but through Stapi plugin in Digital Ocean's marketplace.
I don't know. Haven't tried that. Doesn't that package in marketplace have some documentation? Try checking that. If it doesn't have any info then install PM2 if it's not already installed an run it with PM2... PM2 should keep your app running at all times. Also check this out: strapi.io/documentation/3.0.0-beta.x/deployment/digitalocean.html#install-and-configure-pm2-runtime it explains how to run it with PM2 on DO.
hi, i am having trouble with deploying Next.js to shared hosting. (Cpanel) , can someone help me with it?
I have this video about deploying node apps to shared hosting: ruclips.net/video/ebWJbbUT4TA/видео.html . However, I would suggest against deploying node apps or Next app with SSR to shared hosting, it just doesn't work well, and there is a very high probablity that the site would just stop working after a few days. And you would have to manually start it again. This is not production ready, it's much better to use something like Digital Ocean, AWS or something similar.
thanks I build am application with react.js an strapi.
I deploy react.js on namecheap.
I wanted to deploy strapi on digital ocean and then make my domain on namecheap to point to digital ocean
what to do ??
Ummm, just Google it, I don't know exact steps but all of those services usually have a pretty simple way to add your own domain, I don't think it should be complicated.
Is this a good practice for production? I mean use SQLite
Why not. I mean if you plan to make a REALLY big site with lots of data than maybe not. But SQLite is totally ok for 90% of websites. Also if you don't feel right about it Strapi support multiple databases (PostgreSQL, MongoDB, SQLite, MySQL and MariaDB), so you can use any of those: strapi.io/documentation/3.0.0-beta.x/guides/databases.html
Great tutorial! Thanks! However I'm struggling adding postgresql database instead of sqlite to this openlightspeed setup, could anyone help me?
Maybe this guide would be better for your needs than open lite: strapi.io/documentation/3.0.0-beta.x/deployment/digitalocean.html At least for the Strapi part.
Hi, I'm being considered for a job doing WP development but it also will involve PWA (progressive web application). I'm strong in WP development thanks in part to watching your earlier videos. Do you have anything that summarizes PWA for WP?
Never really tried it, but there is Next plugin for creating PWA-s www.npmjs.com/package/next-pwa. Also take a look at this tutorial: itnext.io/pwa-with-next-js-create-next-app-in-2020-%EF%B8%8F-9ee0e1a6313d
WP would be just an API in this case, and you would create PWA with Next.
@@WatchandLearnTutorials Thank you.
hi Ivan love the videos , very helpful. Where do i find strapi-prep files?
You have to create them yourself by installing Strapi. I'm using the same files created in this video: ruclips.net/video/8_qwhfI5VxI/видео.html
Hi,
I deployed both Strapi and Next.js app on Digital Ocean using OneLiteSpeed and it works very well. Thank you for creating such a detailed video on deployment and for all the files provided to make the process easier.
But now I am facing some issues at Strapi end; the Strapi Media library is giving 500 Internal Error while trying to upload images on production. However, this works fine in local the uploaded files on local can be found in public/uploads; and the entries are being inserted in the uploads collection too.
Am I missing some config to access the public/uploads folder for upload plugin?
Can you please help. Thanks!!
Did you check the permissions of the uploads folder? Maybe that is the problem. Try setting it to 755 or even 777 just to see if that would work.
@@WatchandLearnTutorials The folder permission was 755 by default so it didn't work; changed it to 777 and now media library works gracefully!! :p Thanks a lot!
@@huuduoc1908 Hii, if you are using filezilla then right click and change folder permission or if you are using a terminal just 'chmod 0777 foldername/
@12:20 where do I get the strapi-prep files to transfer over into the server files? I didnt see those in github. api / config / package.json etc
That is the name of the directory where my Strapi install lives. You have to create your own installation of Strapi, and copy that to the server. These files are from this video: ruclips.net/video/8_qwhfI5VxI/видео.html
@@WatchandLearnTutorials As you mentioned in the video, it works using npm run develop but the ENV_NODE=production npm run build is needed for it not to stop working. Tried npm i + updating dependencies + removing node_modules and reinstalling again and I added the start.js file plus in the Context tab section. However, it says theres a Javascript memory this is the error Im getting when running that code. Still getting:
20 error code ELIFECYCLE
21 error errno 134
22 error strapi@0.1.0 build: `strapi build`
22 error Exit status 134
23 error Failed at the strapi@0.1.0 build script.
@@silverorgoldidonothave7514 Yeah, you should choose better droplet. One for $10 a month. The basic one doesn't have enough memory to build this 🤦♂️ ... or you can build it locally and then transfer files.
Hi,
Awesome tutorial, thanks to you I was able to build my portfolio site with Strapi & NextJS.
But I'm having some trouble getting the website online. I've done every step but when want to browse to the IP, the page won't load (and if I put port 1337/admin behind it, it won't load either)
Everything worked fine before I added the final listener, anyone has any idea what I did wrong?
Boiled the problem down to this:
Everything works if I start strapi manually, the start.js file works for NextJS, but for Strapi it keeps loading until I get an error 500. Anyone else has this problem?
@@Branc0TV Did u figure it out? Having the same problem
@@markustrasberg3957 I just opened the terminal inside Digital Ocean and started Strapi manually. After it's running you can close the window. It's been up for a week now without any problems.
Hey all, getting a requested timeout/500 error after setting up the startup file and trying to access my public ip via the browser. Been at this for a while (week) with no solution. Thoughts?
Is that for Strapi or Next? Or are you getting 500 error for both?
@@WatchandLearnTutorials it's for Strapi. I'm referring to what you do at 16:34. I type in my ip in the browser and it never finishes loading. I changed my startup file in OLS back to app.js and it works perfectly fine. It's only when I set the startup file to start.js is when I have problems. Everything up to this point in the video has worked. I've read that this could be a permission issue possibly?
@@WatchandLearnTutorials when I run strapi in the terminal on the vps it displays that box in the terminal that states what the environment is set to, which is "development". Should it say "production"? So maybe something didn't build right, and thus maybe I'll try doing a "NODE_ENV=production yarn build" in where Strapi is located on the droplet again like you instruct?
@@nickperry6282 You can leave it in the DEV mode if you plan adding content types etc. Otherwise you should build it and run for production. It will work faster that way. If you are still having trouble with this setup try the official guide for setting up Strapi on Digital Ocean, maybe that will work better for you than OLS: strapi.io/documentation/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/digitalocean.html or it even seems that Strapi now has one click install on DO: marketplace.digitalocean.com/apps/strapi
Thank you for this tutorial, do companies use this method to deploy their js apps?
I guess some do. However I think that pm2 is more popular than OpenLiteSpeed. But you can use pm2 even in this setup. pm2.keymetrics.io/
@@WatchandLearnTutorials okay thank you
Can you show us how to upload larger files? The digital Ocean droplet supports 1 MB files only
Ben Stuijts Never heard of that issue. Are you sure?
@@benstuijts5620 That can be because of the image you are using. But since this is your droplet and you can do whatever you want with it there must be a way to change the upload cap. If it was PHP/Apache server you could change that in php.ini. I see that this image is using ngnix maybe the cap is set there. Try following this tutorial to change it: www.tecmint.com/limit-file-upload-size-in-nginx/
Watch and Learn thans i am going to look into it tonight.
@@WatchandLearnTutorials It worked! Indeed the limitation is not within strapi, but in the nginx server. Many, many thanks!
@@benstuijts5620 Glad I could help ;)
Thanks, I was looking forward to this. But since I wanted to do a dummy website for testing, I tried hosting the strapi website in Heroku since it was free, but then when I checked my next.js site it took quite a while to fetch data from the rest API. I am not sure why the lag happened. Do you have any advise?
Marshall Shelly It can be a number of issues, anywhere from the speed of the hardware to distance between to servers. Check the Network tab in your browser to try and figure out where the bottleneck is happening.
@@WatchandLearnTutorials When I checked the network tab, it showed a load time of 9.58s. Also when I went to the heroku dashboard, the project had a sleeping symbol. Does that mean something?
@@brandon9043 I don't know, I never used Heroku, so I have no idea what that means.
Marshall Shelly Hey Marshall, Heroku dynos go to sleep after 30 minutes if unused. After the initial reboot they’ll start working normally
@@AlextheEntreprenerd I did try the reboot, but it didn't make any change in the performance. Receiving data from heroku servers were still slow, sometimes even caused application crashes when cache was cleared.