How to Deploy Website With Cloudflare Workers And Azure DevOps CI/CD

Introduction

Deploying a website with Cloudflare Workers and Azure DevOps CI/CD empowers developers to enhance website performance and security. Cloudflare workers offer serverless computing, while Azure DevOps streamlines development pipelines. Furthermore, it allows efficient deployment, ensuring fast, responsive, customized web applications.

This blog highlights how to seamlessly deploy a website using Cloudflare workers and Azure DevOps CI/CD that will help developers enhance the website’s performance and reliability while streamlining the development workflow.

Cloudflare Workers (Wrangler)

Developers can deploy front-end applications like Docker, Kubernetes, and a hosted virtual machine in many ways. However, hosting a static website is presently the cheapest and most convenient option. There are several platforms to choose from, including Github Pages, Firebase, Surge, Netlify, and Cloudflare Workers, which will be demonstrated in this post.

Generators such as Gatsby, Nuxt.js, and Next.js make it easy to create modern static web pages (I used the react app for this post).

Configure Cloudflare in Project

• After you’ve registered a Cloudflare account, you’ll need to choose a subdomain on Workers.
• You may now install the Wrangler CLI:
  • npm i @cloudflare/wrangler -g
• There are three ways to access Wrangler.
  • login: a command that authorizes Wrangler by launching a Cloudflare account login page: wrangler login
  • config: an alternative to log in that asks for your email address and API key.
  • Environment variables help customize your global user.
  • In a CI (continuous integration) environment, this is the preferred technique for using Wrangler.
• To obtain your Account ID execute the following command:
  • wrangler whoami
• To initialize wrangler in your current project:
  • wrangler init
• To Publish Application:
  • wrangler publish

The wrangler. toml file is created after the wrangler is initialized. (Note: The path to the build code must be specified in the bucket field.)

name = "client-app"
		type = "webpack"
		route = ''
		zone_id = ''
		usage_model = ''
		compatibility_flags = []
		workers_dev = true
		site = {bucket = "build",entry-point = "workers-site"}
		compatibility_date = "2021-12-24"

Continuous Integration/Continuous Deployment (CI/CD)

In current development methods and DevOps, the acronyms CI and CD are commonly employed. Continuous integration (CI) is a DevOps best practice in which developers integrate code changes into a central repository where automated builds and testing run. Using continuous delivery (CD) or continuous deployment (CD) interchangeably is common.

What is Continuous Integration (CI)

Continuous integration developers merge their modifications as frequently as feasible back into the main branch. Create a build and run automated tests against it to validate the developer’s modifications. By doing so, you prevent the integration issues that can arise when merging changes into the release branch on release day.

When new commits are integrated into the main branch, continuous integration places a high priority on testing automation to ensure that the application is not broken.

What is Continuous Deployment (CD)

After the build step, continuous deployment automates the deployment of all code changes to the testing and/or production environment.

This means you have an automatic release process in addition to automated testing, and you can deploy your application at any time by simply pressing a button.

Every update that passes through all stages of your production pipeline is released to your customers using this method. There is no need for human intervention, and only a failing test will prohibit a new change from going into production.

Continuous deployment is a great approach to shorten the feedback loop with your clients and relieve strain on your team because there is no longer a Release Day. Developers can concentrate on creating software, and their work gets published minutes after they’ve completed it.

Understanding DevOps

DevOps is a methodology and best practice for managing the development, testing, and support throughout the software project lifecycle. Furthermore, these approaches help companies handle all the tools, deployment, and integrated testing, accelerating the workflow and boosting productivity.

In the technology landscape realm, the role of DevOps is proliferating. Furthermore, Companies are hiring top DevOps engineers who can handle their IT infrastructure and streamline their workflows. Also, DevOps engineers must gain valuable insights into DevOps Vs. Agile methodologies. DevOps engineers should combine these approaches to optimize software delivery and project success.

Deploy App using Azure DevOps CI/CD

Create the wrangler-ci.yml, where you configure the CI/CD pipelines:

• Install Node, which is currently being utilized in the project.
  – task: NodeTool@0
  displayName: ‘Install Node 16.x’
  inputs:
  versionSpec: 16.x
  checkLatest: true
• Install Node Packages
  – task: Npm@1
  displayName: ‘Install Node Packages’
  inputs:
  command: custom
  verbose: false
  customCommand: i
• Build Application
  – task: Npm@1
  displayName: Build Application
  inputs:
  command: custom
  verbose: false
  customCommand: ‘run build’
  continueOnError: true
• Install Wrangler
  – task: Npm@1
  displayName: ‘Install Wrangler’
  inputs:
  command: custom
  verbose: false
  customCommand: ‘i @cloudflare/wrangler -g’
• Deploy Application
  – powershell: ‘wrangler publish’
  displayName: ‘PowerShell Script’
  env:
  CF_ACCOUNT_ID: $(accountID)
  CF_API_TOKEN: $(apiToken)

trigger:
		- develop
		
		pool:
		vmImage: ubuntu-latest
		
		steps:
		- task: NodeTool@0
		displayName: 'Use Node 16.x'
		inputs:
		versionSpec: 16.x
		checkLatest: true
		
		- task: Npm@1
		displayName: 'Install Node Packages'
		inputs:
		command: custom
		verbose: false
		customCommand: i
		
		- task: Npm@1
		displayName: Build
		continueOnError: True
		inputs:
		command: custom
		verbose: false
		customCommand: 'run build'
		continueOnError: false
		
		- task: Npm@1
		displayName: 'Install Wrangler'
		inputs:
		command: custom
		verbose: false
		customCommand: 'i @cloudflare/wrangler -g'
		
		- powershell: 'wrangler publish'
		displayName: 'PowerShell Script'
		env:
		CF_ACCOUNT_ID: $(accountID)
		CF_API_TOKEN: $(apiToken)

Conclusion

That’s it! Create a merge request now! After a few seconds, you’ll see a task running, and a new environment with the changes you made will be published on Cloudflare Workers. This is an excellent way to put new features to the test. You can also utilize Cloudflare Workers with another front-end framework or build up a CI/CD on a different platform; the ideas remain the same..