3 ways to run scalable web apps on Google Cloud

[@googlecloudtech]

How will you run scalable web apps? Let us know in the comments and subscribe to GCT for more Serverless Expeditions! 📣 → goo.gle/GoogleCloudTech​

[@AVINASHSHITOLE-f1t]

Never Seen such a small video with super simple explanation that covers all the aspects from basics to Realtime deployment use cases

[@TheMomander]

Your comment made my day. Thank you!

[@legend_mr_wayne]

The Pro and Cons are very well explained.

[@TheMomander]

Thank you! It's always nice to receive kind words from a legend :-)

[@HorusKrat]

firebase hosting with cloud run sound good!

[@TheMomander]

Yeah, I find myself using that architecture more and more. It's just so easy to set up, and you get great performance thanks to the CDN.

[@samys288]

Hi, In respect to the last use case; is possible to setting up CDN after of the deployment or not?

[@TheMomander]

Yes, you can set up the CDN later. Just be aware that the CDN respects any cache-control headers in your responses from Cloud Run. If your code doesn't set those headers (or if you discover that they need to be fine-tuned) you may want to revisit your code after you've added the CDN.

[@Tamil-Murugan]

Oh nice. How about having Cloud Storage serves static files and App Engine for dynamic file. Backed by Global LB with Cloud CDN? For failure we can add Multi region Cloud storage and Multiple App Engine regional deployments? I haven't tested, just a thought.

[@TheMomander]

That's a great architecture and I've seen others use it for production systems. I didn't call it out in the video because I prefer to use Firebase's automatic CDN over setting up Cloud CDN myself. One caveat to keep in mind: App Engine doesn't support multi-region deployments.

[@samys288]

Hi, I would like know if my app need using autentication/autorization then which is better using: firebase or cloud run?

[@TheMomander]

That is a good question. I have built applications with both, so I thought back to the code I wrote for them. My conclusion: it doesn't matter, because the code will be very nearly the same in both cases. So you would pick Firebase or Cloud Run based on which developer experience you prefer. If you like a more integrated experience using fewer tools, go with Firebase. If you prefer container-based development, go with Cloud Run.

[@DavidHowie-y7d]

Great video...a question if you don't mind...**not** looking for you to provide a lot of detail, just high-level response relative to **feasibility**... I am relatively new to GCP and was already on the path to build an app use the second option (firebase/angular on front-end, cloud run/python on backend). I was planning to host the front-end in one GCP Project and host the backend in a second GCP Project. Access to the Cloud Run APIs must be limited to frontend authenticated users. I'm using Firebase/Identity Platform to allow authentication via email/password as well as other providers (e.g. Google, Facebook). Is it possible to use the token returned from the frontend authentication, in one GCP Project, to then authenticate to the backend APIs in the second GCP Project? I have been researching this setup but not finding a clear answer. I do not want to spin my wheels too long if it is readily known that such an implementation is not possible or too difficult, in which case I guess I would choose to merge the front-end and back-end into a single GCP Project.

[@TheMomander]

I'm glad you liked the video! I don't know if a token from one project can be used in another. Is there a reason you're splitting up your application across two projects? That sounds like extra work with no gain.

[@DavidHowie-y7d]

@@TheMomander Thank you for the reply. Yes, I agree splitting frontend and backend across GCP projects offers no gain, while introducing additional challenges. I have since decided to keep both the frontend and backend in a single GCP project.

[@venkataaraadhya]

thanks for the question and thanks for the answer

[@timtomtimtomtimtimto]

How would you implement a JAM Stack where the HTML sites are generated and where I can still access the "moving" parts via API?

[@TheMomander]

Any of the three approaches outlined in this video would work. If you generate the HTML files at build-time, you would treat them like any other static asset. If you generate the HTML on the server for each request, you would do that in Cloud Run or Cloud Functions. You can set it up yourself, but if you are using Nextjs there is less manual setup thanks to buildpacks. You may want to check out our video "Run your Next.js app on Cloud Run" that shows you how to do it.

[@SteveT-tg4eb]

Just wanna clarify, in the last architecture using cloudrun, do both the frontend and backend are on the same cloudrun service or 2 separate services?

[@TheMomander]

Good question! Whenever I have used that architecture myself, I have used a single Cloud Run service for both the frontend and the backend. I like how the whole application is a single container. This makes it easy to reason about what is currently deployed and to roll back to a previous version if needed. It also means that CORS will be less of a concern. It is of course possible to create two containers and deploy them separately. That would be useful if you are relying on nginx or similar to serve your static content. It is also useful if you need to scale and optimize frontend and backend separately. But that kind of manual scaling and optimization is not needed as much when you are using a serverless platform like Cloud Run. Best of luck with your project!

[@SteveT-tg4eb]

@@TheMomander you do read all the comments! Thanks mate, really appreciate this 👍🏻

[@hugolapa1229]

@@TheMomander Heyo, how would I get both the front end and backend in a single container? Does cloud build work for this?

[@TheMomander]

@@hugolapa1229 Good question! To get both the front-end and the back-end into the same container, I tell the framework I am using that one particular directory (like "public") should be served as static files. In Express it would look like this: app.use(express.static('public')); app.get('/api', (req, res) => { res.send('This is the API'); }); app.listen(port, () => { console.log(`Server listening on port ${port}`); }); Other server-side frameworks have similar mechanisms.

[@boeingpameesha9550]

Thank you for sharing.

[@suvadeepsarker7817]

I have a question. Is it possible to run a serverless, scalable web application (running some custom disaster recovery solution as an example) that is multi-regional/global in Google Cloud? So far all the serverless options that I have seen are all regional.

[@TheMomander]

Yes, when I'm writing this (June 27, 2022) you can host your Cloud Run service in 33 of Google Cloud's 34 regions worldwide. If your Cloud Run service has been deployed to multiple regions, you can either address each region individually, or put a load balancer in front and send each user to the closest one. Check out our video "Speed up your Cloud Run service by hosting it closer to your users" for instructions!

[@revanthselvan2151]

Will the second architecture work well for a live streaming application?

[@TheMomander]

I think it depends. Are you streaming video? If so, Cloud Run can handle the regular web stuff, but you will need something different to stream the video. It could be an existing service, like KZbin, or your own media server. The Google Cloud Marketplace includes a number of media server products.

[@jitenanand9535]

what could be a good soution to host live Data Streaming Services and news publishing service

[@TheMomander]

Any of the architectures described in this video would work well for that. You just have to think about which pros you care the most about, and which cons you want to avoid the most. Also, don't be afraid to pick the "wrong" one. It's pretty easy to switch between them. Best of luck with your project!

[@zouhirelmezraoui1336]

My respects, and thank you very much for providing general solutions and for all levels. We need to know how to work over the phone if it is possible, and we may be able to do it by following the steps, conditions and rules

[@TheMomander]

Hi Zouhir, happy to hear you liked the video! What do you mean by "work over the phone"?

[@zouhirelmezraoui1336]

@@TheMomander I need to become a strong user because I continue to learn and I want to accomplish tasks as well as I study e-commerce and everything is by phone as I cannot buy a computer now and I learned a few basics of programming and why not and thanks for you

[@zouhirelmezraoui1336]

@@TheMomander Thank you very much for your interest and appreciation. I would like to inform you that I aspire to learn. I have participated in several courses on the Coursera platform, machine learning, operating systems, java, c++, technical support fundamentals, the bits and bytes of networking.

[@TheMomander]

@@zouhirelmezraoui1336 Sorry, we aren't really equipped to provide one-on-one developer training over the phone. Sounds like you found Coursera. That is a great resource!

[@felipersa3809]

very enlightening video, thanks!

[@dangoncalvesbr]

Very interesting! I’m currently using Google Apps Script to serve some HTML files and building a nice PoC of a possible future application. Maybe your first option with firebase might be the next step. I’ll have a look into it! Btw, love the videos!

[@TheMomander]

I love it! The less code and infrastructure needed for your prototype, the better. Best of luck with your project, Danilo!

[@muncho404]

Firestore is Awesome🍓

[@TheMomander]

I agree! I especially like how you can access it like a normal database (by putting your own server-side API in front of it) or clients can access it directly without any server-side code. Most of my web apps use a combination of these two approaches.

[@franciscojavierjimenez5801]

Y0 he entendido que para las personas como yo nos lo quieren hacer más fácil y entendible aparte nos quieren ayudar bievanida sea su ayuda y ustedes también gracias

[@markxp2002]

Don't forget app engine!

[@TheMomander]

Good point! I didn't mention App Engine in the video because I haven't used it myself for dynamic web apps. But it would probably work just fine.

[@franciscojavierjimenez5801]

Le Puedo jurar que hi Oy pos hoy nunca me he sentido más seguro veo que al mismo tiempo velan por sus ltereses y al mismo tiempo por los nuestros también gracias

[@franciscojavierjimenez5801]

Ahora me sien to más protegido pogel cliud i dor ustedes tambien

[@ramgopalnalluri]

Please try in multiple languages

[@TheMomander]

Hi Ram! Sorry, I didn't understand your comment. Could you explain?