我们前段的构建产物怎么样上线和部署?一般的咱们上线之前肯定会先 atm 的啊,生成咱们对视的这个目录,那这个对视的目录我们应该怎么样上线部署在哪里?今天给大家聊清楚。就是 首先这个产物有的公司他会和后端代码一块部署,但部署在这个扛不开的服务中,如果这个后端是扎尔代码,那么他会把咱们的产物一般都放到 这个目录下,他有一个静态目录就扔到这个里面就可以了,扔到这个里面之后,那么那么这个汤姆开特我们可以下载他的朋友们下载下来之后这个是他的一个目录,那么咱们会放到这个歪歪玉壁时这个目录下面。比如说咱们就假如说这个历史的目录,那么我们可以启动这个汤姆开的服务,我们直接运行这个命令,启动就在这个他们开始闭目录下,直接运行这个命令启动之后, 咱们可以看他账号,他的账号是八零八零,那么咱们切除可以返回咱们签的服务了。在浏览区里直接输入那八零八零,然后下面有一个 s 头,你压一下他, 这个就是咱们前面的一个服务和方位,常规状况是把这个前方的产物放到 angeks 服务当中,那就是他,那么我们可以下载 windows, 下载这个那个其他系统,快下载这个下载下来之后,那么我们直接运行安装运行就行了,直接运行时到这个 ang 服务就行了,安装完之后我可以去运行一下这个命令。哇,这个地方有安装版本, 那么这个地方是我的,这个我需要放的位置就是我的这个精彩文件需要放到目录的位置,那么这也是他的一个配置文件,我们可以打开这个卡这个文件,那么这是他的一个配置,那么我们可以看一下他这个模特版,我是八零,那目录是在这个 atm 下, 我们可以启动这个硬气的服务,直接通过这个命令启动就可以了。启动完了之后,那么我们可以可以看下这个地方是咱们正在文件所放的目录,就是这个文件夹,那么我们可以进到这个文件当中,可以看一下就是这个文件夹一下,那么咱们把咱们产后放到这个文件夹下就可以了,那么我们可以直接可以访问这个访问,我们可以直接就 这个是咱们的项目可以访问。一般的话有的公司他可能是前端和后端他的运营不一样,会出现跨越的情况,咱们也可以用这个那个服务在那里面去配置这个 location。 那么你访问这个时候,比如说我访问他的时候,那么他会自动的给我 代理到这个地址,我们可以在浏览区访问一下这个地址,访问他的返回结果,那么我们可以直接输入这个这个地址,那就是在这个地方的啊,前面前面这个东西啊可以访问他,怎么这样的话咱们就可以解决宽裕的问题。 通过这个 antics 这个 local 的反向代理的,就是我访问刚 api 的时候,那么它自动的回国访问到这个 abc 的 ccctv。 嗯,还有一些场景呢,我们这个前端的资源会,比如在 cctv 服务城,如果 cctv 服务他会就近的接接点访问,再往后他有一个也是有一个负债均衡,那么负债均衡基本上也是用 app 是去做的处理, 要是通过这个安尼克斯的反应代理去定位到不同的服务器,比如说我是北京的服务器还是上海的,还是广州的服务器,那么他的附在地方的算法大家有没有知道的,知道的可以评论区留言。
粉丝5.1万获赞45.1万

哈喽,大家好啊,今天给大家分享一个主题,就是大公司里面怎样开发和部署前端代码。 这篇文章它其实最早发布于二零一四年,虽然时间早,但是有一些东西还是可以借鉴的。我们呢写最简单的 html 和 css 写成了这样,然后要部署到服务器,完成了一个站点的部署。后面呢,他提出了一个问题啊, 对于大公司呢,有一些比较变态的访问量和性能指标,那么这个时候呢,他可能就会希望啊, a 点 css 啊,它是走缓存的,但是现在这个速呢,它是走的是三零四缓存,三零四缓存你看利用三零四缓存让浏览器使用本地缓存,但这样不够,三零四是协商缓存,我们必须要让他这个请求直接不走,就会 变成下面这样。你看,我们经常有时候在看 cs 资源样式的时候,也会看到这个 size, 他写的是 from k 曲,就直接从缓存里面取,相当于这个请求都不走了。 然后这种形式呢,是叫本地缓存,强制使用本地缓存。现在他也提出了一个新的问题啊,你都不让浏览器发资源请求了,这缓存咋更新? 下面也提出了通过更新页面上引用的资源路径,让浏览器主动放弃缓存,加载新资源。 应该也有些同学会遇到过这种问题,就比如说你更新了一个资源文件或者是图片的时候,这时候缓存没过,你可能就会在后面加上一个时间戳或者是版本号之类的。那下面也有一个新的问题了,比如说在项目当中可能又会有三个 css, 你在打包的时候可能是一起打包,然后就会导致你,你只改了一个文件,比如说你只改了 a 点 css, 其他两个没改,但是其他两个呢,也会被同时加上这个版本号,但其他两个我们是不希望刷缓存的,因为他没变, 但是你既然加上版本号,他就会更新,有点浪费,对不对?这个时候啊,他们会采取一种方式叫数据摘药算法,通过这个算法呢,对文件进行查看,他看一下 你这个文件啊,他到底有没有更新,如果更新了,那后面的这个版本号啊,他就会变。举个例子啊,看 在这里呢,他下面两个这个版本号没有变,对不对?他只只有第一个版本号变了,内容没更新,版本没变,然后在页面上访问的时候,他还是走的老的版, 他不会被刷新缓存。但是现在还是有一个问题啊,这里的文件名还是叫 a 点 css, 对不对?他只是后面的这个版本号变了,究其根源,他还是这个文件,这个文件没有变, 他下面就引出了一个新的问题,就是因为在互联网企业里面,他会把静态资源跟网页分开来部署 我,所以我们会经常在网页上看到他的域名呢,可能叫三 w 点 com, 然后,但是你自愿文件呢,他叫 static, 对吧?就相当于 gs 啊,图片或者是 css 这些都会放到这右边的 static 这个站点上面来。 那这个时候呢,就会有一个问题是,比如说你更新了,我是先不数这个资源文件呢?还是先不数网页呢?如果先 先部署页面,再部署资源,在两者部署的时间间隔内,如果有用户访问,就会有新的页面结构加载旧的资源,那因为旧的资源被缓存起来了吗?所以结果就是用户访问到了一个错乱的页面, 除非手动刷新,否则还是执行错误。那如果采用第二种方案,先部署资源,再部署页面呢?之前页面的请求是旧的 资源引用没有改变,浏览器还是直接走了本地的缓存,但是如果没有本地缓存或者是缓存过期的用户访问网站, 就会出现旧版本页面加载新版本资源的情况,页面执行错误,只不过等到他页面部署完成之后,又会恢复访问啊,在这里先部署谁都 都不成大一点的公司,他们的那个数据以及用户量会分很大吗?哪怕在夜里发还是会有问题,因为你夜里只是人少,他还是会有人,对吧? 那我刚才也说了,究其根源还是你这个 a 点 css 啊,他还是同一个文件名,他还是同一个文件,只不过后面版本号变了,我们能不能直接改掉这个文件名呢?他下面也给出了解决方案, 他会给你这个名字啊,后面加上刚才的那个版本号,也就是类似于还是这样的方式,他相当于你把这个文件名给改了,文件名改了,你就没有问题了,对不对? 这个时候我们要发版,我们可以先部署这个资源文件,比如说他现在变成了 c 二三,我们先部署 c 二三,不会有一 影响,对不对?因为你页面上引用的是一二三点 c s s 等资源文件部署好之后呢,我再部署网页,这样是不是就没有问题了? 那所以大家现在看到这个 csf 文件有点像什么?是不是就有点像 view 里面现在打包生成出来的那个文件?所以像 viewer, react 这种框架,他已经帮你把这些内容啊都给你考虑到了, 这就是一个比较基本和浅显的前端工程化的历史,还比较有意思。大家如果以后啊 在比如说框架里面看到有你不懂的点,你可以去深究一下,看一下他的历史是什么,他为什么会有这个东西?就跟这个一样,下期再见。


有没有过项目太多,或者项目的环境太多,然后每次打包项目就好烦好浪费时间,今天就给大家推荐一个自动打包部署的工具吧。首先打开你的编辑器,在全局安装 deploy click service, 安装成功后输入 deep likely seriously, 可查看版本号,然后输入 deep likely serious neat 出使化配置文件,最后根据提示配置好文件就可以了, 此时的配置文件已经生成好了。接下来输入 deploy clay service, deploy mode dev 就可以直接部署了。注意 mode 后面加的是你要部署的环境对象, 现在就已经部署好了。然后我们打开服务器,刷新看下有没有生成的文件家, 再打开浏览器输入地址,看下项目能不能成功。打开项目打开了说明我们的项目已经部署成功了, 以后的部署只要发一次命令型就好了。如果觉得对你有帮助的话,不妨点个赞呗,让犀牛哥有更大的动力分享干货!


各位学前端的小老板们,那这个视频呢,给大家分享的是有关于微信小程序的项目上线流程。 那首先呢,不管是通过原声的微小程序,还是通过 unif 去开发的这个微小程序,那么它的上线呢,几乎都是在它的开发者工具中,这儿有一个上传, 那么点击这个上传呢,它是有些先天的条件的,或者前置性一些条件,那目前呢,你看我这地方是点不了的,那所以说呢,在前置性呢,我们需要具备某些权限,比如第一 ipad, 第二开发者权限的这个身份, 这样情况下呢,你才可以做到这儿的一个上传,那么这 ipad id 呢,我们一般进公司以后呢,是由公司的负责人会给到我们,那我们可以在这看一下这个小程序的一个 ipad id, 好,我把它呢放到我们的这个地方,然后这儿呢有一个详情,有一个 ipad 修改 好,确定这时候修改完事以后呢,大家会发现这个上传其实就可以了啊,那其实呢还有第二步就是开发者身份,这开发者身份呢,就是我这登录的这个号,登录这个微信号,登录这个开发者工具,微信号 必须要在我这个后台里边,这有一个成员管理,然后在这呢是有我一个对应的这个号的啊,并且呢他是有对应的这个权限的,那这时候呢他才能去上传。 好,那么现在呢,我去点击这的上传,那么点击这上传呢,还有一个先天条件,就是我们做项目呢,我这是有个 demo, 那大家在做项目的过程中呢,肯定是 是项目比较大的,或者说他的页面比较多,那么会前置性呢,做一个分包,因为微信小程序呢,他是对于某一个包有上限的一个大小的,我们要把前置性的分包做好。那这个视频呢,我就先不演示一个分包了, 然后紧接着呢,我们下一步只需要在开发者工具点击这个上传就可以了。点击上传 好,然后这样呢,我们点击确定好,然后这样呢是我们的一个版本号啊,那我们在这呢就对应的版本号,然后这样呢可以输入一些备注,点击上传, 那这个时候呢,稍微等待一下啊,提示我上山成功,然后在我们这个后台里边,我们可以去看一下,这里有一个版本管理,那么在版本管理的这个地方就会有一个这样的一个版本啊,是我刚 提交的,我们可以看一下幺点零点幺三,是在现在我提交的, 那这是一个开发版,然后呢我点击这个提交审核,那就会让管理员呢去扫一个码,就会进入到审核版,等客服呢审核通过了,就正式的到线上的发布版了,也是我们搜到的那个版本啊,用户访问那个版本, 那么在面试的观众呢啊,有一些面试官可能会问你,比如说,哎,你审核的时候呢,不通过,有哪些原因啊?我觉得问这个问题呢,其实 没必要啊,这这个问题不能体现出来你的技术,只能说有些场景化东西,那大家可以去试想一下,有哪些原因导致你上来不成功呢?其实有很多这样呢,咱就不能啊,整体的把它全部罗列 在内,比如说我这小程序啊,是某一个行业的,然后呢,你在这个小程序里边加的功能可能已经脱离了现在这个行业,那这样情况下呢,可能就审核不通过,或者说呢里边有些不好东西存在,那这样情况下呢,也审核不通过 啊。所以就是如果你做的没有问题,那肯定就是 ok 的,如果做有问题,里边有些其他东西,那可能就会受阻。 这个呢有很多原因,对吧?比如分类的原因,对吧?里边有些不好的东西的原因啊,或者说有一些死的链接等等,这样的一些内容都会可能导致啊审核不通过。那具体原因我们具体要看 啊,大概就这意思啊,这是我们的一个小程序的这个项目上线的流程啊,就给大家说到这里。