When we create an SPFx solution and deploy the build files on Azure CDN, it deploys all the files in the container which you specify in "deploy-azure-storage.json" file. This is a bit messy to see, because you can deploy multiple solutions on the same container. But what if you want to manage this by solutions or 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.
  1. npm install gulp-util gulp-deploy-azure-cdn --save-dev
Now you need to make the following changes in the "gulpfile.js" file.
  1. const deployCdn = require('gulp-deploy-azure-cdn');
  2. const gutil = require('gulp-util');
  3. gulp.task('deploy-azure-storage-folder', function() {
  4. return gulp.src('temp/deploy/**/*', {}).pipe(deployCdn({
  5. containerName: '<<Your Container Name>>', // Container created in StorageAccount
  6. serviceOptions: ['<<blobstoragename>>', '<<MyLongSecretStringFromAzureConfigPanel>>'], // custom arguments to azure BlobService
  7. folder: '<<Folder Name To Store>>', // path within container
  8. deleteExistingBlobs: false, // true means recursively deleting anything under folder
  9. concurrentUploadThreads: 20, // number of concurrent uploads, choose best for your network condition
  10. metadata: {
  11. cacheControl: 'public, max-age=1', // cache in browser
  12. cacheControlHeader: 'public, max-age=1' // cache in azure CDN.
  13. },
  14. testRun: false // test run - means no blobs will be actually deleted or uploaded, see log messages for details
  15. })).on('error', gutil.log);
  16. });
At last just call the Gulp task "deploy-azure-storage-folder" with the command gulp deploy-azure-storage-folder.
So the Gulp command sequence should be like this:
  1. gulp clean
  2. gulp bundle --ship
  3. gulp deploy-azure-storage-folder
  4. gulp package-solution --ship