使用ngrok访问项目总是出现404，不使用ngrok项目能正常运行

下面使用的介绍

ngrokexe -config ngrokcfg -subdomain bisouyi 8989

-config 指定配置文件

-subdomain 指定二级域名

8989 是指定映射到本地的哪一个端口

配置文件一般不用管,简单到令人发指

运行完命令,就能看到,它已经在运行了

当状态是online的时候,就说明它已经运行正常了,现在用户就可以通过访问

1从一名小白到前端大神需要掌握哪些知识点

要想被称为前端大神要掌握的知识点还是有点多的，以我在源码时代培训过的经验来看，要想成为顶尖的前端大神，以下知识点你至少是应该要掌握的：“JavaScript基础、HTML入门基本内容，CSS+DIV的基础知识，选择器，盒子模型，网页布局，Photoshop,JavaScript高级编程，jQuery插件开发，模块化组件开，AJAX,HTML5,CSS3，响应式原理及布局，Bootstrap，前端依赖管理，CSS预处理语言（Less+Sass）,Grunt/Gulp自动化构建工具Express(Nodejs),MongoDB,ElementUIl,MVC、MVVM架构模式，VUE2,Webpack模块加载器&打包工具，React,Angular4,React Native”是不是感觉很多？觉得多就对了，只有对上述内容做到系数掌握，你才有资格被称之为“前端大神”。

2学习前端HTML5需要了解哪些知识点

Stylus/Less实现CSS预编译

Express实现服务器端搭建

Nginx实现服务器反向代理

ngrok实现内网穿透

sha1、MD5实现加密隐私数据

Monggose实现mongoDB数据库操作

Echarts实现数据可视化

Mock、json-server实现模拟数据

Nodejs实现前后端完全分离

WebSocket实现实时通信

企业级UI设计图实现页面布局

BootStrap实现响应式页面

原生JavaScript实现小游戏开发

原生Ajax实现前后端通信

JSONP,CORS实现解决跨域

Animation实现动画

Canvas实现气泡， 钟表功能

jQuery实现备忘录项目

ArtTemplate实现模板页面复用

Viewport + Rem实现移动端适配

ViewPort实现1物理像素问题

原生JavaScript实现无缝滑屏

zepto实现移动端滑屏

Stylus/Less实现CSS预编译

Express实现服务器端搭建

Nginx实现服务器反向代理

ngrok实现内网穿透

3网站前端开发都需要掌握哪些知识

CSS和HTML、JavaScript这是前端学习的三个语言，其中HTML是自简单，设计到代码多的就是CSS、JavaScript，入，门简单，达到初级前端水平很容易。

但是精通各种框架需要一定学习实践1、CSS和HTML刚入门的朋友，应该把重点放在 CSS和HTML基础知识的学习上。关于 CSS(3) 你需要了解以下一些知识点：web标准、HTML相关概念、HTML标签、路径相关概念、锚点及其他、表格标签、表单标签、综合案例，注册页面、CSS选择、CSS字体样、CSS外观属性、调式、CSS复合选择器、标签显示模式、CSS背景、CSS三大特性等等。

总的来讲，CSS和HTML的学习还是比较简单的。2、JavaScriptJavaScript一直都是前端工程师进步的基石， JavaScript 的理解深度决定了前端开发者的职业发展。

关于JavaScript的学习内容包括了浏览器执行JS过程、JS变量、数据类型、运算符、流程控制语句（if else 、三元表达式、switch）、循环（for、while、do while）、数组、冒泡排序、函数、作用域、预解析、对象、内置对象、简单类型和复杂类型等。只有在熟悉了JavaScript基础语法的基础上，我们才能继续深入学习前端技术。

前端需要掌握这些基本技能精通html，能够书写语意合理，结构清晰，易维护的html结构；精通css，能够还原视觉设计，并兼容业界承认的主浏览器；熟悉javascript，了解ECMAscript基础内容，掌握至少两种js框架随着web前端技术不断发展，web前端的岗位越来越多了，技术方向也有好多种，。web前端有广阔的发展空间，app、小程序、移动端、pc端等都是需要前端技术的开发支持才能够完成，技术门槛相对较低、需求量较大，薪资待遇良好。

只要是互联网端的客户界面，就需要前端来制作完成，前端开发的编程量不大，但是需要部分编程，入门简单，但是要学的深入需要一个过程。Web前端招聘岗位• 前端开发工程师、Web开发工程师、网页开发工程师、HTML开发工程师。

• H5开发工程师、移动应用开发工程师、App开发工程师、小程序开发工程师。• JS开发工程师、Vuejs开发工程师、Nodejs开发工程师、前端架构师。

• 小游戏开发工程师、数据可视化开发工程师、WebGL开发工程师、WebVR开 发工程师、Web安全工程师。在互联网行业，前端有WEB前端、HTML前端等，随着互联网技术发展，就业方向也有很多。

web前端的就业方向有web架构师、web前端工程师、HTML前端开发工程师、网页设计师等等。HTML前端开发与Web前端开发不同的是，使用HTML5不仅仅可以开发前端，还有网页游戏，手机APP，使用浏览器进行3D渲染等一系列建立在HTML5标准与搭载其标准浏览器上的开发，而未来可能会有更多的功能分支并入HTML5标准。

web前端工程师这个方向是目前从事Web前端开发的主要就业方向Web架构师薪资普遍比较高，技术要求高，掌握多种技能，包括：后端技术、DBA、Platform等等，甚至包括网站优化SEO技术。数据方向数据研发这个是在Web开发的基础上用数据附能，懂可视化的一定是有前端能力的，懂hadoop的一定java要熟悉，属于Web开发的拓展方向。

大前端方向比如阿里，在大量实践rn和weex；由于公司内部安卓/ios式微，一定程度上，前端把ios和安卓收编了，统称大前端。图形学方向前端自然是与图形学有千丝万缕的联系，除了上面提到了可视化，还有相关3d引擎的开发工作。

做这一行要求也非常高了，图形学相关的算法，3d引擎的开发，这都需要图形学相关知识。

4学HTML5,你需要掌握这几个知识点

Html5开发可谓是这几年来特别“受宠”的软件开发了，html5不仅入行门槛低、薪资高，发展前景更是可观，所以得到大家的追捧和青睐也是实至名归的，那么想要从事html5开发学习要掌握哪些必备的知识呢？

那么想要学好html5开发，那么需要掌握的专业技术有：

第1阶段：前端页面重构：PC端网站布局、HTML5+CSS3基础项目、WebAPP页面布局；

第2阶段：JavaScript高级程序设计：原生JavaScript交互功能开发、面向对象开发与ES5/ES6、JavaScript工具库自主研发；

第3阶段：PC端全栈项目开发：jQuery经典特效交互开发、HTTP协议，Ajxa进阶与后端开发、前端工程化与模块化应用、PC端网站开发、PC端管理信息系统前端开发；

第4阶段：移动端webAPP开发：Touch端项目、微信场景项目、应用Vuejs开发WebApp项目、应用Ionic开发WebApp项目、应用Reactjs开发WebApp;

第5阶段：混合（Hybrid）开发：各类混合应用开发；

第6阶段：NodeJS全栈开发：WebApp后端系统开发；

第7阶段：大数据可视化：数据可视化入门、D3jS详解及项目实战。

如今移动互联网发展迅速，技术不断的更新迭代，所学知识也需与时俱进。现在市场上的主流互联网网站，需要打造的是一流用户交互体验。对于前端开发者的要求，不再是简单的页面展示，而是需要全栈式的前端开发工程师。

5web前端开发需要用到哪些知识

1 HTML5 + CSS3 + JavaScript Web开发基础中的基础，HTML是负责网页结构，CSS负责网页样式，JS则负责逻辑交互。

前两者更像是标记语言，没有什么逻辑，JS才是前端的重中之重。 HTML5 新增的技术大部分需要结合JS学习。

每个人学习进度可能不同，这个阶段主要是多仿站，熟悉基础，试试用CSS写响应式页面，了解JS深入性的知识，比如原型链、闭包、设计模式 等需要更多的积累，逐渐理解并实践掌握。 2 JQuery + BootStrap + Ajax + Json jQuery是JS的一个应用库，能够提升原生JS开发效率。

Bootstrap则是响应式框架，更简单的实现手机/平板/PC多个设备的页面支持。Ajax技术用于异步交互，不刷新页面就能更新数据，比如 地图 应用等。

Json是一种数据格式，被广泛应用在各大编程语言中。 jQuery 和 bootstrap 会简化很多编写的代码量，用着不亦乐乎，但对于基础还不是很扎实的人建议还是少用。

Ajax 和 json 通常用于和后端交互，在实际业务中也经常用到。 3 Git/SVN 版本管理工具，主要用于团队开发时避免文件冲突，也可回档。

前端推荐学习Git。 4 Nodejs + Mysql /MongoDB（可选） 运行在服务器端的JavaScript。

Express是其拓展MVC框架。其中nodejs最常用到的就是npm包管理器，不用到各个网站去下载资源包。

数据库 的学习可以选择MongoDB或者MySQL，前者与Nodejs的契合度更好，不过现在大多数网站都是 PHP +Mysql的组合，如果有学PHP的打算的话，可以先学习 Mysql 。 5 ECMAScript 6 JavaScript 的语言标准。

ES6中加入了很多新的概念，也弥补了之前版本中JS的很多缺陷，越来越多的项目开始运用ES6进行开发。学之前最好把ES5先搞懂了，目前实际项目中考虑到兼容性，ES6是需要通过Babel将其编译为ES5来部署的。

6 Angular/React/Vue 前端三大框架，各自也有着各自的生态系统，根据需求自行选择学习。目前企业需求量最大的仍然是Angular，但近期趋势来看react和vue则更受欢迎。

因为现在前端技术发展太过于突飞猛进，工具和框架的更新比翻书还快，建议学习还是看文档比较好。学习过程中也会遇到很多用到各种构建工具的时候。

7 其他常用工具 这个一样是根据需求自行选择学习。比较常用的现在有 Web pack，可以将多个不同编程风格的文件打包，比如ES6/AMD/CMD之类的模块化都能识别并编译成 浏览器 能运行的文件。

Sass/Less,CSS预编译框架，可以用带有逻辑性的方式编写CSS代码。Gulp/Grunt构建工具，可以自动化对代码进行压缩合并等工作。

8 其他后端编程语言 目前市场对前端基本都要求会一门后端语言， PHP / JAVA / Nodejs / Python 等。

6前端这么多知识点该怎么记忆

前端涉及到的知识确实是比较广的，先要理清一定的框架，然后有条理的进行学习才能事位功半，这里我有一份知识体系给你了解一下

如果你有毅力可以坚持下去就自己好好的自学，但如果觉得效率不是很好条件允许的话也可以考虑参加系统的培训，虽然要花钱但可以省不少的时间，自己权衡。

所以当时使用了ngrok做了反向代理，使用ngrok的域名在设置了回调地址，并且验证通过了！注意，最开始我其实是走通了的，而且域名肯定也是没有ICP备案的。

最近几天突然这个方法不好使了，我切换成了固定的域名，还是不通。但同时还有一个奇怪的现象，具体如下：

1 回调地址设置页面，输入域名地址，无法保存。点击保存按钮，提示“回调URL校验失败”。对页面点击保存时提交的post请求，我用firefox抓了一下post请求，其响应为：{"statusCode":200,"method":"POST","result":{"errCode":-30065,"humanMessage":"openapi回调地址请求不通过"}}

2 然后同时，我们利用微信提供的开发者工具（http://workweixinqqcom/api/devtools/devtoolphp）进行回调测试时，使用同样的域名地址、Token、EncodingAESKey测试时，却又正常连通，并返回正常EchoStr！！！ 从开发者工具测试结果来看应该是通了。

3 我对比了1和2两种情况服务端的请求接收情况，1的情况下不管是ngrok或者我的服务端都没有接收到任何请求，所以后续的服务端代码压根没有执行；而针对2的情况下，ngrok和服务端都能接收到正常的get请求，服务端的处理代码也能正常解析和运行。

所以怀疑1的情况下是不是请求被企业微信后台拦截了或者转发失败了，各位大牛有没有遇到类似的情况，请不吝赐教啊！

这篇文章花了好几天，系统地梳理出了映射公网的几种方式。虽然是针对微信开发的外网服务器来寻找解决方案，但这个知识梳

理可能会在其他地方也受益。平常我也有用TeamViewer，在搜集资料的过程中也知道了其大致工作原理。还有一些免费好用的反向代理软件，可能会在后

头派上用场。

一、映射公网的两种方式介绍

1 动态域名解析+端口映射(公网环境)

动态域名解析，俗称DDNS。目前提供这种服务的厂商还挺多，我目前知道有几家：

Oray花生壳

PubYun公云

No-IP

DynDNS

如果你对一个公网IP有权限，那就可以采用这种方式。你的路由器的WAN口就是宽带，那这种方式就适用。DDNS的作用就是将WAN口分配到IP与域名绑定在一起，访问这个域名，相当于就访问到了你的WAN口。于是你只要在路由器上做一个端口映射即可。

此种方式的局限性可能就是大部分运营商都屏蔽了80等常用端口，所以做微信开发要用到80端口的话这种方式就不大适合。

2 反向代理(内网环境)

如果你在一家公司上班，公司内部可能分了好几级的路由，就比如我，那第一种方式就走不通。写零java基础搞定微信Server_3：搭建微信

Server本地开发环境那晚弄到半夜就是这个原因。哦，我当然不是在加班。我在家里，房间用了一个二级路由，那晚真真是搞死宝宝了。

下面这两张图可以快速了解反向代理。

我们是采用本机与反向代理server组建网络(相当于一个虚拟局域网)，访问反向代理server的数据都被转发到本机。

从 有简单一点的将内网映射到外网的工具吗？ 这个帖子中收获良多。作者 沙渺 告诉我们：

实际上ngrok就是一种仅仅针对http单一用途的代理服务。ngrok的原理很可能并不是真正的内网穿透，而是真的老老实实的充当反向代理，承担所有实际发生的流量。

这方面的替代服务有localtunnelme和pagekite等。

内网穿透的应用中，通讯双方必然首先对一个公网服务器主动发起连接。。。

各种相关的软件都是如此，例如TeamViewer、Oray向日葵乃至QQ远程协助等。就说这个ngrok，其实也是需要通讯双方连接ngrok中心服务器，甚至中心服务器的某些高级功能还提供付费计划对吧。

于是乎，我们映射公网的工具，除了ngrok之外，又多了 localtunnelme 和 pagekite 。

二、反向代理的实现

1 自己创建反向代理服务

用这种方式，成本较高，需要三样东西：

服务器

代理服务端的监听转发程序

目的服务端（同时也是面向代理服务器的客户端）的主机转发程序

如果你有服务器，那自己写个转发工具应该是可以实现的。比较省力的方式是参考ngrok的源码。ngrok是应该浓墨重彩写一番，开源，自由，github上开源了V10版本

https://githubcom/inconshreveable/ngrok/

一个在自己VPS搭建ngrok的实例， https://imququcom/post/self-hosted-ngrokdhtml

很多人和我一样，现阶段就想做一个微信开发，那自己花大精力去实现一个反向代理显然不值得。这时候就得从已有的软件中进行选择。运行稳定，成了最主要考虑的因素。

2 厂商服务

Ngrok比较出名，提供免费服务，但可惜容易被墙。那解决方式就是墙内也搞Ngrok。由于我所知有限，仅仅把目前知道的几家列出来。(这里我可能先入为主了，因为我把这些厂商粗暴地分为了Ngrok和非Ngrok，忽略了其他厂商们所做出的努力。)

Ngrok

免费，但会被墙。

Tunnel

昨晚测试，访问不了。

localtunnel

可用

pagekite

可用

新花生壳

开通内网映射，映射主机即可。目前免费版也要收取8块钱的费用就是了。

NAT123

功能同花生壳，但似乎是免费的。

我贪图省事，直接花钱认证了花生壳，后面四种就没再处理了。看到别人用localtunnel和pagekite有成功的，所以我就不搬了。

疫情期间远程办公，搭建了***方便远程连接公司服务器，***连接需要知道公司的公网ip，而公网ip是动态变化，所以需要远程连接公司的服务器，查看公网ip。

记录下，备忘。

Linux 查询公网ip 指令：

向日葵Linux安装、使用方法

缺点：需要付费，精英版专享功能

通过ngrok内网穿透工具，创建tcp通道，监听22端口，这样可以通过ssh工具进行连接。

创建tcp通道

执行该指令，可以开始tcp通道，并监听22端口，但是无法关闭该终端(需要后台执行)。

启动之后使用该curl查看映射映射：curl localhost:4040/api/tunnels

启动之后便有了对应的映射关系：比如： tcp://3tcpngrokio:10111 -> localhost:22