已经部署的程序，如何正确的加上CDN

Question

从来没有使用过CDN，不知道这个问题怎么问比较合适，只能描述下需求了。

现在有一个项目，之前没考虑过速度的问题，所以程序里的静态文件，如CSS、JS、图片、视频等，都是放在自己的服务器上，现在这套程序用户在访问的时候速度非常慢，所以想用CDN。

研究了一下国内现在提供CDN服务的厂商，有七牛、又拍云等，这些都要求先将静态文件同步到CDN上，然后将程序里静态文件的路径修改为CDN上的路径。

现在有一个问题是，程序的部署不知道该走怎么样的流程，我现在的部署方式是在本地修改为代码以后，代码提交到Git库里，然后再克隆到服务器上，并且用户上传的图片也都是在服务器上，本地并没有保存。 如果将静态程序的路径改为CDN的路径，怎么部署代码比较方便？

比如用户上传了图片，我需要调用CDN厂商的接口立即同步到CDN，然后程序直接使用CDN上的路径呢，还是应该怎么办？

Answer 1

用网宿，阿里云或者加速乐吧，只需修改DNS

Answer 2

这种情况我建议你不要hardcode这些路径了，所以最好配合使用一些预处理工具。对于css可以选择less或者sass，对于后端渲染的html则将hardcode的url替换成对应模板系统里的变量。

比如之前css里面写的是：background: url("mystic.com/images/background.jpg") repeat-x fixed 0 0;
现在使用sass可以改成background: url(#{$assert_root}/images/background.jpg) repeat-x fixed 0 0;， 其中assert_root是一个sass变量，它的值根据你当前build是针对DEV还是Prod不同而相应的指向你的DEV机器或者CDN机器。

后端的话比如说之前是<img src="mystic.com/images/bar.jpg" height="42" width="42">
现在用JSP则变成了<img src="${assert_root}/images/bar.jpg"/>，原理同上

我例子里的技术不一定适合你，但大意也就是通过变量的方式解耦你对资源地址的绑定。根据你自己的技术栈，你可以选择类似的技术（框架、库）打到类似的效果。

这样你的开发、发布流程将会是：
开发时：配置dev server使assert_root指向本地（一次性修改），每次修改了sass代码时需要重新编译一次（可以用gulp之类的工具自动化这个过程）。所以几乎不需要什么额外的劳动。。
发布时：配置Prod server使assert_root指向CDN（当然，也是一次性），编译一次sass，然后发布代码到server

Answer 3

七牛支持使用镜像功能，简单配置一下，七牛会自动帮你转存静态文件的。七牛免费账户也提供免费的存储和CDN流量额度。小站点完全够用了。

你只需要两个步骤，一是配置一下七牛的镜像存储功能，二是更改代码里面链接使用CDN域名。以后就不需要做更改了。