Post
Ask Question

How to Move Files to an Azure Storage Account Using Gulp Tasks

Introduction 

 
Automation is present in each and every process of software development and deployment. There are multiple ways to deploy our static files to Azure CDN. In this article, we are going to discuss how to upload the static files from your local machine to Azure CDN using gulp tasks.
 
We are going to get this done with the help of gulp packages from NPM. Gulp itself helps to automate some of the build/deployment processes where we can create custom tasks and add in a gulp pipeline.
 
Let me explain the step-by-step implementation so that it will be easy to follow.
 
Step 1
 
Create a project folder where you can keep the required files to get this task done.
 
Step 2
 
We depend on two files for this, package.json and gulpfile.js.
 
Step 3
 
Create a file called package.json with the below contents:
  1. {  
  2.   "name": "deploy-files-to-azure-cdn",  
  3.   "version": "0.0.1",  
  4.   "private": true,  
  5.   "engines": {  
  6.     "node": ">=0.10.0"  
  7.   },  
  8.   "scripts": {  
  9.     "build": "gulp bundle",  
  10.     "clean": "gulp clean",  
  11.     "test": "gulp test"  
  12.   },  
  13.   "dependencies": {  
  14.     "gulp-util": "^3.0.8",  
  15.     "gulp-deploy-azure-cdn": "2.1.0"  
  16.   },  
  17.   "devDependencies": {  
  18.     "gulp": "~3.9.1"  
  19.   }  
  20. }  
Step 4
 
Open Node JS Command Prompt and point to the location where you created the package.json file and run the below command to install the required node module packages:
  1. npm install  
Don’t worry, we just need only 3 node packages, so it won’t consume your data like a big project.
 
Step 5
 
Now create a gulpfile.js file where we will add our gulp tasks with the below contents:
  1. const gulp = require('gulp');  
  2. var deployCdn = require('gulp-deploy-azure-cdn');  
  3. var gutil = require('gulp-util');  
  4.   
  5. gulp.task('MeaningFullNameForTheTask', function () {  
  6.     return gulp.src('SourceFolderName/**/*', {}).pipe(deployCdn({  
  7.         containerName: 'StorageContainerName', // Container created in StorageAccount  
  8.         serviceOptions: ['StorageAccountName', 'StorageAccountKey'], // custom arguments to azure BlobService  
  9.         folder: 'FolderName (Optional)', // path within container  
  10.         deleteExistingBlobs: false, // true means recursively deleting anything under folder  
  11.         concurrentUploadThreads: 20, // number of concurrent uploads, choose best for your network condition  
  12.         metadata: {  
  13.             cacheControl: 'public, max-age=1', // cache in browser  
  14.             cacheControlHeader: 'public, max-age=1' // cache in azure CDN.  
  15.         },  
  16.         testRun: false // test run - means no blobs will be actually deleted or uploaded, see log messages for details  
  17.     })).on('error', gutil.log);  
  18. });  
Step 6
 
“SourceFolderName” - The base folder URL for the “SourceFolderName” in gulp task src will be the gulpfile’s base folder location.
 
Step 7
 
“StorageContainerName” - The container you created in your storage account.
 
 
Step 8
 
“StorageAccountName” - Name of your storage account where you created the container.
 
Step 9
 
“StorageAccountKey” - Access Keys, like connection strings for DB, to securely access your Storage Account. In the properties pane of the Storage Account, under “AccessKeys” you can find the Key.
 
 
Step 10
 
We are all set to move the contents from our local machine to Azure CDN. Open your Node JS Command prompt and switch the directory to the location where you have placed your package.json and gulpfile.js files.
 
Step 11
 
Run the below command:
  1. gulp MeaningFullNameForTheTask  
Based on your internet upload speed, files will be moved faster to the Azure Cloud.
 
Step 12
 
We can add any number of tasks to the same gulpfile and segregate your tasks for different use cases. 
 
Note how easy it is to move contents from our local folder to Azure CDN, but keep in mind that since we are exposing our StorageAccountKey here, make sure that you have restricted access to the gulpfile from other users.
 
I hope this article helps you to understand moving files to Azure CDN with the help of Gulp Tasks. If you have any questions/issues about this article, please let me know in comments below!


Similar Articles