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

Cloudflare Workers (Wrangler)

A front-end application can be deployed in a variety of ways. Like Docker, Kubernetes, and a hosted virtual machine. 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
• Wrangler can be accessed in three different ways.
  • 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 can be used to 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. However, continuous delivery (CD) or continuous deployment (CD) can be used interchangeably.

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.

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: [email protected]
  displayName: ‘Install Node 16.x’
  inputs:
  versionSpec: 16.x
  checkLatest: true
• Install Node Packages
  – task: [email protected]
  displayName: ‘Install Node Packages’
  inputs:
  command: custom
  verbose: false
  customCommand: i
• Build Application
  – task: [email protected]
  displayName: Build Application
  inputs:
  command: custom
  verbose: false
  customCommand: ‘run build’
  continueOnError: true
• Install Wrangler
  – task: [email protected]
  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: [email protected]
displayName: 'Use Node 16.x'
inputs:
versionSpec: 16.x
checkLatest: true

- task: [email protected]
displayName: 'Install Node Packages'
inputs:
command: custom
verbose: false
customCommand: i

- task: [email protected]
displayName: Build
continueOnError: True
inputs:
command: custom
verbose: false
customCommand: 'run build'
continueOnError: false

- task: [email protected]
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.