I actually just got a dockerized Next.js starter app deployed to Cloud Run yesterday. It took me a lot longer than the four minutes needed in this video. :-)
Thank you, Martin! @TheMomander This video perfectly captured everything you described to me at the Firebase booth at Google Cloud Next. It's truly amazing. I never expected the deployment of a Next.js App to be this smooth.
Martin, I've seen a video of the installation with “Vite” before. But I definitely needed NextJS. I've been experimenting with it for a few days, but I had problems with most of them and couldn't make any progress for the project. Thank you both very much for this video. Also, we are waiting for the repo :)
Great video Martin and Luke. As you mentioned docker is not required and cloud build refers to buildpacks internally for same. Is there any way we can achieve webserver hardening practices using this method ? Also do you have any plan for another video using nginx with next.js, not sure if it’s still recommended approach after seeing this 😊
It depends what you're looking to accomplish with webserver hardening. If you're interested in a solution tailored specifically to optimize hosting a Next application, you might want to check out Firebase App Hosting. That will give you some nice scalability by default. If you're looking to take advantage of what Google Cloud has to offer, I would recommend using Cloud Run or Firebase App Hosting instead of a custom nginx deployment. Nginx would likely deploy static files, which removes the ability to take advantage of Server Side Rendering.
So I'm a bit of a noob with deploying websites, my nextjs app builds just fine on my machine but fails on cloud run. I assumed I had messed up something with environment variables but I've tried everything I can think of and still no luck! Any tips on digging through the logs or some other way to see exactly what's failing?
The log may contain error messages. In the Cloud Console, click the hamburger menu in the upper left corner, then click Logging. Best of luck with your project!
In the Google Cloud console, go to Cloud Run -> edit and deploy new revision -> click Container(s), volumes, networking, security -> Click the Container tab Then you can add up to 1000 environment variables. If you search for "cloud run environment variables" you can find the full article!
In the Google Cloud console, go to Cloud Run, Edit and deploy new revision, click Container(s), volumes, networking, security, click the Container tab.
Hi Martin! If I leave the service port at default (8080) then I get build error "revision XXXXX is not ready and cannot serve traffic." If I change it to match the next.js port (3001) then the deployed website says "Service Unavailable" . Any advice pls? I'm using Yarn jfyi. thanks :)
Sorry, I'm not able to troubleshoot without seeing your computer and your code. I propose you start by using the code in the repo (see video description), make sure that works for you, and then modify that code to do what you need in small steps. Best of luck with your project!
What kind of server-side apps can cloud-run handle? If I were to containerize a Backend API and upload to cloud-run - any scenario in which this would be a bad idea?
Good question! Cloud Run provides availability and scalability by taking down and spinning up instances as needed. For that reason, software packages that assume they have full control over a persistent server tend not to run well on Cloud Run. Examples include stateful and heavy applications like databases. The solution is to run your database on a separate tier that's optimized for it, like CloudSQL or Firestore.
It'd be great if we could add min/max instances schedules. Like, keep one min instance during office hours and zero min instances the rest of the time. Maybe even throw some ai at it to detect traffic patterns and suggest/apply those schedules
You have a few options for static files. You can either let Cloud Run handle them for you, and optionally add a load balancer and Cloud CDN in front of it. Another option is to put your static files in a public bucket on Cloud Storage. Or you can put your static files on Firebase Hosting, which includes a CDN. I usually use Firebase Hosting, because there is less configuration needed.
Hey many thanks :) I've been able to deploy my NextJs webapp super fast following your video ;) I am now wondering if I can follow the same steps to deploy a React (TS+Vite) web application ?
Yes, you can! I shot a video about this last year. Search for "Run your React app on Google Cloud" here in UA-cam and you will find it. Best of luck with your project!
Happy to help! This should be doable in Cloud Run (I have it working on my own project and just tested this morning to confirm). Environment variables can be added to Cloud Run through the console. Cloud Run -> [Click Your service Name] -> EDIT & DEPLOY NEW REVISION -> VARIABLES & SECRETS Example: MY_SECRET_VARIABLE 93f8jaiofjaiwfjpi8awj3f9 Then you can use process.env.MY_SECRET_VARIABLE to reference it in the code. If this is these are client-side variables, they will need the prefix NEXT_PUBLIC_ in front of them. It this doesn't solve your problem, can you share more information?
Great video, I tried to use environments variables, and locally its ok , but deploying in Cloud Run I had defined variables in the service, but in the webapp are undefined. some trick?
You may find our video "Speed up your Cloud Run service by hosting it closer to your users" useful. We published it a few years ago, so the load balancer setup is easier now than shown in the video. Just click "Integrations" in your Cloud Run service and add the integration for "Custom domains -- Google Cloud Load". That automates the tedious parts of setting up a load balancer.
Good question! I think it boils down to two things: 1. If you are used to either one, continue using that. 2. If you prefer to deploy source code, use Firebase. If you prefer to deploy containers, go with Cloud Run. Containers give you more flexibility, but not everyone needs that. For example you can include binary executables or data files your containers.
I actually just got a dockerized Next.js starter app deployed to Cloud Run yesterday. It took me a lot longer than the four minutes needed in this video. :-)
Congratulations on deploying your app, even if it took longer than in the video. I'm sure it will be quicker next time 🙂
This video is great for showing just how easy it is to get an app up and running in no time at all.
Happy to hear that the video was useful to you!
Thank you, Martin! @TheMomander This video perfectly captured everything you described to me at the Firebase booth at Google Cloud Next. It's truly amazing. I never expected the deployment of a Next.js App to be this smooth.
Happy to hear that, Jorge! It was very nice meeting you at the Cloud Next conference. I can't wait to see what cool apps you build!
Martin, I've seen a video of the installation with “Vite” before. But I definitely needed NextJS. I've been experimenting with it for a few days, but I had problems with most of them and couldn't make any progress for the project. Thank you both very much for this video. Also, we are waiting for the repo :)
Sorry, I forgot to include the link to the repo! I asked our publishing team to add it to the video description.
@@TheMomander That's great. Thanks for the feedback.
The link to the repo has been added to the description. Thank you for letting me know it was missing!
@@TheMomander You're welcome and thank you very much.
I couldn't tell from the video, does this support app router routing?
It does! In fact, the example in the video is using the app router. Check out the GitHub repository to see how it's done.
Thank for sharing👍
Great video Martin and Luke. As you mentioned docker is not required and cloud build refers to buildpacks internally for same. Is there any way we can achieve webserver hardening practices using this method ?
Also do you have any plan for another video using nginx with next.js, not sure if it’s still recommended approach after seeing this 😊
It depends what you're looking to accomplish with webserver hardening. If you're interested in a solution tailored specifically to optimize hosting a Next application, you might want to check out Firebase App Hosting. That will give you some nice scalability by default.
If you're looking to take advantage of what Google Cloud has to offer, I would recommend using Cloud Run or Firebase App Hosting instead of a custom nginx deployment. Nginx would likely deploy static files, which removes the ability to take advantage of Server Side Rendering.
So I'm a bit of a noob with deploying websites, my nextjs app builds just fine on my machine but fails on cloud run. I assumed I had messed up something with environment variables but I've tried everything I can think of and still no luck! Any tips on digging through the logs or some other way to see exactly what's failing?
The log may contain error messages. In the Cloud Console, click the hamburger menu in the upper left corner, then click Logging. Best of luck with your project!
how to transfer .env file variables from local repo to google cloud?
In the Google Cloud console, go to Cloud Run -> edit and deploy new revision -> click Container(s), volumes, networking, security -> Click the Container tab
Then you can add up to 1000 environment variables.
If you search for "cloud run environment variables" you can find the full article!
In the Google Cloud console, go to Cloud Run, Edit and deploy new revision, click Container(s), volumes, networking, security, click the Container tab.
@@TheMomander 🤯
Hi Martin! If I leave the service port at default (8080) then I get build error "revision XXXXX is not ready and cannot serve traffic." If I change it to match the next.js port (3001) then the deployed website says "Service Unavailable" . Any advice pls? I'm using Yarn jfyi. thanks :)
Sorry, I'm not able to troubleshoot without seeing your computer and your code. I propose you start by using the code in the repo (see video description), make sure that works for you, and then modify that code to do what you need in small steps. Best of luck with your project!
What kind of server-side apps can cloud-run handle?
If I were to containerize a Backend API and upload to cloud-run - any scenario in which this would be a bad idea?
Good question! Cloud Run provides availability and scalability by taking down and spinning up instances as needed. For that reason, software packages that assume they have full control over a persistent server tend not to run well on Cloud Run. Examples include stateful and heavy applications like databases. The solution is to run your database on a separate tier that's optimized for it, like CloudSQL or Firestore.
It'd be great if we could add min/max instances schedules. Like, keep one min instance during office hours and zero min instances the rest of the time. Maybe even throw some ai at it to detect traffic patterns and suggest/apply those schedules
That's a great idea!
What's about static files? Is Cloud Run handling static files like app hosting through CDN? 🤔
You have a few options for static files. You can either let Cloud Run handle them for you, and optionally add a load balancer and Cloud CDN in front of it. Another option is to put your static files in a public bucket on Cloud Storage. Or you can put your static files on Firebase Hosting, which includes a CDN. I usually use Firebase Hosting, because there is less configuration needed.
Hey many thanks :)
I've been able to deploy my NextJs webapp super fast following your video ;)
I am now wondering if I can follow the same steps to deploy a React (TS+Vite) web application ?
Yes, you can! I shot a video about this last year. Search for "Run your React app on Google Cloud" here in UA-cam and you will find it. Best of luck with your project!
the cloud run can't access environment variables and the logs showed undefined
Happy to help! This should be doable in Cloud Run (I have it working on my own project and just tested this morning to confirm). Environment variables can be added to Cloud Run through the console.
Cloud Run -> [Click Your service Name] -> EDIT & DEPLOY NEW REVISION -> VARIABLES & SECRETS
Example:
MY_SECRET_VARIABLE 93f8jaiofjaiwfjpi8awj3f9
Then you can use process.env.MY_SECRET_VARIABLE to reference it in the code.
If this is these are client-side variables, they will need the prefix NEXT_PUBLIC_ in front of them.
It this doesn't solve your problem, can you share more information?
how you solved this. Please help
Not , I'm not solved 😢
Great video, I tried to use environments variables, and locally its ok , but deploying in Cloud Run I had defined variables in the service, but in the webapp are undefined. some trick?
ANY SOLUTION?
I would love to hear something about a GCloud alternative to the Edge Network the Vercel (author of the framework) provides.
You may find our video "Speed up your Cloud Run service by hosting it closer to your users" useful. We published it a few years ago, so the load balancer setup is easier now than shown in the video. Just click "Integrations" in your Cloud Run service and add the integration for "Custom domains -- Google Cloud Load". That automates the tedious parts of setting up a load balancer.
Exactly what I was looking for! Thank you!
Would you know what terraform modules one should use to make the CI/CD integration work via IaaC?
Happy to hear the video was useful! The Terraform module "GoogleCloudPlatform/cloud-run" helps with Cloud Run setup.
can we have okta integration with nextjs . Currently i am struggling to deploy iap + okta combination failing in Oauth Callback error.
Thank you for the suggestion!
Thank You For Showing This Google
Thank you 😊
Missing the links that you promised to put in the description!
The links have been added to the description. Thank you for letting me know they were missing!
How do you decide between Firebase hosting and Cloud Run? Pros and Cons of each
Good question! I think it boils down to two things:
1. If you are used to either one, continue using that.
2. If you prefer to deploy source code, use Firebase. If you prefer to deploy containers, go with Cloud Run. Containers give you more flexibility, but not everyone needs that. For example you can include binary executables or data files your containers.
@@TheMomander I had this same question. Thank you for answering. I think this needs to be addressed more prominently!
Next js es una excelente app
I dont really understand why they need to make these tutorial so cringy.
It just seems that they love what they do. I don't see anything cringy about that.
NEXT_PUBLIC_ENV doesn't work on the client side. But, on the server side it works. Nice try google
It should! Can you share a repository or an example where it’s not working?