15158846557 在线咨询 在线咨询
15158846557 在线咨询
所在位置: 首页 > 营销资讯 > 网站运营 > 2021了,独立开发一个网站都需要那些技术?

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标签,页面标题等,用于提高收录率与自然排名。

写在最后

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



关键词:技术,独立

74
73
25
news

版权所有© 亿企邦 1997-2025 保留一切法律许可权利。

为了最佳展示效果,本站不支持IE9及以下版本的浏览器,建议您使用谷歌Chrome浏览器。 点击下载Chrome浏览器
关闭