phpfileexistsurl技巧_本地化支配前端

<link rel='stylesheet' href='//at.alicdn.com/t/fontnm.css' /> <img src="https://sitecdn.zcycdn.com/f2e/8.png"alt="收货人"/> <img src="https://luban.zcycdn.com/f2e/8.png"alt="收货人"/> //css中字体文件 src:url(https://sitecdn.zcycdn.com/t/font_148178j4i.eot); src:url(https://sitecdn.zcycdn.com/t/font1_4i.woff);

为了担保我们内网中可以访问我们谈论出以下两个方案

我们通过 DNS 做事这一层去处理，详细 DNS 如何进行的二域名，三级域名进行解析，如何DNS 缓存，以及什么是 13 台根做事器，我们这次不做深入磋商，我们只须要 DNS 的可以进行域名解析，解析到指定的 IP 做事上即可。

那我们是不是可以想一下，是不是把代码中访问的静态资源的域名拦截一下，DNS 解析成本地做事的地址是不是就可以了呢？为了更清楚的理解，我做一个例子如下：

我们代码中须要访问某个图片，CDN 地址：https://cdn.zcycdn.com/b/a.js

上传提前把 a.js 这个文件提前放到本地做事器上访问地址：https://demo.com/b/a.js

当代码运行的时候，代码中访问了 https://cdn.zcycdn.com 的时候，DNS 直接地址解析成 https://demo.com 的 IP 地址，达到访问静态资源的目的

看起来这个蛮大略的，不须要各个业务卖力人排查修正自己代码中的静态资源，胜利在望了，兴致冲冲的跑去找运维童鞋发起是不是可以这样做，然而运维把我说的服帖服帖。
运维童鞋说：静态资源放在工具存储或者做事器上，通过IP或者域名的办法都可以要求的到，不过 IP 只支持 HTTP 的办法，域名+SSL 证书的办法支持 HTTPS，可以做一些加密，让你的资源或者要求内容进行加密，不随意马虎被破解，域名证书之前有 3 到 5 年的，3 年前已经改掉了，目前申请的证书都是一年的，那就预示着不仅仅要用户配置我们供应的 DNS 规则，还要合营我们一年一更新证，想要客户这样合营那是不随意马虎。
如下图所示：

DNS 只是帮我们把域名解析成了 IP， HTTPS 还须要证书验证做事器身份，仅仅 DNS 拦截解析还不足。
仿照实现了一波大致思路：自己启动一个静态资源做事，以及 DNS 本地解析做事，当访问 juejin.cn 域名的时候 IP 解析成本地的 IP 并且成功访问到静态资源，详细如下。

自己写一个DNS做事step1: 本地起一个做事

暂时存放静态资源，仿照做事器上的资源

启动做事访问静态资源

我们的目的：如果访问 http://juejin.cn:3000/zcy.png 的时候访问到我们本地做事的静态资源：http://10.201.45.121:3000/zcy.png

访问：http://juejin.cn:3000/zcy.png

如果是https://juejin.cn:3000/zcy.png

如果访问的是 HTTP 要求那就可以访问，HTTPS 就不能访问，侧面证明了 HTTPS 的证书问题。
HTTPS 对称加密的秘钥我们采取非对称加密传输，数据传输还是利用对称加密，这担保了数据加密传输，为了担保防止伪装，CA（Certificate Authority）， 颁发的证书就称为数字证书 (Digital Certificate)，在非对称加密阶段，做事器会把证书会带着非对称加密的公钥，一起返回，向浏览器证明做事器的身份 HTTPS 比较 HTTP 多了一层 SSL/TLS（安全层）如下图。

方案二

项目在构建的时候扫描出项目中的静态资源地址，从我们公网的 CDN 做事放到客户自己的做事器上，修正源文件中的静态资源地址为客户本地做事的访问地址。

优缺陷一览无余，方案一无需修正代码，但是须要充分得到客户的大力信赖与支持须要配置 DNS 转发，方案二无需劳烦客户，纵然后面有新增域名也不须要和客户沟通，完备自己办理，但是对代码有侵入性，会更换静态资源的地址

统一封装runCommand 实行命令

function runCommand(cmd, args, options, before, end) { return new Promise((resolve, reject) => { log(before, blue) const spawn = childProcess.spawn( cmd, args, Object.assign( { cwd: global.WORKSPACE, stdio: 'inherit', shell: true, }, options ) ) spawn.on('error', (error) => { log(error, chalk.red) reject(error) }); spawn.on('close', (code) => { if (code !== 0) { return reject(`sh: ${cmd} ${args.join(' ')}`) } end && log(end, green) resolve() }); })}1、pre 前置环境校验

切换公司nrm

runCommand('nrm', ['use', 'zcy-server'], {}, 'switch nrm registry to zcy', 'switch nrm registry to zcy success')

下载依赖

runCommand('npm', ['i', '--unsafe-perm'], {}, 'npm install', 'npm install success')2、compile 编译

不同环境须要上传不同的地址因此须要动态修正webpack 的publicPath

const cdnConfigStr = `assetsPublicPath: 'http://dev.com',`replaceFileContent(configPath, /assetsPublicPath:.+,/g, cdnConfigStr)exports.replaceFileContent = function(filePath, source, target) { const fileContent = fs.readFileSync(filePath, 'utf-8') let targetFileContent = fileContent if (Array.isArray(source)) { source.forEach(([s, target]) => { if (target) { targetFileContent = targetFileContent.replace(s, target) } }) } else { targetFileContent = fileContent.replace(source, target) } fs.writeFileSync(filePath, targetFileContent, 'utf-8')}

编译项目

runCommand('npm', ['run', 'build'], {}, `webpack build`, `webpack build success`)3、静态资源更换更换url源码地址

const replaceWebpackDistContent = async function(options = {},collectionAssets,folder) { const fileContent = fs.readFileSync(filePath, 'utf-8'); let targetFileContent=fileContent; [ [/(https:)?//g.alicdn.com/[-a-zA-Z0-9@:%_+.~#?&//=]+.[-a-zA-Z0-9@:%_+.~#?&//=]+/g, cdn], [/(https?:)?//sitecdn.zcycdn.com/[-a-zA-Z0-9@:%_+.~#?&//=]+.[-a-zA-Z0-9@:%_+.~#?&//=]+/g, cdn], [/(https:)?//cdn.zcycdn.com/[-a-zA-Z0-9@:%_+.~#?&//=]+.[-a-zA-Z0-9@:%_+.~#?&//=]+/g, cdn], ].forEach(([reg,uri])=>{ targetFileContent=targetFileContent.replace(reg,function(match){ let basename = ''; let uriMath = match; basename = path.basename(uriMath); if(uriMath.slice(0,4)!='http'){ uriMath='https:'+uriMath; } const parseUrl = url.parse(uriMath); collectionAssets({src:uriMath,fileName:path.basename(parseUrl.pathname)}); console.log('更换前',match); const myURL= new URL(projectName, uri); const replacedUrl = uri+'/'+projectName+parseUrl.path+(parseUrl.hash||''); console.log('更换后', replacedUrl); return replacedUrl; }) }) fs.writeFileSync(filePath, targetFileContent, 'utf-8') }

获取写去世在前端代码中的静态资源

const downloadAssetsFiles= async function(img,forder){ const staticAssets='staticAssets'; let assetsUrl=getPwdPath(`${forder||''}${path.sep}${staticAssets}`); if(!fs.existsSync(assetsUrl)){ fs.mkdirSync(assetsUrl); } return Promise.all(img.objUnique('src').map(({src,fileName})=>{ if(fileName){ return new Promise(function(resolve,reject){ const originFileDir = path.join(assetsUrl,path.dirname(url.parse(src).pathname)); fs.mkdirSync(originFileDir,{recursive:true}); const uri = path.join(originFileDir,fileName); download(uri,src,resolve,reject); }).catch(err=>{ console.log(err) throw new Error(err); }) } }))}function download(loadedUrl,src){ const writeStream = fs.createWriteStream(loadedUrl); const readStream = request(src); readStream.pipe(writeStream); readStream.on('end', function() { console.log(fileName,'文件下载成功'); }); writeStream.on("finish", function() { console.log(fileName,"文件写入成功"); writeStream.end(); });} downloadAssetsFiles(assetsArr,'dist'); // 创造更换资源里还有cdn，因此更换下载后的cdn里面的cdn const assetsArr=[]; await replaceWebpackDistContent(options,collectionAssets,'staticAssets'); await downloadAssetsFiles(assetsArr,'dist');4、OSS推送静态资源到客户资源做事

const ossEndpoint = process.env.OSS_ENDPOINT;const commonOptions = { accessKeyId: process.env.OSS_ACCESSKEYID , accessKeySecret: process.env.OSS_ACCESSKEYSECRET, bucket: process.env.OSS_BUCKET, timeout: '120s',}const extraOptions = ossEndpoint ? { endpoint: ossEndpoint, // 从全局数据获取，没有会依赖 region cname: true, } : { region: process.env.OSS_REGION, }const ossOptions = Object.assign({}, commonOptions, extraOptions);const client = new OSS(ossOptions);//onlinePath 访问的文件地址//curPath 上传的文件地址result = await client.put(onlinePath, curPath);

from http://zoo.zhengcaiyun.cn/blog/article/localized-deployment