前端服务器如何搭建

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

大家好，我是一名前端工程师，我想大多前端工程师都渴望自己独立搭建一个个人网站，不管是出于更多的学习提升自己的核心竞争力，还是想要展示自己建一个个人博客，亦或者是纯粹出于好奇想建站一条龙跑通，反正，就是要自己独立搭建一个网站跑通。你可以说没有以上的想法，反正我有，所以，我就尝试了，最后输入我的网址 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 作为小白来说，暂时用不到，可以打通流程后再进行知识补充。

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

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

域名解析后，外部用户才可通过域名访问网站。比如输入 .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

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

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

② 求node.js搭建前端web服务器步骤，按网上的教程，安装完node.js就不知道怎么搭建了，都

安装完node.js之后，你可以考虑使用webstorm开发工具创建web项目。
比如创建express项目。自动创建基于express 的web项目。

③ 前端本地开发和服务器部署的架构怎样设计合适

在 Application Virtualization Server Management Console 中创建服务器组之后，可以使用以下过程向该组中添加服务器。注意 服务器组中的所有服务器必须连接到相同的数据存储。
如果您有一个数据库的使用频率非常高，而且由于这些数据库经常发出更新请求而导致群集复制器过载的话，您需要考虑使用多个群集复制器。在一个服务器中运行多个群集复制器，可以同时将新的更改复制到其它服务器中。
如果一个群集复制器在把更改复制到一个数据库时太忙，会有另外一个群集复制器把更改复制到其它的服务器。这样，通过共同分担复制负荷的方式，多个群集复制器使得数据得到快速的更新并能严格的保持同步。

④ 用pyqt做好了前端，想用django做服务器，想问一下大概怎么搭建呢

一般客户端（也就是你说的前段）跟服务器端（你准备使用Django）都是通过 HTTP 协议交换信息的（除非有特别的需求，才会使用别的或者定制协议）。

在 客户端（PyQT）中,你可以安装 Requests 库，它可以帮助你发送 HTTP 请求给服务器端，

在 Django 中你可以使用 Django REST Framework 网页链接处理 客户端的HTTP请求。

⑤ 怎么搭建FTP服务器

1、首先，我们创建一个用于登录FTP以进行操作的用户帐户。右键单击我的桌面并选择“管理选项”，转到“管理”界面，然后打开“本地用户和组”选项。我们可以在列表中看到用户选项。

⑥ 前端搭建本地服务器供局域网使用

作为前端开发搭建本地服务尤其重要，下边的方法三步完成服务器的搭建：

$ npm install http-server -g  // 全局安装http-server

$ cd demo2   // 打开要共享的文件

$ http-server // 搭建服务

https://segmentfault.com/q/1010000003926981

⑦ 我是个前端，公司让我搭建服务器，如何弄

公司让我搭建服务器，这个说来也简单，如果是专业的数据中心托管服务器，会帮你搭建系统，配置环境。我们的数据中心就是这样，工程师可以协助用户搭建环境，上传应用，都是免费服务。

⑧ 如何搭建web前端框架

搭建web前端框架步骤如下：
1、确定项目使用的技术
根据项目的需求等来选择使用的技术（这里以angular4 + typsescript + nodejs+mongodb举例）
2、新建一个项目的工作文件夹
使用npm init初始化项目，根据问题配置，一般是直接回车使用默认配置,生成package.json文件
3、新建一个index.html页面
4、新建配置文件system.config.js
5、新建ts的配置文件tsconfig.json
npm install typescript

6、新建webApp目录，这里面放的是所有html页面和js代码，首先得有个入口文件，与system.config.js配置文件中的入口文件名一样，app.mole.ts，里面引入了所有js文件，不被引入的在加载时都不会被加载
7、打包(将代码压缩，使程序运行速度更快）

⑨ 云服务器部署前端服务

yum install -y nginx

进入/etc/ngin文件夹，并且新建自己的配置目录如：myconfig，并且进入此目录，新建一个配置文件如：ghmall.conf，编辑以下内容并且保存：

上传前端文件（执行npm run build后，项目下会生成一个dist文件夹）至该配置文件中配置的地址如：/usr/portal/ghmall-portal/dist

进入/etc/ngin文件夹，编辑配置文件：vim nginx.conf

修改为自己的server配置：

server {

      listen 9527;

      server_name localhost;

      location / {

        root /usr/portal/ghmall-portal/dist;

      }

      location /ghmall/ {

        proxy_pass http://localhost:8118;

      }

然后重新启动nginx：nginx -s reload

输入systemctl start nginx开启 nginx 服务

浏览器上输入yourIpAdress:9090/便可以访问你的页面了

另外systemctl status nginx可以查看 nginx 的运行状态

以及systemctl stop nginx可以关闭 nginx 服务

⑩ nodejs搭建web服务器就是这么简单！

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效。Node.js 的包管理器 npm，是全球最大的开源库生态系统。（nodejs官网上的介绍），正如官网上介绍的那样，nodejs确实很牛！怎么个牛法？看看下面的代码就知道了。

//引入http模块

var http = require("http");

//设置主机名

var hostName = 飗.0.0.1'

//设置端口

var port = 8080;

//创建服务

var server = http.createServer(function(req,res){

res.setHeader('Content-Type','text/plain');

res.end("hello nodejs");

});

server.listen(port,hostName,function(){

console.log(`服务器运行在http://${hostName}:${port}`);

});

短短几行代码就把一个简单的web服务器搭建完成了，为了验证效果，我们在浏览器请求，结果如下

运行成功！

到此为止，一个web服务器就建立成功了！ 没错就是这么简单，然后我们就可以写个html界面愉快的玩耍了，哈哈哈！果断的写了一个html页面来请求一下我们的web服务器。

代码简单，点击p获取数据并将服务器返回的数据展示。好了，我们运行一下demo.html文件，我擦来！居然出现了……

很明显，通过jquery请求不到数据，这是因为跨域请求的原因。我们的web服务器并不支持跨域请求，所以报错了。解决方式：在服务器的响应头文件里加上如下代码：

再次重启服务器，运行demo.html，显示结果很是令人欣喜！

通常请求服务器都会拼接参数的，最常用的就是get请求，post请求。很明显，我们现在的代码还不能支持。express框架很好的封装了nodejs的http模块，使我们用起来非常的简单。

引入express ：$ cnpm install express –save

使用方式变化不大，通过express（）方法开启服务，然后在通过get方法来设置匹配参数的路由，通过在回调函数的req中可以获取请求参数和地址。post请求也是类似，不过有不同的是，post请求在获取参数的时候要引入body-parser 中间件，用于处理 JSON, Raw, Text 和 URL 编码的数据。

运行结果：

完整的get以及post请求就是以上了。下一篇文章会结果fs文件模块介绍http是如何返回文件的，敬请期待！！

学习从来不是一个人的事情，要有个相互监督的伙伴，想要学习或交流前端问题的小伙伴可以私信“学习”小明加群获取2019web前端最新入门资料，一起学习，一起成长！