GitBook使用教程（使用Nginx实现本地网页部署）

作者: 微笑的鱼23333 | 来源:发表于2020-01-15 23:21 被阅读0次

GitBook使用教程（使用Nginx实现本地网页部署）
gitbook使用入门
GitBook 使用教程
docker之nginx容器https访问
2.文档 - gitbook - 命令
在Nginx中配置SSL证书
210318:使用nginx部署多个前端项目-网页url太长怎么
gitbook的使用
GitBook 使用教程
gitbook使用教程

前面提到GitBook的基本使用方法。不了解的同学可以继续学习。

这一节我们来玩玩更高级的。在Windows下部署GitBook电子书，当然在Linux和Mac系统下操作类似，感兴趣的同学可以试着按照以下的步骤操作一下。

首先我们来解释以下什么叫做部署GitBook电子书？熟悉GitBook操作的同学可能知道，我们构建了一个GitBook工程，在本地是如何跑起来呢？

运行gitbook serve命令行，默认在localhost的4000端口
在浏览器打开localhost:4000端口访问我们构建的GitBook网站

以上有个比较烦的问题就是：你始终得挂着命令行以保证GitBook进程长期活跃在后台，否则无法通过浏览器访问电子书内容(当然你也可以写个脚本用nohup长期运行在后台进程)。

那么，对本章内容来说，什么叫做部署GitBook电子书呢？

其实就是在浏览器上通过localhost/IP+端口号的方式可以访问自己搭建的电子书。读完本章内容，你可以做到以下几件事：

不用每次在本地运行gitbook serve命令就可以通过IP+端口号的地址来浏览自己构建的电子书网站
可以通过localhost:port/mywebiste1和localhost:port/mywebiste2分别访问mywebsite1和mywebsite2两个GitBook工程。

本章教程的核心重点主要是实现上面的两个功能，而实现这个功能的核心就是一个叫做Nginx的开源软件。

Nginx简介

Nginx是一个开源软件，由俄罗斯人开发。这个软件正活跃于企业服务器领域，目前的主要应用方向是实现高并发、反向代理和静态网页的部署。

就在前几天，Nginx作者在俄罗斯被捕，作者曾在某公司内任职期间开发出Nginx，十多年后的今天，这个公司表示作者在工作期间内开发出Nginx，软件版本应该归属于这家公司。----哇，俄罗斯人真的好棒棒！

无论如何，Nginx是一个值得学习的开源软件。从2004年Nginx诞生一直到今天，在很多互联网企业的网站开发中，PHP+Nginx+MySQL的后台开发模式都非常流行。在这种开发模式下PHP用来开发后台，Nginx用作扛并发、反向代理和静态资源部署，MySQL实现数据库存储。

当然了，作为一个程序员或者码农，我们总记得耳边隐隐约约回荡着一句话：

PHP是地球上最好的编程语言。

开完玩笑干正事，对于Nginx，我这里就不慢慢讲解原理机制了，有兴趣的同学可以自己寻找学习资料。在本章内容中我们用到Nginx的功能主要是上面提到的静态网站部署。

什么叫做静态网站部署

假设我们在服务器上有个文件夹比如叫做mywebsite，这个目录里有很多HTML文件，当然，少不了各种css和js文件，还有各种图片。通常在这个目录下面有个index.html或者index.htm的文件，这个index文件是这个站点的首页内容。现在这个主机在局域网中的IP地址是192.168.1.100，通过nginx的静态网站部署技术，我们在当前局域网的浏览器上能通过192.168.1.100:8080/mywebsite这样的地址来访问这个站点的内容。

简单讲，静态网站部署就是将一个主机上的文件夹下的静态资源(网页，图片，css等)映射成一个URI路径(最常见的映射成一个http地址)，这样其他客户端能通过这个URI路径来访问这个主机下的静态资源。

这里的主机可以是远程的服务器，当然也可以是我们自己的电脑，因为我们的本地主机名字叫做localhost。

下载安装Nginx

这里讲Windows系统下的Nginx下载安装，下载完解压就可以使用了。

Linux用户或者MacOS用户需要下载安装包，然后自己配置编译脚本和配置参数，安装过程有点麻烦，请自己想办法哈哈。

先打开Nginx官网的下载页面http://nginx.org/en/download.html，选择Windows下的稳定版本，如下图所示：

nginx_download.png

下载完解压到自己的本地文件夹，假设就放在D:/nginx-1.16.1下，当前文件目录如下：

nginx_dir.png

准备工作就完成了，太简单了吧哈哈哈。

新建一个简单的GitBook工程

我们在D盘新建一个GitBook工程并且初始化。我这里的文件夹叫做mywebsite。

在mywebsite目录下执行以下操作(我都是在Git Bash命令行操作的)：

初始化工程

执行以下命令:

gitbook init

命令执行完成后会生成README.md和SUMMARY.md两个文件。如下图所示：

init.png

我们只是演示如何部署GitBook工程，先不编辑文件内容。

构建工程

运行以下命令:

gitbook build

构建完成后会发现多了个_book文件夹，如下图所示：

build.png

下面开始我们本章的重点内容，静态网页部署。我们需要做的事情是：

每次修改完GitBook中的md文件，运行一下gitbook build命令就可以，不用再运行gitbook serve
在本地浏览器能通过localhost:port/mywebsite来访问，对于局域网中的其他用户，可以通过192.168.1.100:port/mywebsite。

这里的192.168.1.100是指局域网中的ip地址，在Windows系统下cmd中运行ipconfig查看，在Linux或者MacOS中通过ifconfig查看。

部署开始

修改Nginx的conf文件
第一步，我们先找到Nginx安装目录的配置文件目录下的conf文件夹，里面有个nginx.conf文件，如图：

nginx_conf_ls.png

打开nginx.conf文件，我们可以看到里面有个叫做server的节点内容如下：

nginx_port.png

在这个server节点下复制一个server节点信息，如下图所示：

# 这是nginx的默认配置信息，不要随意修改任何内容
server {
      listen       80;
      server_name  localhost;

      location / {
           ...
      }
 }

# 以下内容为新增的配置信息
server {
      # 这个端口可以随意指定，0-1024是系统端口，80和8080端口是常见的http通讯端口，避免用这几个敏感的端口号就行
      listen       8888;             
      server_name  localhost;

      location /mywebsite {
           # 这个路径是关键，就是GitBook工程下build出来的_book目录，需要运行gitbook build命令自动生成
           alias D:/mywebsite/_book;
           index  index.html index.htm;
           autoindex on;
      }
 }

启动Nginx服务

在Nginx安装目录下面点击nginx.exe启动服务：

nginx_start.png

打开浏览器访问

在浏览器输入http://localhost:8888/mywebsite，看是不是可以访问GitBook网站了呢？

这里需要注意以下几点：

localhost和192的局域网ip是一样的效果，如果需要提供地址给局域网中的其他用户访问，请使用局域网中的ip地址不要用localhost
端口号8888对应上面的配置文件中的server配置信息的端口号配置
部署多个GitBook工程

经过以上的步骤，我们通过http://localhost:8888/mywebsite来访问D:/mywebsite目录下的GitBook网站，那么假设我们本地有多个GitBook工程构建，应该如何配置呢？

如果以上的流程都跑通了，那么这一步很简单。

新建新的GitBook工程

这里简单起见，就复制刚才新建的GitBook工程，也就是D:/mywebsite文件夹，复制完成后重命名为D:/mywebsite2。这样我们有了两个独立的GitBook电子书网站了。假设现在我想实现以下功能：

通过http://localhost:8888/mywebsite来访问D:/mywebsite下的GitBook站点
通过http://localhost:8888/mywebsite2来访问D:/mywebsite2下的GitBook站点

以上的功能该如何实现呢？

其实很简单，打开nginx.conf文件，刚才我们新增的server节点配置如下：

server {
      listen       8888;             
      server_name  localhost;

      location /mywebsite {
           alias D:/mywebsite/_book;
           index  index.html index.htm;
           autoindex on;
      }
 }

在以上的配置信息中，我们已经设置了mywebsite的访问方式，我们如果需要访问mywebsite2的话，新增一个location配置项就可以，修改后的配置信息如下：

server {
      listen       8888;             
      server_name  localhost;

     location /mywebsite {
           alias D:/mywebsite/_book;
           index  index.html index.htm;
           autoindex on;
     }
     
     # 以下为新增配置信息 
     location /mywebsite2 {
           alias D:/mywebsite2/_book;
           index  index.html index.htm;
           autoindex on;
     }
 }

在任务管理器中杀死nginx.exe进程后，重新点击nginx.exe启动服务，然后打开浏览器分别输入以下网址，自己看看效果如何：