In today's fast-paced software development landscape, deploying applications efficiently and seamlessly is crucial. In this blog post, I will walk you through the process of setting up Bitbucket Pipelines to automate the deployment of a web application built using JavaScript and Node.js to Azure Static Web Apps and Azure App Service.
Here is my simple bitbucket pipeline, to build and publish Nodejs based API(server app) to Azure App service, and JS based client app to Azure Static Web app
image: node:18
pipelines:
default:
- parallel:
- step:
name: Server - Build and Test
caches:
- node
script:
- cd server
- npm install
- echo 'Add test later'
- step:
name: Code linting
script:
- cd server
- npm install eslint
- echo 'Add eslint config file to server'
caches:
- node
branches:
master:
- parallel:
- step:
name: Server Code:Build
caches:
- node
script:
- cd server
- npm install
- apt update && apt install zip
# Exclude files to be ignored
- zip -r app-wp-cloud-$BITBUCKET_BUILD_NUMBER.zip . -x *.git* bitbucket-pipelines.yml
artifacts:
- server/*.zip
- step:
name: Client Code:Build
script:
- cd client
- npm ci
- npm run build
artifacts:
- client/dist/**
variables:
- VITE_API_URL: $VITE_API_URL
- VITE_AUTH_TOKEN: $VITE_AUTH_TOKEN
- step:
name: Security Scan
script:
# Run a security scan for sensitive data.
# See more security tools at https://bitbucket.org/product/features/pipelines/integrations?&category=security
- pipe: atlassian/git-secrets-scan:0.5.1
- parallel:
- step:
name: Server Code:Deploy to Production
trigger: manual
script:
- cd server
- pipe: atlassian/azure-web-apps-deploy:1.0.1
variables:
AZURE_APP_ID: $AZURE_CLIENT_ID
AZURE_PASSWORD: $AZURE_CLIENT_SECRET
AZURE_TENANT_ID: $AZURE_TENANT_ID
AZURE_RESOURCE_GROUP: $AZURE_RESOURCE_GROUP
AZURE_APP_NAME: $AZURE_SERVER_APP_NAME
ZIP_FILE: server-$BITBUCKET_BUILD_NUMBER.zip
- step:
name: Client Code:Deploy to Production
trigger: manual
script:
- pipe: microsoft/azure-static-web-apps-deploy:main
variables:
APP_LOCATION: '$BITBUCKET_CLONE_DIR/client/dist'
OUTPUT_LOCATION: ''
SKIP_APP_BUILD: 'true'
API_TOKEN: $deployment_token
custom:
client:
- step:
name: Client Code:Build
script:
- cd client
- npm ci
- npm run build
artifacts:
- client/dist/**
variables:
- VITE_API_URL: $VITE_API_URL
- VITE_AUTH_TOKEN: $VITE_AUTH_TOKEN
- step:
name: Client Code:Deploy to test
deployment: test
script:
- pipe: microsoft/azure-static-web-apps-deploy:main
variables:
APP_LOCATION: '$BITBUCKET_CLONE_DIR/client/dist'
OUTPUT_LOCATION: ''
SKIP_APP_BUILD: 'true'
API_TOKEN: $deployment_token
DEPLOYMENT_ENVIRONMENT: test
This Bitbucket Pipeline configuration defines a series of steps to build, test, lint, and deploy both the server and client components of your application to Azure services. Here's a breakdown of the main sections:
Image Definition: The pipeline starts with defining the Docker image to use for running the pipeline steps. In this case, it uses the node:18 image.
Default Steps: These steps will be executed for all branches by default. It includes parallel steps for building and testing the server as well as performing code linting.
Branch-Specific Steps (master branch): These steps are specific to the master branch. It includes parallel steps for building and testing the server, building the client code, and performing a security scan. It also includes manual deployment steps for deploying to the production server and deploying client code to production.
Custom Steps (client branch): These steps are defined under the custom section and are executed only for a specific branch named client. It includes building and deploying the client code to a test environment.
This pipeline configuration demonstrates how to integrate Bitbucket Pipelines with Azure services to automate the deployment process for your JavaScript and Node.js applications. It covers build steps, testing, code linting, security scanning, and deployment to both production and test environments. Make sure to replace the placeholder variables (e.g., $AZURE_CLIENT_ID, $VITE_API_URL) with actual values relevant to your project.
With this pipeline in place, your deployment process becomes more efficient and reliable, allowing you to focus on building great applications without worrying about the deployment intricacies.
Top comments (0)