Find out how to Transfer Information to an Azure Storage Account Utilizing Gulp Duties
Introduction
Automation is current in each technique of software program improvement and deployment. There are a number of methods to deploy our static information to Azure CDN. On this article, we’re going to talk about the way to add the static information out of your native machine to Azure CDN utilizing gulp duties.
We’re going to get this completed with the assistance of gulp packages from NPM. Gulp itself helps to automate a number of the construct/deployment processes the place we will create customized duties and add in a gulp pipeline.
Let me clarify the step-by-step implementation in order that will probably be straightforward to observe.
Step 1
Create a venture folder the place you may hold the required information to get this job completed.
Step 2
We rely on two information for this, bundle.json and gulpfile.js.
Step 3
Create a file known as bundle.json with the beneath contents:
- {
- “identify”: “deploy-files-to-azure-cdn”,
- “model”: “0.0.1”,
- “personal”: true,
- “engines”: {
- “node”: “>=0.10.0”
- },
- “scripts”: {
- “construct”: “gulp bundle”,
- “clear”: “gulp clear”,
- “check”: “gulp check”
- },
- “dependencies”: {
- “gulp-util”: “^3.0.8”,
- “gulp-deploy-azure-cdn”: “2.1.0”
- },
- “devDependencies”: {
- “gulp”: “~3.9.1”
- }
- }
Step 4
Open Node JS Command Immediate and level to the situation the place you created the bundle.json file and run the beneath command to put in the required node module packages:
Don’t fear, we simply want solely Three node packages, so it received’t eat your knowledge like a giant venture.
Step 5
Now create a gulpfile.js file the place we are going to add our gulp duties with the beneath contents:
- const gulp = require(‘gulp’);
- var deployCdn = require(‘gulp-deploy-azure-cdn’);
- var gutil = require(‘gulp-util’);
- gulp.job(‘MeaningFullNameForTheTask’, perform () {
- return gulp.src(‘SourceFolderName/**/*’, {}).pipe(deployCdn({
- containerName: ‘StorageContainerName’,
- serviceOptions: [‘StorageAccountName’, ‘StorageAccountKey’],
- folder: ‘FolderName (Elective)’,
- deleteExistingBlobs: false,
- concurrentUploadThreads: 20,
- metadata: {
- cacheControl: ‘public, max-age=1’,
- cacheControlHeader: ‘public, max-age=1’
- },
- testRun: false
- })).on(‘error’, gutil.log);
- });
Step 6
“SourceFolderName” – The bottom folder URL for the “SourceFolderName” in gulp job src would be the gulpfile’s base folder location.
Step 7
“StorageContainerName” – The container you created in your storage account.
Step 8
“StorageAccountName” – Identify of your storage account the place you created the container.
Step 9
“StorageAccountKey” – Entry Keys, like connection strings for DB, to securely entry your Storage Account. Within the properties pane of the Storage Account, beneath “AccessKeys” you will discover the Key.
Step 10
We’re all set to maneuver the contents from our native machine to Azure CDN. Open your Node JS Command immediate and swap the listing to the situation the place you’ve got positioned your bundle.json and gulpfile.js information.
Step 11
Run the beneath command:
- gulp MeaningFullNameForTheTask
Based mostly in your web add velocity, information might be moved quicker to the Azure Cloud.
Step 12
We will add any variety of duties to the identical gulpfile and segregate your duties for various use instances.
Word how straightforward it’s to maneuver contents from our native folder to Azure CDN, however take into account that since we’re exposing our StorageAccountKey right here, just be sure you have restricted entry to the gulpfile from different customers.
I hope this text lets you perceive shifting information to Azure CDN with the assistance of Gulp Duties. In case you have any questions/points about this text, please let me know in feedback beneath!
