云服务器部署前端项目（前端都干什么的）

本文目录

• 前端都干什么的
• strapi 云服务器部署
• 如何构建并在云上部署基于JAVA的REST Service
• 前端工程师零基础个人网站搭建

前端都干什么的

Hello我是数据里奥斯，前端技术是一项发展非常快速的技术领域，随着技术的变革，前端工程所做的工作和重要性也在不断发生着变化，我简单从下面几个阶段和阶层来描述一下前端工程师的工作：

1.职责：切图仔，时期：前后端不分/后端MVC框架时期

在初级阶段，前端的主要工作，也是目前最基础的工作，就是将设计师提供的交互视觉稿进行切图，并通过HTML，CSS技术组装成我们所需要的页面模板，后段工程师则将页面模板嵌入数据，组装进整个项目中，这个阶段前端是没有办法独立完成项目的，也还没有真正意义上纯粹的前端工程师

2.职责：前端项目开发时期：前端MVC框架时期，SPA单页应用时期

这个阶段Ajax技术促成了Web2.0的诞生，通过API与后段接口进行交互，前端项目可以完成数据读写，页面切换，用户交互等一系列复杂的操作和功能，从某种程度来说，前端可以独立承载一个程序所需要的大部分事情。前端工程师的工作也从单纯的开发页面，变成了开发应用。我们常说的React,Vue,Angular都属于非常著名的前端应用开发框架

3.职责：通过NodeJS成为全栈工程师时期：多端应用时期（小程序，多智能终端）

随着移动互联网的兴起，我们的应用已经不仅仅停留在PC，而是蔓延到了智能手机，平板电脑，电纸书等多类型的电子媒介上，如何满足复杂功能的开发，多终端统一接口的调用和组装，都对前端工作者的工作提出了新的挑战。Node作为JS便携的唯一前后端都可以涉足的技术，让前端工程师的工作逐渐可以涉足更多服务端工具，引入了更多持续集成等软件工程的标准流程，通过类似中间层的构建，有一定业务规模的技术团队，逐步在像大中台，小前台的方向发展。

4.未来可期

如今，借助5G，云计算/服务的硬件发展，前端技术势必还会承载更多有趣和复杂的工作，小程序，跨端开发，云服务器部署，前端工程化，Serverless，WebAssembly等等，前端的工作随着时代的变迁依然在不断变革，同时也承载了更多的职责，希望前端工程师可以为大家带来更多优质和革命性的新应用～兴许如同赛博朋克时代的幻想一样，那些无处不在的人机交互界面和场景，都是前端工程师工作的努力方向。

strapi 云服务器部署

strapi 云服务器部署需要先注册成为21云盒子会员，以Fork strapi为例：在21云盒子上创建一个云服务，并允许21云盒子访问你的代码库（repo）；配置相关参数；点击进阶配置，进行环境变量配置，其他相关环境变量可以参考strapi官方文档；点击马上创建即可。strapi是一个基于nodejs的CMS（内容管理系统），服务基于koa2，可以通过可视化页面简单的操作数据库建表、修改数据、配置权限等，前端可以根据RESTful API 设计规范请求strapi默认配置的接口，获取到数据库的数据，甚至可以使用graphql等插件。

如何构建并在云上部署基于JAVA的REST Service

应用的架构
Dustin.Whittle给出了云应用的示例架构，它具有高度的可扩展性，如下图所示：
在这个图中，应用按照分层的理念进行了拆分，分别介绍如下：
客户端层：客户端层包含了针对目标平台的用户界面，可能会包括基于Web的、移动端的甚至是胖客户端的用户界面。一般来讲，这可能会是Web应用，包含诸如用户管理、会话管理、页面构建等功能，但是其他客户端所发起的交互都需要以RESTful服务的形式调用服务器。
服务：服务器包含了缓存服务以及聚合（aggregate）服务，其中缓存服务中持有记录系统（system of record）中最新的已知状态，而聚集服务会直接与记录系统交互，并且会执行一些破坏性的操作（会改变记录系统中的状态）。
记录系统：记录系统是领域特定的服务端，它会驱动业务功能，可能会包括客户管理系统、采购系统、预定系统等等，这些很可能是遗留系统，你的应用需要与其进行交互。聚集服务要负责将你的应用从这些特有的记录系统中抽象出来，并为你的应用提供一致的前端接口。
ESB：当记录系统发生数据变化的时候，它需要触发到指定主题（topic）的事件，这就是事件驱动架构（event-driven architecture，EDA）能够影响应用的地方了：当记录系统进行了一项其他系统可能感兴趣的变更时，它会触发一个事件，任何关注记录系统的其他系统会监听到这个事件，并作出对应的响应。这也是使用使用主题（topic）而不是队列（queue）的原因：队列支持点对点（point-to-point）的消息，而主题支持发布-订阅（publish-subscribe）的消息或事件。当与遗留系统进行集成时，我们很期望这些遗留的系统能够免遭负载的影响。因此，我们实现了一个缓存系统，这个缓存系统维持了记录系统中所有最新的已知状态。缓存系统会使用EDA的规则监听记录系统的变化，它会更新自己所保存数据的版本，从而保证与记录系统中的数据相匹配。这是一个很强大的策略，不过会将一致性模型变为最终一致性，也就是说如果你在社交媒体上发布一条状态的话，你的朋友可能在几秒钟甚至几分钟之后才能看到，数据最终是一致的，但有时你所看到的与你的朋友所看到的并不一致。如果能接受这种一致性的话，就能在很大程度上实现可扩展性的收益。
NoSQL：在数据存储方面，有很多的可选方案，但如果要存储大量数据的话，使用NoSQL存储能够更容易地扩展。有多种NoSQL存储可供选择，不过这要匹配所存储数据的特点，如MongoDB适合存储可搜索的数据，Neo4j适合存储高度互相关联的数据，而Cassandra适合存储键/值对，像Solr这样的搜索索引有利于加速对经常访问数据的查询。
将应用拆分为多个层的时候，最好的模式就是使用面向服务架构（service-oriented architecture，SOA）。要实现这一点，可以使用SOAP，也可以使用REST，但是REST更为合适，因为它可扩展性更强。作者接下来对REST的理念进行了深入的阐述，InfoQ上关于REST已有很多相关的文章，如这里和这里，甚至包括Roy Fielding经典博士论文的中译本，所以这里不再赘述。不过，作者在这里特别强调了RESTful Web服务能够保持无状态性（stateless）。无状态是实现可扩展性的关键需求，因为无状态，所以请求可以由任何一个服务器响应。如果你在服务层上需要更多的容量时，只需要为该层添加虚拟机即可，而不需关注客户端状态保持的问题，负载可以很容易地重新分配。
部署到云端
前面介绍了基于云的应用架构，接下来作者阐述了这样的应用该如何部署到云端。
RESTful Web服务要部署到Web容器中，并且要位于数据存储之前。这些Web服务是没有状态的，只会反映其暴露的底层数据的状态，因此可以根据需要部署任意数量的服务器。在基于云的部署中，开始时可以开启足够的实例以应对日常的需求，然后配置弹性策略，从而根据负载增加或减少服务器的数量。衡量饱和度的最好指标就是服务的响应时间。另外还需要考虑这些服务所使用的底层数据存储的性能。示例的部署图如下所示：
如果在云部署时有EDA的需求，那么就需要部署ESB，作者给出的建议是根据功能对ESB进行分区（partitioning），这样一个segment的过大负载不会影响到其他的segment。如下图所示：
这种分离使System 1的负载与System 2的负载实现了隔离。如果System 1产生的负载拖慢了ESB，它只会影响到自己的segment，并不会影响到System 2的segment，因为它部署在其他硬件上。如果ESB产品支持的话，我们还可以给指定的segment添加服务器来实现扩展。
基于云的应用与传统应用有着很大的差别，因为它有着不同的扩展性需求。基于云的应用必须有足够的弹性以应对服务器的添加与移除，必须松耦合，必须尽可能的无状态，必须预先规划失败的情况，并且必须能够从几台服务器扩展到成千上万台服务器。
针对云应用并没有唯一正确的架构，但是本文所阐述的RESTful服务以及事件驱动架构却是经过实践检验有效的架构。作者认为REST和EDA是实现云端可扩展应用的基本工具。
目前，国内许多传统的软件厂商正在逐渐往云端迁移，希望本文所阐述的架构理念能够为读者提供一些借鉴。

前端工程师零基础个人网站搭建

大家好，我是一名前端工程师，我想大多前端工程师都渴望自己独立搭建一个个人网站，不管是出于更多的学习提升自己的核心竞争力，还是想要展示自己建一个个人博客，亦或者是纯粹出于好奇想建站一条龙跑通，反正，就是要自己独立搭建一个网站跑通。你可以说没有以上的想法，反正我有，所以，我就尝试了，最后输入我的网址 maramlee.com ，成功展示了“hello world”。啊…哈哈哈……

打算写这篇文章是希望能给想要尝试自己建站却迷茫在前端的同学一点方向，可能就有人说了，网上随便搜零基础建站一大堆，不需要我在这边写，我回想我这建站之路，觉得还是很有必要，相信肯定会有一部分人会因为我的这篇文章而受益。

我在建站之初就查过很多资料，网上的资料很多很杂，有各种原因：比如太多不好分辨，有些时间比较久远，也有很多本来是基础点却各行如隔山一脸懵，等等，所以实际操作起来比较吃力。我这里就从最初的申请域名开始，到最后输入网址出现“hello world”，整个流程串联起来，希望起到抛砖引玉的作用。

我希望您是一个有前端开发基础的人，当然，我尽量将用到的技术点都提出来，希望能给没有基础的人一个思考方向。

我这边域名、服务器等用的是阿里云，不用这个平台的小伙伴儿与自己的平台自行对比哈，有问题，也可以给我评论留言，一起探讨。如果不知道选哪个平台申请，可以和我一样，注册一个 阿里云账号 ，再跟着我做。

此节有 注册域名 、 实名认证 、 备案域名 这几个流程。

输入想要的域名，未被占用即可注册。具体操作，请参见 注册通用域名 。
域名后缀通常为.com或.cn，基本上是能注册 .com 就注册 .com ，更多后缀请参见 域名区别 。

具体流程，请参见 域名实名认证概述 。

说明 使用中国大陆境内服务器托管您的网站时，需要进行备案。否则不需要备案。
为节约备案时间和顺利通过备案，建议您提前了解并做好备案前的准备工作：

各省管局要求资料有所不同，请根据 各地区管局备案规则 准备资料。更多详情，请参见 ICP备案前准备概述 。

如果按步骤来的话，没有备案过，所以参见： 首次备案 。
如果您是其他备案场景，请参见 ICP备案快速入门 。

先前往 实例创建页 ，对于运维来说，这节比较简单，但是作为运维小白，购买服务器的时候，要注意根据自己的实际情况购买，强烈多查下阿里云的文档： 使用向导创建实例 ，很详细！同时多看看提示、注意事项等。下面是我这个运维小白看了文档后总结的步骤，如果你是小白也可以这样做，如果有运维人员发现我的描述这些有问题的话，也请多多指教哈。

比如你只是想学学试一下，就选择“按量付费”（注意按量付费的话，要先充值，记得充100-200都可以），但你希望长期维护就选择“包年包月”。

这个要注意，总的来说，查看的网站的人在哪里多，就选哪里，如果你自己的博客，也可以选择自己所在地，反正全国范围内用的话，都差不了多少。更多的参见： 教我选择地域

作为玩玩的网站，就按最小的选就可以了。

不知道怎么选，建议选择 CentOS 7.4 64位。注意，如果你是 windows 的电脑，也不要想当然的选择 Windows Server 系统，这里是你的服务器镜像，可以简单的理解为这是一台新电脑的配置，和你本地使用的电脑系统无关。

这个看你存储东西决定，你可以想象成你新买一个电脑，这里的存储可以看成电脑的内存。系统盘是必须选的，可以看成 windows 系统的 C 盘。至于数据盘和 NAS 存储，不了解也可以先不选。对于玩玩的小伙伴儿，可以直接就操作系统盘打通流程，至于其他数据盘什么的，可以后面深入了解了再扩展。

这个有“经典网络”和“专有网络”的区别，现在新开的账号，都只有“专有网络”这个选项，就直接选这个就可以了，想知道更多它们可以自行查阅资料。

默认勾选“分配公网IPv4地址”即可

做测试用的话，就选“按使用流量”即可

可以看情况选择，一般的玩玩，默认 5M 即可

想要了解详细内容，可以查看： 教我选择》 。安全组可以根据提示，新建一个安全组： 新建安全组》 ，这里进去后，新建时，需要创建专有网络，根据提示填写，一般默认就可以。

剩余的弹性网卡和 IPv6 作为小白来说，暂时用不到，可以打通流程后再进行知识补充。

这个看你心情，可以登陆后再设置，可以“自定义密码”也可以用“密钥对”，根据文档提示操作即可

再之后的操作可以看你情况设置，问题不大，确认好后即点击购买即可。具体详细操作，记得看文档哦~

域名解析后，外部用户才可通过域名访问网站。比如输入 baidu.com 就可以访问百度网站。
主要操作，看阿里云的这个文档就可以了： 设置域名解析快速入门

部署网站这里涉及到服务器部署，对于前端来可能比较陌生，可能对后端来说比较容易些，但是，这个也不是很难，阿里云给了部署的方式： 自助建站方式汇总 ，可以选择适合自己的方式进行部署。我是前端人员，最熟悉的语言是 javascript ，所以，我选择用 node.js 部署，阿里云文档里也有对应的操作文档： node.js部署

这样，你的第一个网页就出来啦~~~

作为小白，踩过的坑真的不少，像不会后端怎么办？学 node.js 。不会 Linux 系统操作怎么办？查 Linux 常用操作。反正就是各种找文档，找学习资料。这里就稍微提下比较基础的坑，希望对其他小白有帮助。

连接 ECS 实例有多种方法：

注意，绑定了密钥对之后，上面两种连接方式都不可以用了。

想知道更详细的内容，可查看 文档 。

Linux格式化数据盘 文档中有写，格式化数据盘，需要挂载，随实例一起购买的数据盘，无需挂载。而且，云服务器ECS仅支持数据盘分区操作，不支持系统盘分区操作。我前面就没注意到，系统盘，就是随实例一起购买的数据盘，我只有这个盘，看文档的时候就跟着操作，进行分区，分了很多次，用 fdisk -lu /dev/vda1 查看分区成功的，但是，运行命令 mkfs.ext4 /dev/vda1p1 在新分区上创建一个文件系统就一直报错：The device apparently does not exist; did you specify it correctly? 找不到文件系统。最后找了很久才发现犯了低级错误，在系统盘分区。

由于我不是计算机科班出身，不是很了解 ip 地址，在安全组里创建规则的时候，对于授权对象一栏，一脸懵逼，于是查找了下 IP 地址相关知识。

有一点基础的人都知道，控制台输入 ifconfig 打印出的地址，与电脑中图形化界面上显示的 ip 地址一样，但是，这个地址是内网地址，并不是外网地址。
我在这里做测试的时候就将内网 ip 设置上，然后一直没有预期效果。
外网地址，可以打开百度，直接搜索 ip 就可看到你的外网地址。

对于 ip 地址也是恶补了下，不了解的小伙伴儿可以参考这个地址： CIDR的IP地址的表示与划分方法 ，对于这个实例，我也做了个笔记，供大家参考：

主机ID全为0和主机ID全为1的为非法IP地址
网络ID相同的就属于同一网段

C类：C类IP地址：
3字节的网络地址（最高位必须是110）+1字节的主机地

CIDR：无类域间路由
IP地址/网络ID的位数 0.0.0.0/0
子掩码：子网掩码的二进制格式中的网络位全为1。这样二进制格式的子网掩码和二进制的IP地址进行“与”运算，可以得出该IP地址的网络位。
CIDR技术用 子网掩码 中连续的1部份表示网络ID，连续的0部份表示主机ID。
例如 ：192.168.23.35/21，计算子网的网络ID、子网掩码、起止IP地址
子网掩码：255.255.248.0

网络ID：192.168.16.0

起始IP地址：192.168.16.1

结束IP地址：192.168.23.254

由于我使用的是阿里云平台，文章中很多节选自阿里云，想了解更多的小伙伴儿请多查看阿里云文档。

我是事后回忆写的文章，所以，可能有遗漏的地方，如果读到发现有问题，请给我评论或留言，我会持续改进此文。