Use this stack to deploy react website connected with a fastapi backend on Azure Web App
- React app generated with
create-react-app
coupled with tailwindcss ๐ - FastApi server with
motor
for db connections ๐ - Deployed with a nginx reverse proxy
- Docker-compose file for local development
You would require
- Azure Webapp configured to work with a Docker Container
- Azure Container Registry to store container images
- MongoDB for all your DB needs
- Web App Name: Name of the app that you have provisioned on Azure. (Note that this should be configured for Docker deploy)
-
Azure Container Registry URL: Login url of your container registry (example: stack.azurecr.io)
-
Azure Resource Group Name : Name of the Resource Group under which your Web app is provisioned
-
MongoDB Connection String : Connection string for your MongoDB
-
Azure Credentials : You would need to generate Azure Credentials scoped to the resource-group/subscription of all the Azure resources mentioned above. This can be done by running the Azure cli command
az ad sp create-for-rbac --name "GHActions" --role contributor --scopes /subscriptions/{subscription-id}/resourceGroups/{resource-group} --sdk-auth
More detailed documentation can be found here
Your app would be hosted at https://<azure_app_name>.azurewebsites.net
You can get started with your project locally by running the command
docker compose -f docker-compose-local.yml up --build -d
This sets up the website at port:5000