前后端分别部署教程 ---- 第二部分相关软件安装

2. 相关软件安装

2.1 JDK

我安装的是 Open JDK 11.

2.1.1 下载解压

Open JDK 官网：http://jdk.java.net/ ，根据需要下载对应的版本。我下载的是 11版的压缩包，解压后即可用。

2.1.2 配置环境变量

1. 选中计算机右击，点击属性：

   

2. 在弹出的系统对话框中，点击左边的 ”高级系统设置“ ----》 ”环境变量“ ----》 ”用户变量“ ：

   

3. 配置变量：

   1. 变量名： JAVA_HOME
      变量值： D:\Java\jdk-11   （jdk 的路径）
   
   2. 变量名： CLASSHOME
      变量值： .   （暂时不需要关心）
   
   3. 变量名： Path
      变量值： .;%JAVA_HOME%\bin    （第一个 . [点]表示:当前目录， ；[分号]表示:两个路径之间的分隔符，%JAVA_HOME% 表示:将JAVA_HOME这个变量的值拿过来， \bin 表示:JAVA_HOME这个变量所表示的路径底下有个bin目录）
   

2.2 MySQL

官网下载地址：https://dev.mysql.com/downloads/mysql/，根据需要下载版本，我这里介绍是压缩包安装配置教程。

1. 解压zip包到安装目录

2. 配置环境变量

   将解压后的bin路径添加到环境变量的path里面，如下：

   变量名：Path
   变量值：.....（之前其他程序路径）;D:\Databases\mysql-8.0.20-winx64\bin;
   

3. 配置初始化的my.ini文件

   注意：在文件夹扩展名一定要打开

   在安装根目录下添加 my.ini（新建文本文件，将文件类型改为.ini），写入基本配置：

   [mysqld]
   # 设置3306端口
   port=3306
     
   # 设置mysql的安装目录
   basedir=E:\SQL\MySQL\mysql-8.0.16-winx64 # 根据自己的地址更改
     
   # 设置mysql数据库的数据的存放目录
   datadir=E:\SQL\MySQL\mysql-8.0.16-winx64\data # 根据自己的地址更改
     
   # 允许最大连接数
   max_connections=200
     
   # 允许连接失败的次数。这是为了防止有人从该主机试图攻击数据库系统
   max_connect_errors=10
     
   # 服务端使用的字符集默认为UTF8
   character-set-server=utf8
     
   # 创建新表时将使用的默认存储引擎
   default-storage-engine=INNODB
     
   # 默认使用“mysql_native_password”插件认证
   default_authentication_plugin=mysql_native_password
     
   [mysql]
   # 设置mysql客户端默认字符集
   default-character-set=utf8
     
   [client]
   # 设置mysql客户端连接服务端时默认使用的端口
   port=3306
   default-character-set=utf8
   

4. 新建 data 目录

   

5. 安装 mysql

   在安装时，必须以管理员身份运行cmd，否则在安装时会报错，会导致安装失败的情况.

   • 初始化数据库:

     在MySQL安装目录的 bin 目录下执行命令：

     mysqld --initialize --console
     

     执行完成后，会打印 root 用户的初始默认密码，一定要复制到其他地方待用，不然你就要重来了。

   • 安装服务

     在MySQL安装目录的 bin 目录下执行命令：

     mysqld --install [服务名]      #后面的服务名可以不写，默认的名字为 mysql。
     

   • 启动：通过命令 net start mysql 启动MySQL服务

   • 停止：通过命令 net stop mysql 停止MySQL服务

   • 卸载：如果之前需要卸载之前的 mysql，可以通过命令 sc delete MySQL / mysqld -remove 卸载 MySQL 服务

   • 更改密码

     在MySQL安装目录的 bin 目录下执行命令：

     mysql -u root -p
     

     这时候会提示输入密码，记住了上面安装时的密码，填入即可登录成功，进入MySQL命令模式。

     如果报此类错误：

     Enter password: ************
     ERROR 2003 (HY000): Can't connect to MySQL server on 'localhost' (10061)
     

     win + r 输入 services.msc 启动 mysql 服务.

     在MySQL中执行命令：

     ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '新密码';
     

     修改密码，注意命令尾的；一定要有，这是mysql的语法。操作无误会提示你 “Query OK, 0 rows affected (0.01 sec)”

     输入 ‘\t’ 退出 mysql， 也可输入 help 选择帮助。

2.3 Navicat

1. 下载 Navicat Premium

   官网：https://www.navicat.com.cn/products，下载最新版本，直接按提示安装好，用于数据库图形化界面操作。

2. 破解版

   如果需要注册机破解，可联系我。但声明：360安全卫士等软件会视其为病毒将其隔离，要解除隔离才能用。至于担心它真的是病毒，那就去买正版的用也行。

2.4 Node

2.4.1 下载

官网下载地址：https://nodejs.org/zh-cn/download/，根据自己需要下载相应版本格式。

.msi和.zip格式区别：

• .msi是Windows installer开发出来的程序安装文件，它可以让你安装，修改，卸载你所安装的程序。说白了.msi就是Windows installer的数据包，把所有和安装文件相关的内容封装在一个包里。
• .zip是一个压缩包，解压之后即可，不需要安装

注意：阿里云的云服务器win server2012只能安装v12.16.2以下的node，不支持太高版本的。

2.4.2 解压、配置环境变量

解压zip包到安装目录，将解压后的node根目录路径添加到环境变量的path里面，如下：

变量名：Path
变量值：.....（之前其他程序路径）;C:\Applications\node-v12.16.1-win-x64;

2.4.3 检测是否安装成功

既然已经将node添加到全局系统变量，我们可以直接在CMD窗口中任意位置执行node，打开CMD窗口，执行命令 node -v 查看node版本；

最新版的node在安装时同时也安装了npm，执行npm -v查看npm版本；

只要能成功的看到输出的版本号，即表示已经安装成功；

2.5 Tomcat

2.5.1 下载

官网在下载地址：http://tomcat.apache.org/，根据需求下载相应版本格式.

我下载是压缩包，这里介绍压缩包版的安装配置教程.【缺点：一旦关闭命令提示符窗口，tomcat即关闭】

2.5.2 解压配置环境变量

1. 压缩包解压

2. 配置环境变量：

   • 在用户或者系统的环境变量下选择新建：

     • 变量名：CATALINA_HOME
     • 变量值：E:\Program Files\Apache Software Foundation\apache-tomcat-7.0.77（tomcat的路径）

   • 然后在用户变量或者系统变量中找到path环境变量选择编辑 在变量值的最后输入: %CATALINA_HOME%\bin;

2.5.3 启动

方法一：

• 在 E:\Program Files\Apache Software Foundation\apache-tomcat-7.0.77\bin 目录下，找到 startup.bat 直接双击启动即可。【推荐】

  

方法二：

• 在tomcat的bin的路径中 E:\Program Files\Apache Software Foundation\apache-tomcat-7.0.77\bin，进入cmd（即在路径栏敲cmd回车）

• 在命令提示符中输入：catalina.bat run，即可启动【catalina.bat 是tomcat的核心，引擎】；

  也可以输入：startup.bat，即可启动；

检查是否启动成功：

• 在浏览器中可以查看 tomcat 是否成功启动：http://localhost:8080/ ；

• 也可以使用 IPv4的环回地址 访问：http://127.0.0.1:8080/；

• 或使用 本机IP 访问：http://192.168.43.118:8080/ 【192.168.43.118是本机IP，可以在cmd中输入ipconfig，找到 IPv4 地址（即本机IP）】；

2.5.4 Tomcat 在命令提示符的乱码问题

要在 E:\Program Files\Apache Software Foundation\apache-tomcat-7.0.77\conf目录下找到 logging.properties文件，

将里的 java.util.logging.ConsoleHandler.encoding = UTF-8 改为

java.util.logging.ConsoleHandler.encoding = GBK

2.5.5 进入 Server Status 和 Host Manager

要在 E:\Program Files\Apache Software Foundation\apache-tomcat-7.0.77\conf目录下找到 tomcat-users.xml文件，

在里面 倒数第二行 ，即</tomcat-users>之前添加：

<role rolename="manager-gui"/> <!-- Server Status 需要 -->
<role rolename="admin-gui"/> <!-- Host Manager 需要 -->

<user username="tomcat" password="1" roles="manager-gui,admin-gui"/>
<!-- Server Status 和 Host Manager 需要 -->

2.6 Nginx

2.6.1 下载

官网下载地址：http://nginx.org/en/download.html，根据需要下载相应的版本.

• nginx-X.XX.XX为 Unix / Linux / macOS 系统适用的版本 （其中的 X.XX.XX 为版本号）
• nginx/Windows-X.XX.XX为 Windows 系统适用的版本（其中的 X.XX.X 为版本号）

获取到压缩包后即可安装了，我这里介绍的是Windows系统的nginx安装教程。

2.6.2 安装

不论是 Unix / Linux / macOs 还是 Window 系统，只需要将 nginx 解压即可使用。

2.6.2.1 解压安装

将 nginx-X.XX.XX.zip 压缩包解压到 X:applications目录下，解压后的目录如下：

通常，我们将解压后得到的目录 (比如 C:\applications\nginx-1.17.9 ) 称作 nginx 主目录。

为了方便描述，下文中将 Nginx 主目录称作 NGINX_HOME 。

因为 nginx 内部使用的是相对路径，所以不论是启动 nginx 还是关闭 nginx ，都要首先进入到 Nginx 主目录 ( NGINX_HOME )中后再执行启动或关闭操作，否则可能导致无法读写相关的文件。

解压完毕即为安装完毕.

2.6.2.2 查看版本

通过 nginx -v可以查看当前 nginx 的版本信息:

C:\applications\nginx-1.17.9>nginx -v
nginx version: nginx/1.17.9

2.6.2.2 验证配置

通过 nginx -t 可以验证配置是否正确：

C:\applications\nginx-1.17.9>nginx -t
nginx: the configuration file C:\applications\nginx-1.17.9/conf/nginx.conf syntax is ok
nginx: configuration file C:\applications\nginx-1.17.9/conf/nginx.conf test is successful

2.6.3 启动

(本机的nginx 端口号 已改为： 8383)

因为 nginx 内部使用的是相对路径，所以启动 Nginx 时首先要进入到 Nginx 的主目录。

2.6.3.1 直接双击 ngin.exe 程序启动

直接双击nginx.exe，双击后一个黑色的弹窗一闪而过

2.6.3.2 使用命令提示符启动

在 计算机（电脑中 打开 nginx 目录，随后在 地址栏 中输入 cmd 回车，打开命令提示符，即默认已经进入到 nginx 主目录中。

• 在 命令提示符 中输入 dir 即可查看 nginx 主目录下所有的 条目：

D:\applications\nginx-1.17.10>dir
 驱动器 D 中的卷是 软件
 卷的序列号是 34E3-F0F2
 
 D:\application\nginx-1.17.10 的目录
 
2020/04/17  11:12     <DIR>           .
2020/04/17  11:12     <DIR>           ..
2020/04/17  11:12     <DIR>           conf
2020/04/17  11:12     <DIR>           contrib
2020/04/17  11:12     <DIR>           docs
2020/04/17  11:12     <DIR>           html
2020/04/17  22:20     <DIR>           logs
2020/04/17  22:11          3,716,608  nginx.exe
2020/04/17  22:20     <DIR>           trmp
			   1 个文件        3,716,608  字节
			   8 个目录   59,750,830,080  可用字节

1. 使用 start 命令启动 nginx

稍后在 命令提示符中通过以下命令来启动 nginx：

D:\applications\nginx-1.17.9> start nginx

因为 nginx 内部使用的是相对路径，所以不论是启动 nginx 还是关闭 nginx ，都要首先进入到 nginx 的主目录。

所以这里保证在 nginx 主目录 ( D:\applications\nginx-1.17.9> ) 的前提下，执行 start nginx 命令

2. 使用 nginx.exe 启动 nginx

在 命令提示符 中确保已经进入到 nginx 主目录 ( NGINX_HOME ) ，随后通过以下命令可以启动 nginx :

D:\applications\nginx-1.17.9> nginx.exe

以上写法等同于:

D:\applications\nginx-1.17.9> nginx

不论是 nginx.exe 还是 nginx 最终都是通过执行 nginx.exe 来启动 nginx 。

如果期望在启动 nginx 的同时在NGINX_HOME下的logs目录中创建 nginx.pid ，可以使用:

D:\applications\nginx-1.17.9> nginx  -c  conf/nginx.conf

随后在整个 nginx 运行期间，NGINX_HOME/logs/nginx.pid 都将存在。

2.3.3.3 查看任务进程是否存在

用dos或打开任务管理器都行

tasklist /fi "imagename eq nginx.exe"

如果都不存在，可能是启动报错了查看一下日志，在nginx目录中的logs文件夹下error.log是日志文件

常见的错误：

(1)端口号被占用

(2)nginx文件夹路径含中文

其他错误就详细看log中的描述

2.6.3.4 修改端口号

修改配置文件，进入解压缩目录，直接文件夹点击进去即可，不需要从dos操作

【修改配置文件时，先备份】

在 conf 目录下找到 nginx.conf 使用 txt文本打开 即可，找到server这个节点，修改端口号，如果有需求可以 修改主页目录 没有就不用修改

修改完成后保存，使用以下命令检查一下配置文件是否正确，后面是nginx.conf文件的路径，successful就说明正确了

nginx -t -c /nginx-1.15.2/conf/nginx.conf

如果程序没启动就直接start nginx启动，如果已经启动了就使用以下命令重新加载配置文件并重启

nginx -s reload

之后就打开浏览器访问刚才的域名及端口http://localhost:8800，出现欢迎页就说明部署成功了

2.6.4 关闭

因为 nginx 内部使用的是相对路径，所以关闭 Nginx 时首先要进入到 Nginx 的主目录。

2.6.4.1 正常退出

在 命令提示符 中确保已经进入到 Nginx 主目录 ( NGINX_HOME ) ，通过以下命令可以正常退出 nginx:

D:\applications\nginx-1.17.9> nginx -s quit

所谓正常退出 nginx 是指让 nginx 完整有序地退出，退出之前将所有的善后工作全部完成。

2.6.4.2 快速停止

在 命令提示符 中确保已经进入到 Nginx 主目录 ( NGINX_HOME ) ，通过以下命令可以快速停止 nginx:

D:\applications\nginx-1.17.9> nginx -s stop

所谓快速停止 nginx 是指让 nginx 进程立即退出，退出之前不必完成善后工作。

2.6.5 重新加载

当 nginx 的配置文件发生更改时，如果希望重新读取配置文件但不关闭 nginx ，可以使用以下命令实现:

D:\applications\nginx-1.17.9> nginx -s reload

通过 nginx -s reload 命令可以实现重新加载配置文件，从而不必先关闭 nginx 再启动 nginx 。

2.6.6 配置环境变量

因为 关于 启动 或 关闭 nginx 的命令是要在 其主目录底下 操作，故而，为了消除这一繁琐的限制，所以为其 配置环境变量，这样就可以在 命令提示符 的任意目录下 实现 nginx 的启动或关闭 命令。

步骤：

电脑（计算机） 右击 属性 -》 在弹出的 系统窗口 中 -》 高级系统设置 -》 在弹出的 系统属性 对话框中 选 高级 -》 选 环境变量

系统变量 尽量不要动

设置用户变量：
-- 若没有 Path，则新建一个。  变量名：Path   变量值：即某个软件路径（不要使用中文）
-- 若存在 Path，则编辑。  在 变量值 最前 或 最后 添加 路径 并加上 分号“;”(D:\applications\nginx-1.17.10;)


然后，电脑 注销（或重新启动）才能生效。

但实际上，期望通过配置 Path 变量来实现任意位置都可以执行 nginx.exe 的做法是不合适的.

因为 nginx 内部使用的是相对路径，所以不论是启动 nginx 还是关闭 nginx ，如果没有首先进入到 nginx 的主目录，都则会导致相关文件读写失败，比如尝试在 C 盘 根目录下执行 nginx 命令可能会提示以下错误信息:

C:\> nginx
nginx: [alert] could not open error log file: CreateFile() "logs/error.log" failed (3: The system cannot find the path specified)
2020/04/16 23:56:14 [emerg] 2632#812: CreateFile() "C:\/conf/nginx.conf" failed (3: The system cannot find the path specified)

所有操作统统地进入到 NGINX_HOME 中再执行。

2.6.7 nginx 配置文件

现阶段，我们仅将 Nginx 当做一个 HTTP 服务器来使用，因此暂时不会提供太多配置。

为了我们在 VSCode 中开发的页面能够在被 Nginx 所管理，以便于将来通过访问 Nginx 来打开 VSCode 中所开发的页面，我们需要修改 Nginx 主目录 ( NGINX_HOME ) 下 conf 目录中的 nginx.conf 文件 。

修改 NGINX_HOME/conf/nginx.conf 之前，首先将该文件备份 ( 复制一份并重命名 nginx.conf.default ) 。

随后将 NGINX_HOME/conf/nginx.conf 修改为以下形式:

worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    sendfile        on;

    keepalive_timeout  65;


    server {
        listen       80;
        server_name  localhost;

        location / {
            root D:/front ;
            index  index.html index.htm;
        }

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

    }

}

以上内容中 server 内部第一个 location 中的 root 用于指定 根目录 (即通过浏览器访问Nginx的HTTP服务时对应的最顶层目录)，这里指定为 VSCode 对应的目录(即在VSCode中打开的目录):

root D:/front ;

注意 root 和 相应目录之间使用 空格隔开，最后以分号结束。

另外 server 内部第一个 location 中的 index 用于指定 根目录 中默认的首页名称:

index  index.html index.htm;

通过 VSCode 打开 D:/front 目录后，在该目录下创建名称为 index.html 或 index.htm 的页面，即可在启动 Nginx 后，在浏览器中通过 localhost 或 127.0.0.1 直接访问到 index.html 或 index.htm 。

此时，在浏览器中访问localhost 等同于访问localhost/index.html 或 localhost/index.htm 。

修改设置后重启 Nginx 或者 重新加载配置文件，

即可在浏览器中通过访问 Nginx 的方式访问由 VSCode 开发的页面。

如下操作：

【修改配置文件时，先备份】

修改配置文件，进入解压缩目录，直接文件夹点击进去即可，不需要从dos操作

在 conf 目录下找到 nginx.conf 使用 txt文本打开 即可，找到server这个节点，修改默认网页。

将 root html 中的 html 改为 自己的文件 路径

或者

修改 root html中的 html 文件中的 index.html 修改为 自己写的 index.html

若要在 nginx 中直接访问自己写好的 网页

可以先打开 nginx

http://localhost:8383/（进入到默认页面）

然后，在 上面的网址后面 直接写路径 访问即可 http://localhost:8383/test/0314.html

注意：

要在自己设置的路径目录中，有一个 index.html。

或者

在配置文件中，修改 默认网页 名称，即 修改 index index.html index.htm; 的三个 index名字，替换成自己的写的网页名字。

如果大家都是使用 同一个 局域网（同一个 WIFI），只要 告诉其 自己的IP地址（内网的IP地址）

2.6.8 在网页中预览 nginx

方法一：

​ localhost:8383 （默认端口是80 [是可以不用写出端口号的，但如果不是默认的，则每次都要输入端口号]，但由于端口被占用的问题，我的电脑 nginx 的端口号改为 8383）

方法二：

​ 127.0.0.1:8383 （默认端口是80 ,是可以不用写出端口号的，但如果不是默认的，则每次都要输入端口号；127.0.0.1 是系统给本机留的IP，自己登录本机 只需： http://127.0.0.1//)

2.6.9 查看本机IP地址

2.6.9.1 Unix

在 Unix 、Linux 、macOS 操作系统中可以通过 ifconfig 命令来查看本机IP地址:

ifconfig -a

比如:

HAN@China ~ % ifconfig -a
lo0: flags=8049<UP,LOOPBACK,RUNNING,MULTICAST> mtu 16384
	options=1203<RXCSUM,TXCSUM,TXSTATUS,SW_TIMESTAMP>
	inet 127.0.0.1 netmask 0xff000000 
	inet6 ::1 prefixlen 128 
	inet6 fe80::1%lo0 prefixlen 64 scopeid 0x1 
	nd6 options=201<PERFORMNUD,DAD>
gif0: flags=8010<POINTOPOINT,MULTICAST> mtu 1280
stf0: flags=0<> mtu 1280
en0: flags=8963<UP,BROADCAST,SMART,RUNNING,PROMISC,SIMPLEX,MULTICAST> mtu 1500
	options=400<CHANNEL_IO>
	ether f4:5c:89:a9:99:45 
	inet6 fe80::1cdd:cf64:88e:4300%en0 prefixlen 64 secured scopeid 0x4 
	inet6 2408:84fb:208:bb63:1cc7:9ff0:676a:d1f5 prefixlen 64 autoconf secured 
	inet6 2408:84fb:208:bb63:bde9:776f:567f:6d69 prefixlen 64 autoconf temporary 
	inet 192.168.43.102 netmask 0xffffff00 broadcast 192.168.43.255
	nd6 options=201<PERFORMNUD,DAD>
	media: autoselect
	status: active
awdl0: flags=8943<UP,BROADCAST,RUNNING,PROMISC,SIMPLEX,MULTICAST> mtu 1484
	options=400<CHANNEL_IO>
	ether 26:af:c0:c6:3f:14 
	inet6 fe80::24af:c0ff:fec6:3f14%awdl0 prefixlen 64 scopeid 0x9 
	nd6 options=201<PERFORMNUD,DAD>
	media: autoselect
	status: active
llw0: flags=8863<UP,BROADCAST,SMART,RUNNING,SIMPLEX,MULTICAST> mtu 1500
	options=400<CHANNEL_IO>
	ether 26:af:c0:c6:3f:14 
	inet6 fe80::24af:c0ff:fec6:3f14%llw0 prefixlen 64 scopeid 0xa 
	nd6 options=201<PERFORMNUD,DAD>
	media: autoselect
	status: active

2.6.9.2 Windows

在 Windows 系统中，可以在 命令行提示符 中通过 ipconfig 命令来查看本机IP地址:

ipconfig  /all

比如:（主要看 IPv4 地址（我们需要告诉别人的自己的IP地址），如 ：192.168.50.26）

在网页中 可以输入 192.168.50.26:8383（默认端口是80 ,是可以不用写出端口号的，但如果不是默认的，则每次都要输入端口号）

把这个IP地址告诉别人，他们就可以访问 自己的 nginx 的页面（若要具体到某个页面，还得在其后面加路径）

若不成功，可能是电脑上 安装 nginx 的时候，防火墙拦截的时候，要允许。

2.7 ngrok

ngrok 是一个外网映射工具，简单来说就是：使用ngrok ，它会给你生产一个域名，这样别人就可以通过这个域名来访问你的电脑了。

不过我这里使用它是因为想把项目页面挂在公众号上，从而可以调用微信的扫一扫接口。而微信公众号的接口配置中，URL必须填写域名格式，因此用ngrok 将服务器进行内网穿透，使其内网可以映射到ngrok给的域名上。

2.7.1 下载安装

1. 官网下载地址：https://ngrok.com/，点击 "Download"进入下载页面.

   

2. 可以直接点击 “Download for Windows” 下载，也可以点击其右边的 “MORE OPTIONS” 选择其他系统版本。

   

2.7.2 使用

1. 下载后可以直接解压，会得到一个 ngrok.exe 可执行文件，暂时先不用点击运行；

2. 登录ngrok：因为ngrok服务器在国外，直接注册ngrok账号可能会不成功。可以使用GitHub或Google账号进行登录即可。

   

3. 查看自己的ngrok的授权码并复制.

   

4. cmd进入到 ngrok.exe 所在的目录下，然后在cmd中执行：ngrok authtoken 授权码，执行完成之后，再执行ngrok.exe.

5. 在 cmd 中执行：ngrok http 想要放开的端口号，然后就会随机生成一个动态的网址：

   

注意：窗口不要关闭，关闭表示映射结束！！！

以上内容是自己整理总结的，若有不对的地方，欢迎大家指出，一起学习交流。

上一篇：前后端分别部署教程 ---- 第一部分服务器
下一篇：前后端分别部署教程 ---- 第三部分项目部署和挂载到微信公众号