- 综合排序
- 最热优先
- 最新优先
- 来自专栏PY的开发实践
前端应用部署工具
基本流程部署工具基本包含以下三大块：触发器、CI、CD触发器触发器指的是触发部署动作，分为两大类：cli: 腾讯云 TCD, vercel-cli 这类工具实现本地命令行登陆账号，通过本地命令行出发构建部署 CD产物部署阶段需要进入生产环境中，分为以下三类：静态资源：静态资源，无法部署 node 服务,通常用户静态资源的CDN加速场景，适用于博客类，无法部署API。 serverless：云函数类，部署的是函数服务，使用场景受限，适合轻量的 API 服务容器：微信云托管，托管容器，最为灵活，可以部署任何你想部署的东西，和企业级的部署方式类似。 静态网站部署vercelvercel 是一个前端明星团队。 总结当前处于云原生时代，对前端开发人员也越来越友好，各种部署工具层出不穷，我们只需要专注于自己的核心能力即可，能够被标准化的产业肯定会被标准化的，云函数也好，云托管也好，本质上就是让开发者能够更快更简单的去上线自己的创意
7K41编辑于 2022-07-12 - 来自专栏夏天的前端笔记
每天10个前端小知识 【Day 10】
前端面试基础知识题 1. es5 中的类和es6中的class有什么区别？ 在es5中主要是通过构造函数方式和原型方式来定义一个类，在es6中我们可以通过class来定义类。 什么是“前端路由”？什么时候适合使用“前端路由”？“前端路由”有哪些优点和缺点？ 前端路由就是把不同路由对应不同的内容或页面的任务交给前端来做，之前是通过服务端根据 url 的不同返回不同的页面实现的。 在单页面应用，大部分页面结构不变，只改变部分内容的使用 优点：用户体验好，不需要每次都从服务器全部获取，快速展现给用户 缺点：单页面无法记住之前滚动的位置，无法在前进，后退的时候记住滚动的位置 实现方式 前端路由一共有两种实现方式 10. Promise.all 和 Promise.allSettled 有什么区别？
47410编辑于 2024-01-18 - 来自专栏前端劝退师
前端部署演化史
得益于工程化的发展与开源社区的良好生态，前端应用的可用性与效率得到了很大提高。 前端以前是刀耕火种，那前端应用部署在以前也是刀耕火种。那前端应用部署的发展得益于什么，随前端工程化带来的副产品？ 为了更清晰地理解前端部署的发展史，了解部署时运维和前端（或者更广泛地说，业务开发人员）的职责划分，当每次前端部署发生改变时，可以思考两个问题 缓存，前端应用中http 的 response header 但是前端部署，仍是刀耕火种 刀耕火种 一台跳板机 一台生产环境服务器 一份部署脚本 前端调着他的 webpack，开心地给运维发了部署邮件并附了一份部署脚本，想着第一次不用套后端的模板，第一次前端可以独立部署 node 版本，前端嚷嚷着测试环境没问题 这个时候运维需要费很多心力放在部署上，甚至测试环境的部署上，前端也要操心放在运维如何部署上。 其中主要的优化也是在上述所提到的两个方面 构建镜像体积由 1G+ 变为 10M+ 构建镜像时间由 5min+ 变为 1min (视项目复杂程度，大部分时间在构建时间与上传静态资源时间) FROM node
1.6K10发布于 2019-11-28 - 来自专栏雪胖纸的玩蛇日常
部署（6.前端项目）
1.安装node、npm、cnpm apt install nodejs y apt install npm y node -v npm -v npm install cnpm -g --regist
60130发布于 2020-02-14 - 来自专栏采云轩
前端本地化部署
前端本地化部署 http://zoo.zhengcaiyun.cn/blog/article/localized-deployment 前言 现在成熟的前端团队里面都有自己的内部构建平台，我司云长便是我们 ，最后调用 K8S 的镜像部署服务，进行镜像按环境的部署，这就是我们云长做的事情。 如果想从零开始搭建一个自己团队的部署平台可以看下我们往期文章 如何搭建适合自己团队的构建部署平台，本期我们只是针对云长中静态资源本地化的功能做细致阐述。 场景分析 为了网络安全，客户会要求我们的应用是要完全部署在内网的，那我们需要做什么呢？第一我们需要考虑前端代码中是不是有些直接访问外网资源？第二是不是后端返回了静态资源地址在某种情况下就访问了？ 前端直接访问的 CDN 的资源太普遍了，如下既有 at.alicdn.com，又有我们自己内部的静态资源 luban.zcycdn.com， sitecdn.zcycdn.com 等。
1.4K20编辑于 2023-02-27 - 来自专栏服务器运维笔记
【前端部署第一篇】：从写一个最简前端部署服务器，初识前端部署
大家好，我是山月，这是我最近新开的专栏：「前端部署系列」。 : 如何手写一个简单的静态资源服务器用以部署前端 为何需要 nginx、docker 等工具辅助前端部署 1. 假设你有三个 Node 服务，分别用 node10、node12、node14 编写，你需要在服务器分别安装三个版本 nodejs 才能运行各个版本 nodejs 编写的代码，对于开发者而言也非常麻烦。 小结 本篇文章介绍了了一些对于前端部署的简单介绍，并使用 nodejs 写了两段代码用以提供静态服务，加深对前端部署的理解。 在本文章，将应用在本地或者宿主机进行成功运行，但是现代流行的前端部署方案，都是使用 docker 对前端进行部署。
2.7K31编辑于 2022-05-23 - 来自专栏MyTechnology
vercel自动部署前端项目
vercel 是一个可以完成自动化部署前端项目的网站，你只需要把你的项目上传即可。支持与GitHub项目连接。 注册时GitHub邮箱不能为qq邮箱，因此我申请了个GitHub小号。 创建项目，勾选GitHub输入Git地址直接同步项目完成自动部署。 ? 由于push代码又要重新配置key，我直接使用GitHub桌面版来上传我的前端静态代码。 ? vercel 帮我自动完成部署和实时更新，当你push代码会自动重新编译，你还可以免费绑定自定义域名以及ssl证书。 ? 国内访问速度还是很快的，感觉非常满意。 同时他支持较多前端项目的部署，例如hexo，vue，nuxt，next ? ?
3.1K20发布于 2021-01-18 - 来自专栏达达前端
前端技术前沿10
允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
1.9K30发布于 2019-07-03 - 来自专栏服务器运维笔记
【前端部署十五篇】初学 kubernetes，并使用 k8s 部署前端应用
大家好，我是山月，这是我最近新开的专栏：「前端部署系列」。包括 Docker、CICD 等内容，大纲图示如下 大纲 示例代码开源，置于 Github 中，演示如何对真实项目进行部署上线。 「前端部署」系列正在更新: 15/15 ---- 这篇关于 k8s 的文章是前端部署系列的最后一篇文章了，后续将会把该系列文章以视频的方式在哔哩哔哩发布，欢迎关注及预约。 ---- 在前边章节中，我们了解了「如何部署容器化的前端应用」，并可通过 CICD 进行自动化部署。 Deployment Deployment 可视为 k8s 中的部署单元，如一个前端/后端项目对应一个 Deployment。 Deployment 可以更好地实现弹性扩容，负载均衡、回滚等功能。 其中 cra-deployment 是 Deployment 名，而该前端应用每次上线升级会部署一个 Replica Sets，如本次为 cra-deployment-555dc66769。
5K10编辑于 2022-05-23 - 来自专栏薛定喵君
前端项目nodejs自动部署脚本
一个脚本辅助部署前端项目 公司有些项目环境没有接入 jenkins 所以部署起来比较麻烦，所以写个脚本节约部署时间。 # 背景 前端项目分开发、测试、生产环境，开发及测试已接入 jenkins 自动部署，生产环境依然还是手动。 每次都需要进行本地打包, 手动压缩上传到服务器目录，ssh 登录服务器后备份旧文件, 手动删除文件再将包解压到指定目录，操作流程比较繁琐，需要提前了解服务器部署目录，不太友好，所以就写了个脚本简化部署操作 # 依赖安装 部署包含压缩文件、ssh 登录、文件上传等几个步骤，所以需要安装如下依赖： archiver，压缩文件使用。 node-ssh，ssh 操作。 silly-datetime，时间处理。 # 使用方法 在根目录新建一个 config.js 用于存放服务器 IP、用户名、密码、部署目录等信息，然后就可以在 package.json 中追加命令去调用上面的 node 脚本。
2.9K30发布于 2021-09-26 - 来自专栏webTower
使用 centOS 7 部署前端项目
VNC 项目部署 部署之前需要先下载需要的软件，首先更新软件包： yum -y upgrade 下载一些软件： yum install git nginx openssl curl wget 下载 Nginx 我们的服务器上可能部署了好几个 web 服务器，它们有各自的端口，但是浏览器上访问时默认是 80 端口，这时可以将 Nginx 持有 80 端口，当客户端访问服务器时，先由 Nginx 识别请求 程序虽然部署到服务器上了，但是如果未来程序更新，再次上线时就需要来到服务器，下拉新的仓库代码，重新运行程序，而且单单使用 node 运行程序，在出现异常时，程序很可能会挂掉。 // 打包前端项目，最后使用 PM2 部署后端服务 'post-deploy' : 'npm install --registry=https://registry.npm.taobao.org 这条命令是在首次部署项目时运行的，之后的每次（包括这次）只需要运行下面的命令即可完成部署。
4.3K30发布于 2020-09-16 - 来自专栏前端那些趣事
前端运维部署那些事
但随着前端工程化的发展，前端基本运维部署相关知识甚至也逐步被重视，如果你公司的运维部门很强大，那么你也可以完全忽略运维相关的。 当然，现在云厂商都想应推出自己的Serverless服务(下一篇会讲～)，号称让前端更专注业务的开发，而不用担心底层应用的部署和维护，对开发者而言可以更多聚焦到业务领域的开发，有兴趣的童鞋可以去玩玩 ? 详细流程图可参考 Jenkins+github 前端自动化部署 2.2 配合前端项目自动化部署 这里主要介绍jenkins流水线配置的使用，流水线的代码定义了整个的构建过程, 他通常包括构建, 测试和交付应用程序的阶段 docker容器来运行前端应用 如何安装 yum install docker-ce 项目目录，部署项目需要准备Dockerfile和nginx.conf(如果nginx不作定制化，可以直接用官方镜像 4.1 常见的应用场景 部署node koa2 或 express 项目应用 部署 前端SSR（后端渲染）应用，如nuxt.js（Vue）和 next.js(React)等构建服务端渲染应用框架
1.3K30发布于 2020-07-03 - 来自专栏用户4624600的专栏
使用Docker部署Vue前端项目
前言 在以前负责测试环境的维护过程中，部署前端项目非常麻烦，需要通过配置nginx.conf、然后在重启nginx配置等一顿操作，维护环境人员需要人工去服务器上打包、部署，甚至经常会操作出去。 另外随着前端项目越来越多，每天需要频繁改配置文件，不断的重启nginx文件，导致影响测试进度。 本文主要介绍通过Docker容器来部署Vue前端项目。 ngxin配置 自定义vue前端项目的nginx配置放在nginx.conf 文件中，替换nginx的默认conf文件。 docker run -d -p 8080:8080 vue-test 对外映射开启8080访问端口 使用浏览器打开，http://127.0.0.1:8080 结语 本文介绍了使用Docker部署 Vue前端项目，使用docker的方式部署前端项目步骤很简单并且配置方便，在实际项目中可以使用docker的特性快速创建多个前端项目的测试环境，要比传统改nginx配置的方式优雅和方便了不少，推荐大家日常工作中使用
2.6K50编辑于 2022-12-03 - 来自专栏前端练习
使用CentOS，Nginx部署前端项目
生产环境测试 $ npm run build # 打包，生成在生产环境中使用的 dist 目录 进入 dist 目录，可结合 pm2 加 http-server 来发布部署。 ssl_certificate_key "/etc/pki/nginx/private/server.key"; # ssl_session_cache shared:SSL:1m; # ssl_session_timeout 10m 以上流程可以将服务部署到8080端口，但是如果想要部署到80端口，直接使用域名访问，需要在自建的.conf文件中监听80端口。 但是如果直接填写80端口，会遇到两种情况： 部署无报错，但是直接访问ip依然显示的是nginx默认页面 nginx报错nginx: [error] open() “/run/nginx.pid” failed 以上两个步骤完成之后，如尝试ip直接访问无问题，DNS解析域名到对于IP，就可以直接使用域名来访问前端页面了。 VUEdemo地址：http://hd.bycat.cn
2K10发布于 2021-07-15 前端部署相关知识导览
基础部署前端网页能被访问的前提，一个是网址对应的资源，一个是网络发现。所以通常来讲，把 .html 等资源放到服务器上，然后使用 nginx 等工具做网络代理，即可将网址指向前端内容。 分布式部署如果你的网站访问量够大，需要分流到多台服务器，那么你可能需要分布式部署了。扯到分布式就要先了解 docker 和 k8s，就要了解下容器化技术。 版本当出现线上问题又难以短期内解决时，你可能需要回滚版本，而回退代码再重新部署还是繁琐了点，所以部署也需要版本管理。 Node 服务的部署比如你还搞了前端网关或 BFF 服务，你可以使用以上相同的逻辑去部署，只是除了资源和网络发现外，又多了一个接口或路由的概念，但实质也可认为是资源，只是路由或接口是业务决定的，比如 koa Node 服务的进程管理另外，当部署 node 服务时，你可以用 pm2、forever 等来做进程管理，提高单个服务器中对批量网络发现的并发能力，压榨一点服务器性能。邀请人：一起重学前端
41320编辑于 2024-11-20- 来自专栏服务器运维笔记
【前端部署附录二】写给前端的 nginx 配置指南
大家好，我是山月，这是我最近新开的专栏：「前端部署系列」。包括 Docker、CICD 等内容，大纲图示如下： 大纲 示例代码开源，置于 Github 中，演示如何对真实项目进行部署上线。 「前端部署」系列正在更新: 17/18 ---- 三年经验的前端或多或少与 nginx 配置打过交道。 nginx 的重要性不言而喻。 本篇文章以前端的视角，介绍下 nginx 的常见配置。 1. 见文档 https://nginx.org/en/docs/http/ngx_http_index_module.html#index root 与 index 为前端部署的基础，在默认情况下 root 为 /usr/share/nginx/html，因此我们部署前端时，往往将构建后的静态资源目录挂载到该地址。 curl --head http://localhost:8210/shanyue HTTP/1.1 200 OK Server: nginx/1.21.4 Date: Fri, 03 Jun 2022 10
1.5K50编辑于 2022-11-02 - 来自专栏服务器运维笔记
【前端部署附录一】写给前端的 nginx 配置指南
大家好，我是山月，这是我最近新开的专栏：「前端部署系列」。包括 Docker、CICD 等内容，大纲图示如下： 大纲 示例代码开源，置于 Github 中，演示如何对真实项目进行部署上线。 「前端部署」系列正在更新: 17/18 ---- 三年经验的前端或多或少与 nginx 配置打过交道。 nginx 的重要性不言而喻。 本篇文章以前端的视角，介绍下 nginx 的常见配置。 1. 见文档 https://nginx.org/en/docs/http/ngx_http_index_module.html#index root 与 index 为前端部署的基础，在默认情况下 root 为 /usr/share/nginx/html，因此我们部署前端时，往往将构建后的静态资源目录挂载到该地址。 curl --head http://localhost:8210/shanyue HTTP/1.1 200 OK Server: nginx/1.21.4 Date: Fri, 03 Jun 2022 10
2.8K41编辑于 2022-11-02 - 来自专栏一Li小麦
node服务及前端应用部署
现在终于开始部署了。 ? 开发一个服务和全面部署还是有很大差距的。主要体现在三个方面。 故障恢复：崩了怎么办？ 多核利用：node单进程如何使用？ 多进程如何共享端口？ 上线部署在大公司里其实是专人操作的，一个产品从构思到发布，许许多多的坑要踩。 对于前端（伪全栈）来说，想要流畅的上手部署。命令行知识还是基础。其次是及时收藏不会的知识点。 先写一个会报错的程序，它有十分之一的几率执行一个不存在的方法 aaa，也就是有10%的几率报错： // app.js const Koa=require('Koa') const app =new Koa ，想要分离部署。 前端需要调用后端接口。
2.4K40发布于 2019-08-09 - 来自专栏grain先森
前端-10款web动画插件
今天给大家带来了十款web前端动画插件，大家收藏了记得给个小心心哦 1.基于jQuery的瀑布流图片筛选插件 瀑布流的展现方式在目前的网页中用得越来越广泛，特别是图片和首页文章的动态加载。 这次我们分享的这款插件是基于Layui的，layui 是一款采用自身模块规范编写的前端UI框架，这款表格插件可以允许你非常方便的添加、删除表格行数据，并且通过服务器接口进行保存。 你只需要定制前端的数据列和后端的保存逻辑即可，数据交互均采用JSON格式。 ? 10.CSS3深色背景的垂直手风琴菜单 手风琴菜单我们已经分享过很多了，特别是垂直手风琴菜单更为常见，比如这款jQuery手风琴样式的多级下拉菜单和这款CSS3带小图标的手风琴下拉菜单都非常不错。
7.4K50发布于 2019-03-29 - 来自专栏前端干货和生活感悟
前端小知识10点(2020.3.20)
请看： 前端小知识10点(2020.2.10) 3、React中suppressContentEditableWarning属性是什么意思？ react-codemirror 5、yarn安装antd-pro依赖包时卡在puppeteer的解决办法 请看： https://www.jianshu.com/p/2ce56dccc5a7 puppeteer是前端自动化测试用的 JSON.parse()转换即可 const a="['a','b','c']" console.log(JSON.parse(a.replace(/'/g,'"'))) //["a", "b", "c"] 10
1.4K00发布于 2020-04-01
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号