2021了，独立开发一个网站都需要那些技术？

时间：2023-05-25 23:57:01 | 来源：网站运营

时间：2023-05-25 23:57:01 来源：网站运营

2021了，独立开发一个网站都需要那些技术？：

需求背景

本文所描述的网站是给自己公司做的一个宣传网站，用于宣传公司产品与服务，属于门户网站，功能相对简单，但涉及到的技术栈着实不少，这也是自己固定下来的一个开发流程，以前都是以个人身份接一些技术外包，此次上线的网站也是在服务流程的正规化上向前迈了一步，以公司的方式运营，可信赖度更高，毕竟有工商税务监管，比个人信用背书靠谱多了。

网站策划

策划是制作一个网站的核心，这个阶段需要明确网站的主题领域，并进一步研究这个主题领域之内的受众想法，以用户驱动来设计内容模型， 保证做出的网站符合用户需求，需要注意的是内容与其结构的制作需要同表现形式分开，新式界面层出不穷，界面与内容过度耦合会造成页面反复设计，给企业带来维护上的困难。

网站内容会被切割成小的单位，但又彼此联系，根据不同需求来组合与复用，内容的复用与代码的复用异曲同工，对于网站中反复出现的内容，将其切割成一个最小单位，通过CMS系统统一管理，然后根据内容结构设计出网站导航，层级逻辑以及交互逻辑。

界面设计

用户界面的目标是要把人和业务联系起来，设计界面就是把内容与形式放在一起，将内容以合适的方式展现出来，所以我们把界面设计的漂亮、舒服、有特色的同时，需要避免过度设计，要以设计服务于内容为宗旨。

logo: 位图放大会有锯齿，变虚，一般都会采用矢量图型，logo设计重点是要符合行业定位，并与公司的名称紧密相连，比如我自己的网站logo，图标部分从公司的名字衍生过来，文字部分采用可以免费商用的字体《优设标题黑》，不可商用字体有侵权风险，需要注意。

banner图：首页banner图是网站最直观展示，扁平风格插画，清爽整洁，有很好的视觉与情感传达效果，在这里推荐一个可以免费商用的插画网站StorySet。

配色：Ant Design 可视化色板，主色，辅助色，背景色，背景色可一键生成

图标：Ant Design 在 3.9.0 之后，使用 svg 图标替换了原先的 font 图标, svg 格式在低端设备上有更好显示， 并支持多色图标，所以网站所有图标统一采用svg格式，获取来源为 iconfont

前端

前端框架：react + react-router-dom + axios + redux，react 路由集成方式和 vue 真是差别很大，对于习惯 vue 的开发者，刚开始使用起来真是丈二和尚摸不着头脑，在哪实例化、在哪挂载，在哪全局监听，完全搞不清楚，一度心态被搞崩。

脚手架: creat-react-app, 帮我们集成好了webpack, 可通过eject方式弹出配置文件，做自定义修改

UI框架：Ant Design，目前用过最好的前端UI框架了，生态完善，社区活越，整合了上下游资源，蚂蚁金服前端团队确实很优秀

单元测试框架：jest, js-dom，前端单元测试重点是搞清楚要测什么，测试用例本质上渲染出一个虚拟组件，通过输入正确值与错误值来 mock 代码的执行逻辑，提升程序的健壮性；前端通用组件写测试用例是非常有必要的，但业务代码值得商榷，写测试用例很多时候花费的时间比写代码还长，但通过浏览器直接来跑，有问题一目了然，这个需要平衡效率。

动态设计库：Ant Motion，通过组合动画来实现网站的整体动画效果

其他使用到的社区库：enquire-js 响应式媒体查询插件；react-markdown/react-syntax-highlighter/github-markdown-css 用于markdown格式文档渲染，代码高亮；react-html5video 视频播放；react-amap: 地图渲染

服务端

1. CMS内容管理系统

使用了腾讯云提供的开源CMS内容管理系统，可以通过托管域名访问，整个系统的前端界面也是基于react开发，代码托管在腾讯云部署。

最要的是集成了操作云函数与云数据库的 JS SDK，可以直接操作数据库，云函数属于 Serverless 基础服务，无服务器执行环境对前端友好，免去了服务端开发，这种方式优点是节省时间，降低开发成本，但不适用于类似电子商务类的复杂系统，

2. 对象存储

网站图片、视频，使用腾讯云 COS 对象存储，COS 提供防盗链功能，可屏蔽恶意来源的访问，配合CDN可以做到图片加载的毫秒级响应，这个对网站很重要，首屏加载速度直接影响用户体验

3. 内容分发网络 CDN

购买了100GB国内加速流量包，对于新网站比较实用，新网站开始访问量小，根据访问量可以随时更改套餐

4. 数据存储

采用了文档型云数据库mongodb，通过nodejs完成增删改查，其实很难用，但好在知根知底，操作起来不会翻车，以免不可收拾。

运维

1. 持续集成

流程上是通过 webhooks 监听 git 推送，远端 git 仓库上配置一个Jenkins服务器的接口，当有代码提交时，远程仓库发起一个带参数的请求到Jenkins服务器，jenkins 接到请求后，开始处理代码检出、安装依赖，编辑打包、集成测试等一系列操作。

webhooks 对持续集成非常重要，可以根据不同的触发参数触发不同的构建操作，比如 feature-xxx命名的分支执行本地开发造作，release-xxx 命名的分支来执行灰度发布操作，搞定这一套，就距离架构师不远了，我自己的项目目前用了coding 平台提供的持续集成服务，只需要写配置文件就好。

2. 持续部署

采用docker容器来做服务端部署，打包后的前端项目先做成docker镜像，根据不同版本存储于制品库中（也就是docker hub），同样通过 Jenkins 实现自动构建，执行一系列shell脚本，推送镜像到腾讯云（Linux），并启动容器。

docker镜像有完整的日志与版本记录，日后线上如果发生问题，可以做到秒级版本回滚，docker的可移植性超强，避免了之前开发环境、测试环境、线上环境因为配置出现的各种问题，最重要的客户如果需要变更或是拓展服务器，可以快速移植，docker容器极大的简化了服务器环境配置的难度，如果没有docker光是服务端环境配置就够喝一壶了。

3. 静态资源服务器

使用 Nginx 作为 http/https 服务器，Nginx 通过 Docker 拉取，Nginx 配置文件在 Dockerfile 中动态写入，域名监听，https 403端口跳转，location 静态资源路径配置，ssl证书路径配置都在这个文件中完成。

发布上线

1. 域名

选择一些大的服务商，一般通过腾讯云或是阿里云来购买，方便备案，首选 .com 后缀，名称与公司名称关联，越简短越好，方便记忆。

2. SSL证书配置

网站如果没有配置ssL证书，浏览器会提示客户”您与此网站建立的连接不安全“，非特殊情况下建议安装ssL证书，安装后可通过https访问，数据传输加密，相对比较安全，购买域名一般免费ssl证书，比如我自己用的就是免费的 ssl 证书，品牌为 TrustAsia，但是只能单域名解析，有多域名需求的还时得购买。

SSL 证书首先需要给域名添加一条 TXT 类型的 DNS 解析记录，并完成域名验证，之后手动安装证书密钥到服务器，不同的服务器系统（linux/windows）和安装方式（Apache/Nginx/Tomcat/Jetty）等云服务器厂商都会提供教程，docker部署需要做一个容器与宿主机的映射，这块有些不一样。

3. 云服务器

云服务厂商的虚拟主机，1核 2GB内存 2Mbps公网带宽，对于一般的门户网站够用了，一年的费用大概一千多。

备案

备案分为工信部ICP域名备案与公安部安全备案，腾讯云的ICP备案可以使用备案小程序，在手机上完成备案，以前一直使用阿里云，腾讯云比阿里云流程简单些，阿里云需要下载打印《网站备案真实性核验单》以及邮寄幕布拍照。

公安部备案个人感觉要稍微复杂些，国家规定必须在网站开通后（也就是完成了ICP备案后）30日内进行公安备案，展示类的门户网站还好，如果是交互性网站，基本需要跑一趟网监大队，提交纸质资料。

推广

这里的推广单指搜索引擎优化(SEO)，虽然现在是移动互联网时代，新媒体兴起，流量入口更多元化了，但仍有大量用户依然习惯通过搜索在网上获取内容，尤其是以网络为生产力的用户，所以会从技术与内容角度来调整网站层级结构，html标签，页面标题等，用于提高收录率与自然排名。

写在最后

目前所有已经上线的项目，都是通过远程合作方式，合作伙伴主要是在工作中认识的一些实力较强的设计师，后端开发、运维工程师等，本文主要介绍定制开发一个网站都涉及到那些技术点，如果有对开展副业有兴趣的朋友，刚好也在网站策划、新媒体营销、设计、开发、运维等方面有经验，欢迎私信我，不搞虚的，咱们就聊聊挣钱。