在阅读本篇文章之前，你已经阅读了：

  • 软硬结合-导读
  • NodeMCU基础

    本篇学习内容

  • 拉取Github上的本项目的代码。(建议后面抽空学习Git)
  • 先看看已经部署到线上的demo1，及其能它来控制NodeMCU开发板开关灯。
  • 安装最基本的软件开发环境（Chrome浏览器、vscode编辑器、NodeJs环境）。
  • 本地把demo1跑起来，实现在本机上能控制NodeMCU开发板开关灯。

本篇视频

拉取所有代码

 Git是代码管理工具，我整个教程都放到Github上开源了，可以通过Git来拉取代码：Github：
获取全部源码

 当然，你可以直接如图所示 安装Git后通过命令git clone https://github.com/alwxkxk/soft-and-hard来拉取代码，也可以直接点击下载Zip压缩包。

 Github作为程序员的神器之一，里面所有全世界的开源代码，你拥抱了世界，世界也就拥抱了你。建议大家注册账号并学习如何使用Git来管理你的代码，当然 记得给我的项目点Star来支持我 。Git有比较好的教程：Git教程-廖雪峰，我就不再重复，这个是必学内容，但它并不影响本教程学习，大家可以大胆先跳过，建议以后有时间抽空学习。

 Github由于不可描述的原因，有可能会抽风连不上或者速度太慢，可以使用官方的国内镜像的URL替代（用https://github.com.cnpmjs.org代替https://github.com）即执行命令时是：git clone https://github.com.cnpmjs.org/alwxkxk/soft-and-hard。如果这个还不行，那只能用国内的替代版Gitee，git clone https://gitee.com/alwxkxk_admin/soft-and-hard.git。(Gitee我不保证是最新的代码，有空我就去触发一下同步，Gitee用的人少。)

 演示视频中使用了站长工具-Ping检测来检测github.com是否可访问。一般来说，特殊时期会大规模不可访问，平时只是部分地区部分运营商不可访问。另外演示中我使用了特殊的办法来访问，因为不可描述的原因这个技能不教，请大家理解。

将NodeMCU连接线上的demo1

 我已经把demo1部署到了我的云服务器，供大家测试：

 界面网址是使用浏览器chrome访问，即可打对demo1的界面。TCP服务器是让NodeMCU连上去的。修改NodeMCU demo1的代码里的 WIFI名称密码，并烧录到NodeMCU中，就可以连接到线上demo1，并通过网页来控制硬件开关灯。

 云服务器本质上依旧是一台电脑，所以在开发阶段，我们可以完全让自己的电脑来充当这个云服务器，来进行开发调试验证，最后成功了再部署到云服务器上。 接下来我们先本地调试。

搭建开发环境

 开发环境主要包含：Chrome浏览器（不建议使用其它浏览器）、vscode编辑器、NodeJs环境。跟着视频操作即可：

本地把demo1跑起来

 先不用急着学，让这个项目能在你手上完整地跑起来，先拥有它，能不能驾驭是另一回事。下面傻瓜式演示怎么把demo1在自己电脑上跑起来。
 如果你有nodejs与git的使用经验就会知道，默认的作法是只上传源码，而依赖包自行安装以减少git文件体积。注意需要进入到对应的目录，使用命令npm install安装依赖，npm start运行，可以看视频操作：

 整个过程因为没有相关基础知识，所以并不懂，很正常，经过后面的学习就会了解整个过程。(如果执行npm install安装依赖库时等待很久提示安装失败，可以尝试设置由淘宝提供的国内镜像，执行命令：npm config set registry https://registry.npm.taobao.org，验证：npm config get registry，如果返回https://registry.npm.taobao.org说明设置成功，再次尝试安装npm install。)
 特别注意，把代码部署到自己电脑上，只能够在局域网内访问，简单来讲就是电脑、硬件、手机等都必须是连在同一个WIFI里。当你使用手机换成流量模式而不是连接WIFI，你会发现网页无法访问。这是因为你电脑是没有公网IP（亦可称外网IP）的，只能在同一局域网里使用内网IP访问。要想让全世界的人都能访问到，让世界各地的硬件都能连接上，你必须要使用一台拥有公网IP的电脑，然后把这套代码部署上去。具体做法是租一台云服务器，安装linux系统，部署代码，设置安全组等等。

 注意区分 HTTP服务器与TCP服务器，HTTP服务器对应浏览器打开的网页，而TCP服务器对应的是硬件/网络调试助手建立TCP连接所用。

 拥有公网IP的云服务器，本质就是一台能让世界连接上的电脑，跟你自己电脑本质差别仅仅是多了一个公网IP而已。在这台云服务器上，可以安装windows系统（不推荐）、linux系统，然后安装软件，部署代码等操作，以对外提供服务。

让NodeMCU连上本地的demo1

 要想NodeMCU连上本地的demo1，必须先知道自己电脑的IP地址，可以通过cmd命令行输入ipconfig来得到电脑的IP地址。
打开cmd
内网IP

 然后修改NodeMCU demo1的代码里的 IP地址，烧录到NodeMCU中，要确保NodeMCU与电脑是在同一个WIFI网络当中，就可以了在本地跑通demo1了。部分读者实践时，发现需要 关闭windows的防火墙 才能连接成功。

瞎折腾

 虽然说读者可能到现在什么都不懂，但这里演示如何瞎折腾，让读者获得一下拥有感，演示一下修改网页内容：

 到这里，你已经把demo1跑起来了，虽然现在还不懂是什么东西，但是不用急，后面会教你怎么从零实现demo1，这里就是演示一下你学习后能达到的效果之一。接下来，会演示如何把demo2跑起来，一样是不教太多知识，先跑起来，让读者先看到效果，好让读者知道学完后能达到什么的程度，最后才教实现demo1，进而实现demo2。

FAQ

  1. 为什么我点击按钮没能控制LED灯亮灭？
    答：原因一：NodeMCU可能是V3版本需要定义引脚，或者硬件异常，请到NodeMCU基础跑第一个例程，让LED灯一直闪烁确保硬件正常再跑demo1。原因二：使用了错误的浏览器（比如说IE这种旧的浏览器，360浏览器兼容模式等待），建议大家请改用chrome浏览器。

  2. 把项目部署到云服务器linux中，但把SSH一关网站就访问不了了，怎么才能一直打开?
    答：学习 nodejs部署工具 PM2，可以让程序一直跑着。另外在linux系统里关闭SSH后，系统会给这个pty所关联的session中的所有进程发送SIGHUP信号，SIGHUP的默认信号处理程序是终止进程，除非进程自己处理了 SIGHUP。可以学习并使用linux 命令 screen ，解决这个问题。

  3. 如何使ESP8266与手机不在同一局域网也能通信?
    答：这就需要把后端程序部署到云服务器。

  4. 将服务部署到云服务器后，硬件/网关如何上传数据？
    答：本质上是一样的，在自己电脑部署时硬件通过IP地址给电脑传输数据，这个IP地址是内网的。而部署到云服务器，就拥有外网IP地址，只要硬件/网关能访问外网（WIFI、4G等）一样能给外网传略数据。云服务器注意配置安全组与防火墙开放端口，具体知识请学习网络知识与Linux知识。

  5. npm install 安装依赖库等了很久，没成功安装，怎么办？
    答：如果执行npm install安装依赖库时等待很久提示安装失败，可以尝试设置由淘宝提供的国内镜像，npm config set registry https://registry.npm.taobao.org，验证：npm config get registry，如果返回https://registry.npm.taobao.org说明设置成功，再次尝试安装npm install。

  6. 请问这个demo1是前后端分离的吗？
    答：不是。前后端分离可以理解为 一个静态网页作为前端展示+ 一个只提供数据的后端，浏览器先加载出静态页面，然后通过HTTP请求向后端拿数据并展示。这样做的最大特点就是：前端与后端可以分别部署到两台不同的服务器上（当然也可以部署到同一台），这样有利于优化。而这个demo1，网页是先在后端拼出HTML（pug模板渲染的作用），再发送到浏览器显示，所以不能分开部署，不属于前后端分离的项目。

  7. 为什么我本地运行的demo1没有看到我的设备，但在博主的demo1示例网站上能看到我的设备？
    答：根本原因是你的设备“没有连接到你本地电脑的demo1，而是连接到我云服务器上的demo1。”，请检查硬件代码是否连接到你本地的demo1。（保证在同一网络之中，这样硬件才能连接到你本地的demo1。）

  8. 我自己创建的项目，运行npm run start时报错ENOENT: no such file or directory, open '...\package.json'
    答：实现认真看一下报错信息就容易看到哪里出问题了，这报错就是说无法打开package.json文件。如果有学node.js就知道，npm run start其实是根据package.json里配置的来执行对应的命令。