Deploy SPFx production solution files in specific folder with in container on Azure CDN
Hi,
When we creates SPFx solution and deploying the build files on Azure CDN, it deployes all the files in a container which you mentioned in "deploy-azure-storage.json" file. This is bit messi to see. Because you can deploy multiple solution on the same container. But what if you want to manage solutions by Solutions or By versions.
Here is the way.
I will show you how to deploy SPFx production deployment files in a specific folder in the Container on Azure CDN.
First you have to deploy some gulp task packages in dev-dependencies
npm install gulp-util gulp-deploy-azure-cdn --save-dev
Now you need to make following changes in the "gulpfile.js" file :
const deployCdn = require('gulp-deploy-azure-cdn');const gutil = require('gulp-util');
gulp.task('deploy-azure-storage-folder', function () {
return gulp.src('temp/deploy/**/*', {}).pipe(deployCdn({
containerName: '<<Your Container Name>>', // Container created in StorageAccount
serviceOptions: ['<<blobstoragename>>', '<<MyLongSecretStringFromAzureConfigPanel>>'], // custom arguments to azure BlobService
folder: '<<Folder Name To Store>>', // path within container
deleteExistingBlobs: false, // true means recursively deleting anything under folder
concurrentUploadThreads: 20, // number of concurrent uploads, choose best for your network condition
metadata: {
cacheControl: 'public, max-age=1', // cache in browser
cacheControlHeader: 'public, max-age=1' // cache in azure CDN.
},
testRun: false // test run - means no blobs will be actually deleted or uploaded, see log messages for details
})).on('error', gutil.log);
});
At last just call the gulp task "deploy-azure-storage-folder" with command gulp deploy-azure-storage-folder.
So gulp command sequence should be like :
gulp clean
gulp bundle --ship
gulp deploy-azure-storage-folder
gulp package-solution --ship
Comments