0037 在本地创建一个Web服务器运行网站程序

节课，我们将个人简介网站编写完成了。

这节课，要将网站发布到局域网可以访问。

不同操作系统选择不同的Web服务程序

前面课程里面有讲过不同的计算机上有不同的操作系统。

大多数人使用的Windows系统，前面的教程是树莓派Raspbian系统，学哥常用的是Mac系统。

那么在不同的操作系统上，就可能需要安装不同的Web服务器程序，来对外提供Web服务。

下面针对2种具体的代表性操作系统，详细说明应该如何安装配置Web服务程序。

分别是：Windows7、Raspbian。

Windows系统是使用人数最多的系统，Windows7是比较常用的。

树莓派电脑是前面课程中很多同学用来学习的电脑，Raspbian系统也可作为Linux的代表性。

下节课将说明如何将网站部署到阿里云的Ubuntu系统服务器上，Ubuntu也是基于Linux的，很多操作步骤和Raspbian类似。

如果有同学使用的是Mac系统，那么可以考虑安装一个虚拟机程序VMware Fusion，然后在里面安装一个Windows系统或者Ubuntu系统都可以。具体如何安装虚拟机程序，不是学哥教程的重点，因此请大家去网上搜索关键字“Mac Vmware Fusion Windows”。

Windows7系统安装phpStudy

学哥推荐phpstudy程序，可以很方便的安装配置好Web服务程序。

它包含了常见的Web服务程序包括Apache或者Nginx，和PHP，和数据库MySQL，集成在一起了。

下载地址：http://www.phpstudy.net/phpstudy/phpStudy20161103.zip

将下载好的phpStudy20161103.zip文件移动到C盘根目录下：

然后，鼠标右键单击，在弹出菜单里面选择【全部提取(T)...】：

然后，点击【提取】按钮，完成之后，看到目录C:\phpStudy20161103下面出现了几个文件：

然后，鼠标双击文件phpStudy20161103.exe，启动安装程序:

修改目标文件夹为C:\phpStudy，点击OK按钮，等待解压完成，出现确认界面：

点击按钮【是】，phpStudy程序将启动，会弹出防火墙确认mysqld画面：

点击按钮【允许访问】，然后在另外一个弹出防火墙确认Apache HTTP Server画面：

点击按钮【允许访问】，完成之后，可以看到phpStudy程序已经启动好了：

看到phpStudy程序的运行状态里面，Apache和MySQL后面是2个绿灯，则表示Web服务程序环境配置好了。

如果看到有红灯，则说明可能有问题，这时候就需要排查原因。

一般来说，可能出错的原因主要是电脑系统里面可能曾经已经安装过其它Web服务程序，占用了80端口；

或者是已经安装了MySQL数据库程序，占用了3306端口。

这时候，解决办法一般是先删除其它相关软件，然后关闭并重新启动phpStudy程序进行尝试。

如果还有错误，则需要到C:\phpStudy20161103目录下查看manual.chm文件，里面有关于常见错误的解决方案。

今后，在学习PHP和MySQL的时候，还会用到这个Web服务程序phpStudy。

将网站程序部署到phpStudy对应目录

来整理一下，前面的个人简介网站程序总共有哪些：

index.html

index.css

project1.html

project2.html

images8128.gif

images\appkeys1.png

images\appkeys2.png

images\appkeys3.png

images\back.png

images\back1.jpg

images\background1.jpg

images\coke11.png

images\coke12.png

images\coke13.png

images\coke14.png

总共是3个html文件，1个css文件，1个images目录，images目录下有11个图片文件。

打开“文件资源管理器”程序，找到目录“C:\phpStudy\WWW”，将4个文件和images目录复制到这个WWW目录下：

然后，程序就部署好了，就可以打开浏览器访问啦。

打开Chrome浏览器，输入地址http://localhost/index.html就可以看到个人简介网站了：

可以看到，这里的localhost就是一个网络ip，相当于告诉Web服务程序，访问的是本机。

localhost只有当Web服务程序和浏览器客户端是同一台机器时才有效。

如果换了另外一台计算机，输入http://localhost/index.html就看不到网站了，因为另外一台计算机上面并没有运行phpStudy这个Web服务程序，也没有部署网站。

那么，在局域网的另外一台计算机上，应该如何通过浏览器访问这个网站呢？

局域网另外一台计算机访问网站

前面课程里有讲过，两台计算机之间要互相访问的前提是，存在物理连接，也就是能够有网络连接。

也就是2台计算机通过网络可以连接在一起。

网络连接最重要的是知道对方的地址，也就是网络IP地址。

通过另外一台计算机来访问Web服务程序，就必须知道提供Web服务程序的计算机的网络地址。

在Windows系统里面，可以通过在cmd命令行环境里面输入命令ipconfig来查看当前计算机的网络IP地址。

在phpStudy程序所在的计算机上，点击左下角的【开始】图标，然后在“搜索程序和文件”这个输入框中输入【cmd】，然后按回车键，就可以打开cmd.exe程序，在里面输入命令ipconfig回车，来查看网络IP地址：

可以看到，“IPv4 地址”对应就是当前计算机的网络IP地址，学哥这个网络环境是192.168.36.230。

然后在另外一台计算机上面，打开Chrome浏览器，输入网址：http://192.168.36.230/index.html，就可以看到网站了：

如果，访问的地址不正确，或者两个计算机并没有网络连通，可能就看不到网站了，这时候就需要检查网络。

可以在另外一台计算机上面通过在cmd命令行环境输入ping 192.168.36.230来测试是否能够网络连通：

如果看到回复的文字里面有，时间<x秒的信息，就说明是网络连通的。

如果看到请求超时的信息，就说明网络是不通的。这时候就要去检查网络连接或者路由器设置等等。

树莓派电脑安装Web服务程序

打开树莓派电脑的程序“LX终端”，按次序输入以下命令：

安装和启动nginx服务程序:

$sudo apt-get update

$sudo apt-get install -y nginx

$sudo /etc/init.d/nginx start

然后在树莓派电脑上打开【Chromium网页浏览器】，输入网址：http://localhost，可以看到如下的效果：

说明nginx这个Web服务程序安装和启动好了。

将网站程序部署到nginx对应目录

如果是在树莓派电脑上编写的个人简介网站程序，那么程序应该是在/home/pi这个目录下。

将前面说明的4个文件和images目录复制到/var/www/html目录下：

然后在树莓派电脑上打开【Chromium网页浏览器】，输入网址：http://localhost/index.html，可以看到如下的效果：

如果不是在树莓派电脑上编写的个人简介网站程序，但是又想将网站部署到树莓派电脑上，那么就需要利用ftp软件工具将程序代码上传到树莓派电脑上，这个可以参考第1章的课程，如何上传文件。

如果是要在另外一台计算机上面访问树莓派电脑作为主机的网站，则需要知道树莓派电脑的IP地址。

可以在树莓派电脑的“LX终端”里面输入命令ifconfig来查询树莓派电脑的IP地址：

然后在另外一台计算机上面访问: http://192.168.5.109/index.html，类似访问前面Windows电脑上部署的网站一样的。

测试网站

网站程序部署好了之后，就可以在另外的计算机上通过浏览器来进行测试了。

一般为了保证让尽可能多人可以正常访问我们部署的网站，需要在常用的一些浏览器程序上进行测试。

例如：IE浏览器，Edge浏览器，Chrome浏览器，Safari浏览器，Firefox浏览器。

在另外的计算机上安装好这些浏览器，然后输入网站地址，分别进行测试每一个页面，确保显示效果都是符合预期的。

这里课程的主要目的还是讲解编程，关于测试就不深入讲解了，等大家如果从事IT行业之后再进行深入学习。

课后练习

准备好100元钱放在支付宝里面，用于购买阿里云网站服务器。

往期教程

因为教程是系列教程，前后关联性非常强，请大家按照微信公众号【零基础学编程】的历史消息发布时间先后次序进行阅读。

述

在前端开发领域某些特性下需要依赖HTTPS，例如：navigator.geolocation.getCurrentPosition / new Notification 等。

由于大多数开发环境中都只是HTTP协议下，所以会导致调试比较困难，这个时候就需要给本地配置HTTPS了。

给本地配置SSL证书一般情况下都是自己生成自签名CA证书 , 这种方式最大的问题就是无法建立安全，然而这样并没有什么卵用。

为了解决这个问题, 这里使用了 mkcert。

mkcert是一个简单的零配置工具，可以使用您喜欢的任何名称制作本地可信赖的SSL开发证书，是Google某位工程师用Go开发出来的。

安装mkcert

Mac用户

brew install mkcert
brew install nss

Windows用户

前提先安装 Chocolatey

choco install mkcert

安装CA

mkcert自动在系统根存储中创建并安装本地CA

mkcert -install

生成证书

每个域名以空格进行分割，下面3个本地域名基本是能够满足大部分场景的，除非使用IP

mkcert localhost 127.0.0.1 ::1

会在当前目录下生成2个文件，生成的证书有效期是10年，足够用了，并且可以给本地所有端口使用，所以只生成一次即可。

配置HTTPS

有了证书之后就是配置的事情了，相当简单：

nginx

server {
 listen 7777;
 server_name localhost;
 ssl on;
 root html;
 index index.html index.htm;
 # 把生成的证书路径引入进来即可
 ssl_certificate ../localhost+2.pem;
 ssl_certificate_key ../localhost+2-key.pem;
 ssl_session_timeout 5m;
 ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
 ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
 ssl_prefer_server_ciphers on;
 location / {
 root /www;
 index index.html index.htm;
 }
}

node.js

Node不使用系统根存储，因此它不会自动接受mkcert证书。必须设置 NODE_EXTRA_CA_CERTS 环境变量:

export NODE_EXTRA_CA_CERTS="$(mkcert -CAROOT)/rootCA.pem"

const https=require('https');
const fs=require('fs');
const options={
 key: fs.readFileSync('../localhost+2.pem'),
 cert: fs.readFileSync('../localhost+2-key.pem')
};
https.createServer(options, (req, res)=> {
 res.writeHead(200);
 res.end('hello world\n');
}).listen(8000);

最后

生成的证书只能用于本地测试，不要在线上使用。

目前几乎所有的网站都开启了SSL，为了使自己在开发中方便调试，建议本地配置上，只是2分钟的事情。

一篇文章我给大家说明了如何从零开始搭建一个node的服务端框架，我们用到了Egg框架。Egg框架我不再过多介绍，如果有小伙伴想了解，可以回去看我以前写的文章，会有相关的介绍。这次我将在上次搭建的框架上进行延伸，讲一下如果用Egg框架连接数据库，并且实现对数据的增删查改。接下来我们直接进入主题。

安装数据库插件

我本次选用的数据库是MySQL。所以我们安装Egg官方的数据库插件即可，首先我们安装插件 egg-mysql 。我们在项目根目录打开命令提示符，输入命令行：npm i --save egg-mysql 。回车等待插件下载安装完成。

npm i --save egg-mysql

配置插件

命令行下载安装插件完成后，我们下一步的工作就是在项目中开启并配置egg-mysql插件。具体操作如下：

首先我们要在项目中开启数据库。找到项目中的/config/plugin.js文件我们需要在里面添加几行代码，如下所示。

//开启数据库插件
  mysql : {
    enable: true,
    package: 'egg-mysql',
  }

然后我们还要在 config/config.default.js 中配置各个环境的数据库连接信息。具体配置如下。

//添加数据库连接信息
  config.mysql={
    // 单数据库信息配置
    client: {
      // host
      host: 'localhost',
      // 端口号
      port: '3306',
      // 用户名
      user: 'root',
      // 密码
      password: '123456',
      // 数据库名
      database: 'testdb',
    },
    // 是否加载到 app 上，默认开启
    app: true,
    // 是否加载到 agent 上，默认关闭
    agent: false,
  };

到此步骤我们的数据库插件已经安装完成并且配置好了。那我们怎么实现数据的增删查改呢？大家请继续往下看。

数据操作-新增用户

首先我们看一下怎么新增数据。我们在mysql的testdb实例中新建一个user空表。如下图所示。

我们的egg框架也遵循MVC的架构所以我们一般会在service层里面写我们逻辑处理的代码，而controller层则是获取前端数据，回传数据的控制层。所以我们操作数据库的代码是写在service文件夹里面的。

我们在app/service文件夹里面新建一个user.js文件。在里面写个新增用户的方法，该方法就是把数据存到数据库中。具体代码如下。

const Service=require('egg').Service;

class UserService extends Service {

  //新增用户data是有controller层传递过来的数据记录。
  async addUser(data) {

    const {ctx, app}=this;
    let result={};
    try {
      data.id=0;//定义id=0，因为数据库已经设置id为主键，并且自增。所以只需要赋值0即可。
      // 在 user 表中，插入前端提交上来的数据记录
      const info=await app.mysql.insert('user', data); 
  
      //插入成功后。
      if(info.affectedRows===1){
        //给前端返回一个Json的对象
        result={
          state: 0, //自定义的状态码
          msg: "添加成功", //返回的消息
          data: info.insertId, //新增的记录的id
        }
      }

    } catch (err) {
      //插入数据失败的返回结果
      result={
        state: 1, 
        msg: err,
        data: null,
      }
    }
    
    return result
  }
};
module.exports=UserService;

然后我们在app/controller文件夹里新建一个user.js文件。在这里我们需要获取前端提交上来的数据，并且将数据处理的结果返回给前端。具体代码如下。

'use strict';

const Controller=require('egg').Controller;
/**
 * @Controller 用户管理
 */
class UserController extends Controller {

  /**
  * @summary 新增用户
  * @router post /user/add
  * @request body userAddRequest 
  * @response 200 
  */
  async addUser() {
    const { ctx }=this;

    //通过ctx.request.body的方式，可以获取到前端post方式提交上来的数据
    const data=ctx.request.body;

    //调用service层的addUser方法。并且返回相应的结果
    const userInfo=await ctx.service.user.addUser(data);
    
    //向前端接口响应数据。
    ctx.body=userInfo;
  }

}

module.exports=UserController;

最后我们定义一个路由，让前端请求访问此路由。框架会监听路由是否被访问，如果被访问了则会调用我们定义在controller层的新增用户的方法。我们在app/router.js文件中添加如下代码，即可完成路由的定义。

//新增用户路由
  router.post('/user/add', controller.user.addUser);

完成这步骤后，我们一个新增用户的功能就已经完成了。接下里我们就测试一下它的实际效果。我们运行命令：npm run dev。启动项目，然后打开网页http://127.0.0.1:7001，可以直接在swagger-ui.html页面中进行测试。结果如下图所示。

经过测试，数据已经添加完成。所以数据库连接也是正常的。

本次分享暂时先告一段落。请各位小伙伴抬起你们发财的小手，点个赞呗。下次我将会进行和大家分享对数据查改删的方法。关注我！！！更多精彩分享不迷路。

在线咨询

上一篇：Python数据处理库pandas入门教程
下一篇：用 JavaScript 运行上世纪 90 年代的

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商