[第八届IT邦帮忙铁人赛] Deploy : Deploy to Azure CDN

前言

CDN - 内容传递网络,透过网络连结各地强大处理能力的服务器,快速传输照片、音乐、文档...等文件给使用者,提供快速、高传输性与低成本的服务,也成为现今网站快速与稳定的解决方案之一。个人因为工作关系,曾经接触过2-3种不同 CDN 服务,而有些 CDN 可以透过 FTP 传输文件,您可以利用上一篇文章方法实践 deploy task。而在这篇文章,我们简单介绍如何在设定 Azure CDN 与透过 gulp-deploy-azure-cdn 套件实践 deploy task,若有错误或任何建议,请各位先进不吝提出,谢谢。


 


介绍

设定 Azure Blob 与 CDN

Step 1.选择新增(最左边"+") -> Stroage -> 保存体账户

Step 2.输入名称、账户种类选择Blob保存体,其他设定请参考下图,完成 Azure Blob设定

Step 3.接下来我们设定CDN:选择 Web + 行动 -> CDN

Step 4.输入名称,与资源群组,再依据需求选择定价层(这次范例选择Akamai后建立CDN)

Step 5.接下来我们要增加端点(enpoint):选择CDN -> 概观 -> +端点。输入名称、数据来源选择保存体、选择来源主机名称,点选新增后完成新增端点。

注:建立CDN后可能没办法立刻使用,需要等一段时间(个人没计算多久完成启用,不好意思)。

`

撰写 gulpfile

Step 1.输入下列命令安装 gulp-deploy-azure-cdn

npm install --save-dev gulp-deploy-azure-cdn

Step 2.开启gulpfile,更改程序如下:

var gulp = require('gulp');
var gutil = require('gulp-util');
var deployCdn = require('gulp-deploy-azure-cdn');

gulp.task('upload-app-to-azure', function () {
    return gulp.src(['*.css','*.json'], {
        base: '' 
    }).pipe(deployCdn({
        containerName: 'duranblob', 
        serviceOptions: ['duranstorage', '密码'], /
        folder: 'testfolder', 
        zip: true, 
        deleteExistingBlobs: true, 
        concurrentUploadThreads: 10, 
        metadata: {
            cacheControl: 'public, max-age=31530000', 
            cacheControlHeader: 'public, max-age=31530000' 
        },
        testRun: false 
    })).on('error', gutil.log);
});

参数说明(详细说明可以点此网站):
base: 默认数据夹路径。
containerName: 您的容器名称,指我们建立 blob 容器的名称(下面有图说明)
serviceOptions: 输入您的保存体账户密码(下面有图说明)
folder: blob内哪个数据夹
zip: 是否使用gzip后上传
deleteExistingBlobs : 删除现有blob保存体
concurrentUploadThreads : 上传设定(看似乎是同时几个文件上传,不确定)
metadata: 各个文件的描述 (浏览器cache与CDN cache 保留时间)
testRun: 是否为测试(如果选ture,不会实际上传文件)

Step 3. 执行结果:


上一篇:Deploy : FTP
下一篇:Deploy : CDN Solution 1 - Hash and Replace
返回目录


参考数据

  1. Microsoft Azure CDN 使用 - 自动部署篇 - Demo 小铺
  2. 使用 Azure CDN
  3. 内容传播网络 - wiki

注:本系列文章将于2016 IT邦帮忙铁人赛进行同时,一并发布于个人blogger与dotblog。