云服务器部署前端服务

yum install -y nginx

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

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

进入/etc/ngin文件夹，编辑配置文件：vim nginxconf

修改为自己的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 服务

<1>第一阶段：

HTML+CSS:

HTML进阶、CSS进阶、DIV+CSS布局、HTML+CSS整站开发、

JavaScript基础：

Js基础教程、js内置对象常用方法、常见DOM树操作大全、ECMAscript、DOM、BOM、定时器和焦点图。

JS基本特效：

常见特效、例如：tab、导航、整页滚动、轮播图、JS制作幻灯片、弹出层、手风琴菜单、瀑布流布局、滚动事件、滚差视图。

JS高级特征：

正则表达式、排序算法、递归算法、闭包、函数节流、作用域链、基于距离运动框架、面向对象基础、

JQuery：基础使用

悬着器、DOM操作、特效和动画、方法链、拖拽、变形、JQueryUI组件基本使用。

这是我整理的web前端资料视频

<2>第二阶段：HTML5和移动Web开发

HTML5：

HTML5新语义标签、HTML5表单、音频和视频、离线和本地存储、SVG、WebSocket、Canvas

CSS3:

CSS3新选择器、伪元素、脸色表示法、边框、阴影、flex布局、background系列属性改变、Transition、动画、景深和深透、3D效果制作、Velocityjs框架、元素进场、出场策略、炫酷CSS3网页制作。

Bootstrap:

响应式概念、媒体查询、响应式网站制作、删格系统、删格系统原理、Bootstrap常用模板、LESS和SASS。

移动Web开发：

跨终端WEB和主流设备简介、视口、流式布局、弹性盒子、rem、移动终端JavaScript事件、手机中常见JS效果制作、手机聚划算页面、手机滚屏。

<3>第三阶段：HTTP服务和AJAX编程

WEB服务器基础：

服务器基础知识、Apache服务器和其他WEB服务器介绍、Apache服务器搭建、HTTP介绍。

AJAX上篇：

Ajax简介和异步的概念、Ajax框架的封装、XMLHttpRequest对象详细介绍方法、兼容性处理方法、Ajax框架的封装、Ajax中缓存问题、XML介绍和使用、会处理简单的GET或者POST请求、

AJAX下篇：

JSON和JSON解析、数据绑定和模板技术、JSONP、跨域技术、预读取和lazy-load技术、JQuery框架中的AjaxAPI、使用Ajax实现爆布流案例额。

<4>第四阶段：面向对象进阶

面向对象终极篇：

从内存角度到理解JS面向对象、基本类型、复杂类型、原型链、ES6中的面向对象、ES6中变量的作用域（let，const(声明变量只读)，块级作用域），ES6中函数新特性。

面向对象三大特征：

继承性、多态性、封装性。

面向对象中创建对象的五种方法：

自定义对象、工厂模式创建对象、构造函数、混合模式创造对象、JSO格式创建对象。

<5>第五阶段：封装一个属于自己的框架

框架封装基础：

事件流、冒泡、捕获、事件对象、事件框架、选择框架。

框架封装中级：

运动原理、单物体运动框架、多物体运动框架、运动框架面向对象封装。

框架封装高级和补充：

JQuery框架雏形、可扩展性、模块化、封装属于传智自己的框架。

<6>第六阶段：模块化组件开发

面向组件编程：

面向组件编程的方式、面向组件编程的实现原理、面向组件编程实战、基于组件化思想开发网站应用程序。

面向模块编程：

AMD设计规范、CMD设计规范、RequireJS，LoadJS、淘宝的SeaJS。

<7>第七阶段：主流的流行框架

Web开发工作流：

GIT/SVN、Vue-cli脚手架、NPM/Bower依赖管理工具、Grunt/Gulp/Webpack。

前端主流框架：

Vuejs、Angularjs、ReactJS、Bootstrap。

常用库：

Reactjs、Vuejs、JQueryjs。

<8>第八阶段:Nodejs全栈开发：

快速入门：

Nodejs发展、生态圈、Iojs、Linux/Windows/OSX环境配置、REPL环境和控制台程序、异步编程，非阻塞I/O、模块概念，模块管理工具、开发流程，调试，测试。

核心模块和对象：

全局对象global，process，console，util、事件驱动，事件发射器、加密解密，路径操作，序列化和反序列化、文件流操作、HTTP服务端与客户端、SocketIO。

Web开发基础：

HTTP协议，请求响应处理过程、关系型数据库操作和数据访问、非关系型数据库操作和数据访问、原生的Nodejs开发Web应用程序、Web开发工作流、Nodejs开发Blog案例。

快速开发框架：

Express简介+MVC简介、Express常用API、Express路由模块、Jade/Ejs模板引擎、使用Express重构Blog案例、Koa等其他常见MVC框架。

Nodejs开发电子商务实战：

需求与设计、账户模块注册登录、会员中心模块、前台展示模块、购物车，订单结算、在线客服即时通讯模块。

两种前端架构：

lvs -> nginx前端代理 -> squid缓存

lvs -> squid前端缓存 -> nginx中层代理

squid在前面的优点：

Squid作纯代理比较稳当

前端少一级代理，响应速度会快，出问题的可能性要小

功能有限，不会常被调整

容易为人接受，只是为了扩充功能而增加中层代理

一般的配置简便，比如增加一个二级域名，只需配置一个指向。

增加的nginx可扩展功能，增加对应用服务的负载均衡等。

squid在前面的缺点：

squid支持的负载均衡配置复杂

容灾问题

更新缓存要遍历所有机器

squid只支持单cpu，所以浪费cpu

nginx在前面的优点：

分流、负载均衡功能强大，可以细致定义

可精细定制access_log

nginx的错误日志更详细

可让squid只缓存无压缩版本，由nginx压缩，这样可优化squid缓存容量

nginx可分担部分无实时性要求的缓存

nginx在前面的优点：

nginx目前还有部分bug。

功能强，所以可能经常被调整

nginx代理用的短链接方式

单机上安装nginx+squid的cpu消耗比纯squid和纯nginx之和要大一倍，但也不算高

容易遭到质疑，不易被接受。

对于SSL，现代攻击者使用工具来检测和破坏较弱的密码算法，从而使SSL保护失效，尽管这不是很常见。

保护开源软件系统

Apache运行在centods/redHat、Ubuntu和Debian上，在严重的FOSSWeb基础架构和解决方案中获得了广泛的欢迎。第一步是加强ApacheWeb服务本身;在Internet上有许多关于这方面的指南和例子--对于每个Linux发行版，以及示例。

强烈建议禁用除Web服务端口之外的其他端口，以及停止和禁用不必要的服务。部署一个配置良好的防火墙或入侵检测设备是至关重要的。正如前面提到的，一个简单的防火墙是不够的;因此，需要一个能够检测Web层攻击的内容过滤防火墙。

保护Web门户不仅限于Web服务器，还可以扩展到诸如数据库服务器，Web服务等组件。从网络安全的角度来看，只允许从前端Web服务器到数据库的IP连接是一个很好的理念。运行rootkit检测器，防病毒工具和日志分析器必须是常规工作，以防止黑客攻击。

对于中间件和Web服务器之间的高级安全性，还应该有一个更强大的身份验证机制。应该对cookie进行加密和SSL部署，并使用更强的密码算法。

从编码的角度来看，如前所述，使用安全编程技术是至关重要的，也是遵循最佳的安全措施，如代码审查和渗透测试。还建议使用其他进程，如输入代码验证，服务器和数据库端验证。

Web开发是攻击网站的常见方式。由于其易用的可用性和可编程性，FOSS基础架构也容易遭受这种攻击，因此网络管理员必须了解技术来保护其基础架构免遭信息丢失或被盗。

网站建设网站

企业搭建网站都是有一整套流程的，有的地方是建站公司自己的流程，有的是需要和企业进行对接的流程，下面我们就一起来看看企业搭建网站教程究竟是怎样的。

1、域名的选择

企业需要选择一个比较容易记住的域名，并且需要站在搜索引擎和用户的角度。域名最好是选择com、cn、net这样的顶级域名。既然是选择简单的域名，那么就要选择容易被别人记住的。

2、租用空间服务器

搭建网站教程还少不了要租用空间服务器，并且要注意它是不是稳定。建议如果条件允许的话，最好是选择购买独立空间，这是因为共享空间对于网站的后期优化有很多不方便的地方。如果这个共享空间里面有垃圾网站，那么你的网站也会受到影响。

3、网站素材选择

所谓的网站素材就是指网站里面的内容填充，基本上都是企业所收集的素材，建站公司只是进行辅助。因为只有企业才是最了解自己的，企业选择好了素材，建站公司再进行筛选就可以了。

4、网站备案

这一点一定要特别注意，你做的这个网站一定要跟你的经营范围是相关的，否则后面将会有很多麻烦。我们还不说搜索引擎方面的麻烦，就是工商管理局那里都会是个麻烦事。企业第一次备案一般需要22天的时间，之后备案的话只需要15天。

5、前端设计

网站的前端设计应该按照客户的喜好来进行搭建和设计，并且要给企业合理的建议，降低网站的信噪比。前段设计还需要把营销策略以及用户的体验也充分的考虑进去。

6、美工修改

这个就需要专业的美工人员来完成了，最后是不是满意要让企业来决定。在这里小编给大家提出一个建议，美工尽可能不要把做得太浮夸，越接地气就越能够获得用户的信任。

7、上线试运行

网站搭建完成不代表就已经做好了，还需要把网站放到线上进行试运行。而且建站公司要对企业的相关人员进行后台操作的培训。企业工作人员通过几天时间对网站有所了解之后，还可以提出修改意见。

企业搭建网站教程就为大家介绍到此了，想要搭建网站的话，那么不妨可以参考以上的这些方法。

网站教程

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

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

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

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

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

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

输入想要的域名，未被占用即可注册。具体操作，请参见 注册通用域名 。

域名后缀通常为com或cn，基本上是能注册 com 就注册 com ，更多后缀请参见 域名区别 。

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

说明 使用中国大陆境内服务器托管您的网站时，需要进行备案。否则不需要备案。

为节约备案时间和顺利通过备案，建议您提前了解并做好备案前的准备工作：

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

如果按步骤来的话，没有备案过，所以参见： 首次备案 。

如果您是其他备案场景，请参见 ICP备案快速入门 。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

域名解析后，外部用户才可通过域名访问网站。比如输入 baiducom 就可以访问百度网站。

主要操作，看阿里云的这个文档就可以了： 设置域名解析快速入门

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

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

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

连接 ECS 实例有多种方法：

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

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

Linux格式化数据盘 文档中有写，格式化数据盘，需要挂载，随实例一起购买的数据盘，无需挂载。而且，云服务器ECS仅支持数据盘分区操作，不支持系统盘分区操作。我前面就没注意到，系统盘，就是随实例一起购买的数据盘，我只有这个盘，看文档的时候就跟着操作，进行分区，分了很多次，用 fdisk -lu /dev/vda1 查看分区成功的，但是，运行命令 mkfsext4 /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的位数 0000/0

子掩码：子网掩码的二进制格式中的网络位全为1。这样二进制格式的子网掩码和二进制的IP地址进行“与”运算，可以得出该IP地址的网络位。

CIDR技术用 子网掩码 中连续的1部份表示网络ID，连续的0部份表示主机ID。

例如 ：1921682335/21，计算子网的网络ID、子网掩码、起止IP地址

子网掩码：2552552480

网络ID：192168160

起始IP地址：192168161

结束IP地址：19216823254

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

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

= =。首先你要有一个公网IP的服务器(重要，否别人无法直接在网址上访问你的页面)

linux 是服务器，用来24开机提供服务。

apache是引擎，用来提供别人访问你的网址能有东西出来。

ftp用来把你写的代码上传到linux上面去，有了这一步你的东西才能在服务器上被别人访问到。

只要远程目录上有你的东西就是上传成功了，端口默认是21

或者你可以上网买一些虚拟主机，有二级域名可以穿透，也可以外网访问

今天小编要跟大家分享的文章是关于想转行做Web要了解的Web前端学习经验。很多准备转行做Web的小伙伴们都说自己越学越迷茫，不知道该从哪里下手，今天小编为大家梳理了一些学习Web前端的经验，以及学习的步骤，分享给大家，希望对你们学习能有帮助。下面我们一起来看一看吧！

计算机行业很多领域都符合28定律，也就是20%的东西的使用频率占到80%，所以很适合囫囵吞枣，因此我们的重点就是把这20%学起来，而首先要做的就是把这20%的东西找出来。

在我看来前端这20%的东西大概就是常用的html标签，css的盒子模型，基本的原生js，以及熟练使用jquery，ajax，常见浏览器的兼容。

拿下这些东西意义非凡，一方面证明你适合做前端这份工作，另一方面这些技能能让你找到一份工作。让你能够从容地去学习剩下的80%。

总之就是专心对付最重要的东西，那些什么less、sass、angular这类的东西，当你把我之前说的基础打好之后，学习起来畅通无阻，随学随用。

最后我觉得最难的就是实践，只有实践才能学到真正的技术，新人很难参与一些有价值有意义的项目，没有这些项目又很难成长，所以自己有项目可参与应该珍惜，没项目应该多造一些有价值的轮子。具体的Web前端学习经验如下：

1、HTML的学习

html的语法、格式，常用的标签极其作用，理解标签的嵌套，学习使用firefox+firebug或者chrom的调试工具，能够使用这些工具调试html、css、js、断点调试、抓包。

2、CSS、js的学习

如何引入css、js(有多少种方法，各种方法有什么区别)，理解id、class属性的区别，学会css的常用选择器，理解盒子模型(padding，margin，border，width，height，)，css坐标系，css布局(position的absolute、relative

、fixed、static)，css浮动(float：left、right

)和清除浮动(clear),display:inline、block、inline-block、flex。

3、基本编程的学习

js的执行顺序，基本的编程基础(变量、运算、流程控制、数组、调用函数、自定义函数、对象)、json、js的dom操作、js的事件机制(委托、绑定、监听，冒泡和阻止冒泡，兼容性)，了解ajax的xmlhttprequest及其创建方法(多浏览器兼容)、跨域，明白其工作原理，

有朋友说http协议，确实是我疏忽，http协议是Web的根本，所以其重要性再怎么强调都不为过，熟悉http协议对Web开发的方方面面都有不少帮助，比如理解及使用ajax，比如调试程序、抓取数据等等，不过http是一个很杂很细的东西，内容很多，我建议也囫囵吞枣式地学习，先了解、熟悉简单的，以后在项目中遇到深入点的再进一步学习。

4、jQuery的学习

使用jquery解放你的开发工作，学会jq选择器，修改属性、监听事件、修改css，学会写jquery插件。这一步我觉得可以和第3步穿插学习。

5、搭建服务器

弄个傻瓜服务器比如wamp，phpstudy等软件，可以一键建立一个apache+php+mysql的服务器，前期可以把你的静态页发布到本地服务器，使用本地服务器配合ajax学习。

6、学点服务器端

学点服务器端，建议php+mysql。服务器端脚本其实很简单，总结起来就是4个东西：SESSION、COOKIE、Request、Response，结合http协议理解如何从Request取得数据，经过处理后Response给客户端。这就是整个过程。

至于mysql也就是基本的sql语句。如何使用php进行CURD操作。这块其实很难总结，基本上以实现业务为主。

7、框架学习

来点框架，理解MVC模式、推荐个比较流行的MVC框架：ThinkPHP，简洁好用不解释，国人弄的，文档和例子什么的非常丰富。

以上就是小编今天为大家分享的关于想转行做Web要了解的Web前端学习经验的文章，希望本篇文章能够对正在从事Web相关工作的小伙伴们有所帮助，想要了解更多Web前端相关知识记得关注北大青鸟Web培训官网，最后祝愿小伙伴们工作顺利，成为一名优秀的Web前端工程师！

作者：walle来源：知乎

链接：#/question/28187933/answer/77050877