前端精选#6 前端部署搭建

222 阅读3分钟

欢迎来到《前端精选》,这里记录有趣的见闻,每周一发布。

封面

IMG_1915.jpg

三亚蜈支洲岛

话题

前端部署搭建

公司一般会有现成的构建、部署系统,前端很少需要关注上线部署细节,但是相关能力却不能缺失,本周在混合云上做私有部署,体验了一把从零搭建部署环境的实践。

主要分这么几块:新建集群、构建镜像、推送镜像、部署镜像、设置网络,首先用 PAAS 的创建功能新建无状态集群,对于前端用最低规格的2到3个容器即可;然后写 dockerfile,前端用 nginx 或者 node server都行;构建好镜像后,推送到部署环境进行部署;最后设置容器和宿主的端口映射,让外部访问到。

对应的技能,主要有 docker、nginx(或 node server)、网络以及 shell 的常规操作的理解,这也前端面试中喜欢穿插考查除 js 外的泛计算机知识的原因。你有哪些前端部署的实践,欢迎留言讨论。

见闻

  1. 动手学深度学习

一个号称“被全球70多个国家500多所大学用于教学”的深度学习在线教程,包含丰富的主题和示例,是一个快速了解和学习深度学习的优秀的资料。

  1. IT Tool Pro - 免费在线开发者工具集

一个优秀的在线开发者工具,包含加解密、转换、web、图片视频等常用操作,种类齐全便于使用,另外纯净无广告也是该工具的特色之一。

  1. tldraw - 一个优秀的白板工具

随着在线协作的普及,白板工具越来越成为基础应用之一,tldraw 是一个开源的白板工具,支持手写、图像等众多操作,并且 UI 非常美观,适用于直接使用或二次开发。

  1. svg.js - 用于操作 SVG 及其动画的轻量级库

这是一个操作 svg 的 js 库,api 设计及功能上都类似于 jQuery 相对于 DOM

  1. TKScript - TamperMonkey 油猴脚本

TamperMonkey 是一个强大的浏览器插件,用于方便地在特定网页上执行自定义脚本,本仓库是该插件的一个脚本集,用于解除某些网站禁止复制限制、链接直达等。

  1. TinyPNG – 在线图片压缩工具

这是一个在线的图片压缩工具,支持 webp、png、jpeg 等多种图片格式。

  1. CSS Loaders - 超过500种加载样式的 CSS

这是一个收集了很多加载样式的 css 合集,包含69个类别总计超过500种样式,其中不乏一些有趣的价值效果,纯 CSS 实现。

Screen Recording 2023-09-17 at 21.08.54.gif

  1. React Portal 指南

React Portal 提供了一种逻辑层级不变、但 DOM 层级任意的机制,广泛用于 Modal、Dropdown 等组件,本文系统地介绍了它的适用场景和具体用法。

  1. 如何调试 React 源码

本文介绍了如何通过单元测试调试 React 源码的方法,喜欢阅读源码的同学可以一试。值得注意的是这种调试是在 mock 环境里运行的,并不能完全反映浏览器中执行细节,因此,还有一种方法是直接引打包好的未压缩 js,从而更好的追踪执行过程。

  1. 开源富文本编辑器 wangEditor 暂停维护

国产知名富文本编辑器 wangEditor 作者宣布暂停维护,本文介绍了作者的心路历程和遇到的困难,读后感受:可持续开源之路仍然道阻且艰。