This tutorial will teach you how to deploy a simple client (Javascript/React) and server (Python/FastAPI) to Google Cloud Run. Check out the Video Tutorial here.
- Install Google Cloud SDK
- Install Node.js
- Python 3.9+
Verify installs by testing the above tools in the command line
gcloud --version
npm --version
Login to gcloud project
gcloud auth login // prompts for login
gcloud config set project YOUR_GCLOUD_PROJECT
gcloud config get-value project // verify project id
Clone to tutorial repo
git clone https://github.com/VCG/cloudrun-demo.git
cd cloudrun-demo
Install local dependencies and test locally
cd server
python3.9 -m venv venv
source venv/bin/activate
pip install -r requirements.txt
Run the app locally
python main.py
// check http://127.0.0.1:4244/
Have a look at server/Dockerfile. This file defines the container environment that gcloud will use to host your Python application. Also familiarize yourself with the serverless concept of CloudRun. An app deployed in Cloud Run must fulfill those requirements. Now deploy your code using this command from the cloud CLI:
gcloud run deploy <YOUR_NAME>-demo-server --source . --allow-unauthenticated
Once the command has finished successfully finished, visit the URL that is printed in the terminal. You should see the same output as when you ran the app locally. Also, inspect the options that are available for your deployment from the Cloud Console.
Navigate to the client directory and install all local dependencies
cd ../client
npm install
Now, update the client/.env.production to the URL that has been generated by the Cloud Run deployment of the server. By using both the client/.env and client/.env.production React knows which URL to use depending on whether you are developing locally or you are using the deployed version. Next, have a look at client/Dockerfile. What is different from server/Dockerfile?
Deploy react client to Cloud Run
gcloud run deploy <YOUR_NAME>-demo-client --source . --allow-unauthenticated
This should give you a URL to your deployed React app if successful. The frontend website should display something like Hello World! - This was loaded dynamically through an endpoint! if everything worked out.