Deploy a React App on Azure with Bitbucket pipelines
I use Bitbucket for its private repos and recently decided to deploy my app to Azure. I was determined to do it with a pipeline, but it took some research to finally get it to work. If you want to follow the same path, here is what you have to do.
Prerequisites
A React app — I created one using npx create-react-app <APP-NAME>.
Create an Azure App Service
We will be deploying the app to an Azure App Service. Create one by going to the Azure Portal, click on Create a resource and choose Web App.
On the next page give the App Service a name, this will also be the subdomain to access it later, so it has to be unique. Publish should be Code since we will be publishing the built project directly from Bitbucket. For the Runtime stack select Node. Fill out the rest of the settings and hit Review + create and create the App Service.
While the App Service is starting up let’s gather a couple of secrets we need for the Bitbucket pipeline.
Gather Azure secrets
Open the Azure Console
Type inaz login, and follow the instructions to log in.
To publish an app via a Bitbucket pipeline we need an Azure Service Principal. To create one use az ad sp create-for-rbac -n <SERVICE_PRINCIPLE_NAME> .
Save the output somewhere as we will need appId, password, and tenant.
Define the Bitbucket pipeline
Bitbucket pipelines are defined in a bitbucket-pipelines.yml file. In the root folder of your project create the file with the following content:
image defines the Docker image to use while building the app. You can use any image from Docker Hub and here we will use the default image provided by Bitbucket. It comes with NPM, NVM (Node Version Manager) which allows you to manage multiple versions of Node.js on your machine, and zip to archive the built project to deploy to Azure.
The custom pipeline (line 4) allows you to run the pipeline manually. If you want to have a CI/CD pipeline that runs every time you push, you can use the default pipeline.
script is an array of commands to be executed to build and package the app. The first command upgrades the Node version to 12 (the same one defined for the App Service in Azure) then it installs and builds the project. The built files reside under build so we cd into the folder and archive everything.
The second step deploys the archived app to Azure. For this we need the secrets we gathered from Azure:
- APP_NAME — the name of the App Service
- RESOURCE_GROUP — the Azure Resource group
- AZURE_APP_ID — the appId of the Service Principal
- AZURE_PASSWORD — the password of the Service Principal
- AZURE_TENANT_ID — the tenant of the Service Principal
These variables are defined in your Bitbucket repository under Repository Settings → Pipelines → Deployments.
You can have multiple deployments with different variables. The property deployment (line 18) in the pipeline YAML file defines, which deployment will be used.
Once the deployment variables are defined and the bitbucket-pipelines.yml file is pushed you can run the pipeline. In your Bitbucket repository go to Pipelines and hit Run pipelines. Once the pipeline has finished you should be able to see the pushed project in the Deployment Center in the App Service.
If you selected a Windows virtual machine for the App Service the React app should be live. Go to https://<APP_SERVICE_NAME>.azurewebsites.net. If the App Service uses a Linux VM there is one last step. The Linux uses pm2 to run Node apps so you need to tell it to serve the app that you deployed. In the App Service open Configuration and select the General Settings tab. There you have the option to define a start-up command. The extracted app resides under /home/site/wwwroot and you can use pm2 serve /home/site/wwwroot --no-daemonto start the server. Save the configurations and wait for the redeploy.
If everything goes well your app should be running on Azure.
Cheers!
