How to deploy dockerised react + django web app to google app engine? - reactjs

I have created a web app which uses react as frontend and django as backend. I have also added nginx proxy to my both backend and frontend. I use docker compose to build and start all of my containers and everything works perfectly.
Now i want to deploy it to google app engine and I have no idea how to do that. I found this well written article, but it uses aws. I want to use app engine because its free (for now).
It would be really helpful if someone could guide me through this.

App Engine Standard does not support containers but App Engine Flex does using Custom Runtimes.
Anyway, App Engine Flex does not support docker compose so you need to decouple your app into individual services (react, django, nginx (not necessary at all since GAE already has an NGINX proxy)) by using your own container for each element or use the already available runtimes when applies.
Then you can connect each other by using the App Engine URLs. This article can help you understand this approach (it is for NodeJS but the idea is the same).

App engine supports specific runtimes, not dockerized applications. You would need to deploy a python app engine app for the Django backend and a nodejs app for the react app.

Related

Create a aws Amplify app from source code

I have done one of the tutorial for aws amplify (the todo app). When it was done I had no more need for it so I deleted the application from the cloud.
Then one though hit me. If I have the source code locally (or hypothetically in git) for my amplify application, can't I somehow recreate the app in the cloud again from the source? if I understood it completely it is supposed to be infrastructure-as-code.
Currently, Amplify CLI doesn't support this.
Amplify is not an Infrastructure as Code.
From the AWS Documentation:
AWS Amplify is a set of tools and services that can be used together or on their own, to help front-end web and mobile developers build scalable full stack applications, powered by AWS. With Amplify, you can configure app backends and connect your app in minutes, deploy static web apps in a few clicks, and easily manage app content outside the AWS console.
Even if it's not supported, apparently there is some way to add services to the newly created Amplify from the existing Amplify backend.
https://github.com/aws-amplify/amplify-cli/issues/3505#issuecomment-597897873

How to use custom domain for Serverless app with React frontend?

I finished my Udacity Cloud Developer nanodegree and I want to make a custom domain to showcase on my portfolio.
The stack I use includes: Api Gateway, Lambda, DynamoDB, Nodejs, S3 and Serverless framework. Frontend is : React.
However, Im stuck on comprehending how to deploy the full app, with React frontend?
Something like: anc.com would navigate to my app. I found many solutions mentioning about using serverless-domain-manager.
But what about my React front end? I read some solutions saying to deploy static web using S3.
But my app currently has S3 to store the uploaded images.
If I deploy my frontend with S3, do I have to make 2 S3 buckets?
Currently, I have to use 2 terminals, SLS deploy for backend, and npm run start to run the front end at localhost.
My github code:
https://github.com/ploratran/DogLookBook
The team at Serverless has also released a tool called components, one of which looks like its perfect for what you want to do; it automatically handles everything on the cloud to get your React files hosted and a domain assigned too: https://github.com/serverless-components/website

What is the best way to deploy a create react app to Google cloud?

I don't want to use containers. Is it best to use Google app engine and deploy the static build from an express server like I have done before using Heroku. Or is there a better way ?

Why can't I deploy a React app to Google Cloud Storage?

In the past when I've created a client-side web app using a framework like React, I can create a browser build and push it to a static hosting platform like AWS S3.
For Google Cloud Platform, it seems like the go-to approach is to deploy it to App Engine. If I'm understanding correctly, GAE is a combination of storage and compute resources.
Why can't I simply host the JavaScript app as prepared by webpack?
Google Cloud Storage (GCS) would be the way to go to host your static website on Google Cloud Platform (GCP). Notice that in order to use GCS you'll need to have a domain as well as a GCP project. The documentation is very straightforward on how to achieve this. Here you can find some examples and other useful information.
You could also host your static website on Google App Engine (GAE). But in this case you'll need to cleverly build your app.yaml file in order to manage your URL handlers, as well as structuring your project in a particular way. Simply uploading the JS app as prepared by webpack won't work. You can find all the useful information here in order to use GAE to host your static website.

What is the difference between app engine and cloud endpoints when developing with Android studio?

I've been trying to do this for a while, but I'm confused as to the difference between the two applications.
I know that endpoints helps you expose an API and generate the client libraries that allow you to interact with your Android app.
But in the examples, it seems as though endpoints is the only code you write for the backend at all.
I thought that app engine was what the actual application ran on - that is, do I need a separate project with the app engine backend, then my android studio project with the Android app and the endpoints API, or does writing the endpoints API also serve as the app engine backend?
The endpoints backend API is just a piece of a GAE app functionality.
If you only have that functionality in your app you can extend it by adding the desired stuff to the existing app.yaml file (and the related app code), you don't have to create a new app. Especially if the endpoints functionality and the additional desired functionality are related.
You can also add endpoints backend support to an existing GAE app by merging the endpoints backend app.yaml content into the existing app's app.yaml file and adding the class file and API server file to the app's code.

Resources