Spring Cloud + Vue前后端分离-第17章 生产打包与发布

 源代码在GitHub - 629y/course: Spring Cloud + Vue前后端分离-在线课程

Spring Cloud + Vue前后端分离-第17章 生产打包与发布

17-1 注册中心+配置中心Nacos

注册中心

Nacos 快速开始 | Nacos

本节内容：使用nacos作注册中心+配置中心，不用eureka

Nacos discovery · alibaba/spring-cloud-alibaba Wiki · GitHub

pom.xml(course)

1.将system模块注册中心改为nacos

将system模块的注册中心，从eureka改为nacos

<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>
</dependency>

pom.xml(system)

application.properties

SystemApplication.java

这里建议在启动之前将system模块clean一下，防止target里还有eureka相关的代码，导致启动报错。

服务启动之后，就可以成功看到注册到nacos上了 

1.将gateway,file,business三个模块注册中心改为nacos

business,file,gateway都更换为nacos注册中心

application.properties(business)

application.properties(file)

application.properties(gateway)

BusinessApplication.java

FileApplication.java

GatewayApplication.java

pom.xml(business)

pom.xml(file)

pom.xml(gateway)

gateway,system,business,file四个都先clean一下，再启动。

17-2 注册中心+配置中心Nacos2 

放到了github上，阿里云会去扫描各种远程仓库开放出来的源码。他扫到了我的oss相关的key,认为我的key泄漏了，所以经常邮件、短信、电话通知我。

需要一个配置中心，将特殊的配置放到配置中心，而不是放到源码中。

对公司来说，开发人员能看到所有生产的数据库地址、用户名、密码是不安全的，为了避免程序员删除库跑路，需要将生产配置放到配置中心，只有有权限的人才能登录配置中心修改配置。

配置中心 

Nacos config · alibaba/spring-cloud-alibaba Wiki · GitHub

pom.xml(system)

可以跟正常使用application.properties的写法是一样的，用@Value注解，具体看后面的演示

Spring Boot中有两种上下文，一种是bootstrap,另外一种是application,bootstrap 是应用程序的父上下文，bootstrap 优先级高于application。bootstrap 主要用于从额外的资源来加载配置信息。

bootstrap.properties

接下来，写一个测试请求TestController,用来读取配置中心刚配好的system.test的值

@Value 注解需要记住，用法：@Value("${xxx}"),也可以使用带默认值的写法，比如:

@Value("${system.test:TEST}"),当没有写system.test配置项时，就用"TEST"

TestController.java

启动SystemApplication

这个测试读出来的就是我们的配置值

那么我们怎么做到动态的刷新呢？

1.system连接nacos配置中心

实现功能：动态刷新配置。例如一些告警阀值配置，需要将阀值调低，立即生效，且不需要重启服务器。

现在依旧是

方式一，客户端主动刷新：每30秒会获取一次发生变化的配置值

方式二，客户端被动监听：服务端有值发生变化时就主动告诉客户端拉取一次最新的值。两种方式同时存在，互补。防止某一方式因线程卡住等问题失效。

TestController.java

刷新之后，读到的就是测试1

再测一次，改为测试2，看结果

这样就达到了实时生效的结果了

17-3 阿里云部署方案介绍

阿里云提供了mysql、oracle等数据库服务，并且还有各种单机、集群方案，开箱即用，省去我们大量的运维工作。

RDS购买与配置->数据库初始化->ECS购买与配置->SecureCRT WinSCP->JDK安装与配置->Nacos安装与启动->Nginx安装与配置->前后端模块打包与发布->域名配置

要在购买好的RDS上新建项目实例，并执行初始化脚本。一个RDS可以创建多个实例，如果有多个学习项目，只需要购买一次RDS就可以了，减少学习成本。

ECS就是一台虚拟机，可以选择windows或Linux，在其上面安装各种应用程序。

SecureCRT是ssh工具，主要用来远程执行命令，方便我们直接在本地电脑运行ECS服务器的命令。程序员最常用来看生产日志。

WinSCP是sftp工具，用来传文件到RDS，比如把打包好的源码上传到服务器上。

前端Vue CLI编译打包后，使用Nginx启动，也可以使用Tomcat、Apache、Nodejs等容器来启动。

本次部署需要购买RDS、ECS、域名，之前已经用过OSS、VOD、Redis等服务了。

17-4 RDS购买与配置

云数据库RDS

 

一台RDS可以建多个数据库实例，给多个项目同时使用，就像自己电脑的Mysql可以建多个实例一样，进一步减少学习成本。

专用网络，可以理解为搭建一个虚拟的局域网，把相关的服务器、数据库都放到同一个专用网络。

资源组：可以将不同的项目用到的服务器、数据库，放在不同的资源组里，方便对各项目进行资源管理、核算成本等。

新购买的状态是创建中，要等一会儿才能使用

可以设置白名单

添加一个白名单,或者直接在default中修改为0.0.0.0/0

白名单用法一：选择内网ECS服务器，只能被某几台ECS使用，安全性高

 白名单用法二：填入特定的白名单，为了方便，我选择全部IP都可访问，填入0.0.0.0/0

接下来的内容：创建一个courseimooc数据库实例，及其对应的courseimooc用户

在代码中配置数据库地址使用内网地址。

通过本机客户端工具连接RDS，维护RDS，使用外网。

创建一个courseimooc项目专用的账号：courseimooc,密码是Courseimooc1

创建数据库

登录数据库

一般公司生产库不能通过外网连接，只能通过RDS控台来访问数据库。并且可以控制开发人员登录后只能查数据，不能修改表结构。

接下来的内容：初始化courseimooc项目的数据库

将all.sql中的语句全部粘贴过来

初始化脚本只能在第一次上线的时候，执行一次。后续有功能迭代要变更数据库时，使用alter语句来修改表结构。

17-5 ECS购买与配置

地域：选择和数据库在同一个城市

安全组就是控制外网对ECS的端口访问，及ECS对外的访问。只有勾选的端口才能被外网访问到。这里会自动创建一个安全组，后续在部署应用时，需要再次设置安全组，开放8848，9000等端口。

后续远程登录ECS 需要用到这组用户名root密码Courseimooc1

分组，方便对资源的分组管理。可以把一个项目用到的ECS、RDS等资源放在同一个资源里，方便管理和核算成本等。这里选择和RDS在同一个组。

复制公网ip

接下来，要用到一个工具，SecureCRT,ssh工具，用于登录远程ECS并执行命令。

我使用的是mac,所以直接在ssh端连接

ps -ef

作为开发人员，需要熟悉一些常用的linux命令，生产部署主要是关于文件、文件夹的操作，

如cd ll rm tar等。生产运维就是关于进程、CPU、内存，如ps free top等，最常用的是查看日志，如grep tail等。

17-6 JDK安装与Nacos安装

JDK安装

本机下载oracle jdk会比较慢，可以在ECS上直接下载jdk.

复制链接地址

wget 地址链接

如果第一次没有下载成功，重新点次Download，生成新链接，再用wegt重新下载就成功了。

ll 查看

mv 更改名字

打文件名的前缀，再按Tab键，可以自动提取整个文件名

解压 tar -zxvf jdk8.tar.gz

重命名

压缩包可以删除，也可以保留

配置JDK环境变量，很多第三方应用，如Tomcat,Nacos等都需要默认变量，比如JAVA_HOME这个变量。配置JDK环境变量还有一个目的，就是在任意目录下，都可以执行java命令。

使用vim命令，编辑/etc/profile文件，加入JDK环境变量

按下键盘“i”键，进入编辑状态

新增两个变量，JAVA_HOME和CLASSPATH，第三方应用会用到，例如Tomcat，Nacos。并将/bin目录加到PATH变量中，用于直接执行java,javac等命令。

按“ESC”键，退出编辑状态，再输入“:wq”,保存并退出

让刚配置好的变量立即生效，使用source /etc/profile

Nacos安装

WinSCP是sftp工具，用于上传和下载文件。

上传文件不消耗流量费，且不限带宽。 

我用的mac,直接用终端实现

解压 unzip nacos-server-1.2.1.zip

运行nacos

进入nacos/bin目录

"|"是管道符，可以在第一个指令的结果集里，再执行第二个指令。

linux环境启动nacos默认会失败，需要修改下nacos配置，linux的启动脚本配置的启动模式是集群，需要改成单机。关于集群部署，有兴趣的可以按官方文档，自己操作下。

windows默认单机启动，linux默认集群启动。

所以我们把linux改为单机即可

cluster和standalone是比较常见的单词，需要掌握。像缓存、消息队列等中间件，都会有单机和集群的部署方式。是属于偏架构师方向的知识。

修改配置时，可以保留原始配置，方便以后切换 

再次启动sh startup.sh

curl命令可以用来发送get和post请求。发送get请求时，类似于在浏览器直接输入地址。增加- X POST 参数可以用来发送post请求。

返回正常错误，但是端口是启动好的。

通过浏览器访问nacos的控台，http://106.14.243.169:8848/nacos/index.html

这个是什么原因呢？是因为服务器上有安全权限

需要配置ECS安全策略，开放端口，才能从外部网络访问ECS的某个特定端口。

ECS默认允许访问外部的网络，所以可以直接用ECS下载各种软件。所以我们可以直接从ECS去下载JDK。

再次刷新浏览器

账号密码都为nacos

17-7 后台模块打包与发布

后台模块打包

本节内容：将4个Java应用发布到ECS上

1.修改打包文件名，不带版本号

然后打包

将这四个jar包发布到服务器上

先将system.jar上传到服务器，启动java -jar system.jar 

这里报错，是因为nacos作为配置中心那一节，增加了system.test这个配置，发布到生产后，没有读到这个配置，所以报错

在配置中心加上system.test，或在代码application.properties里加也可以。

代码里配置的配置中心是127.0.0.1，所以读的是ECS本机的Nacos

Ctrl+C,退出运行状态

再次启动java -jar system.jar

再打开一个窗口

说明这个服务器已经启动了

这个就是和上面出现过的错误是一样的，端口9001没有放开。

我们的权限控制全部都在9000上面，为了安全，所有的后端Java应用，只有gateway允许被外部访问，其它应用都是内部应用，对外隐藏，否则别人通过外网直接访问system,那么权限控制就没用了。

常见的一些报错信息需要记住，看到Could not create connection,就要想到是数据库连接的问题。

修改配置中心

本机和生产的用户名密码都是courseimooc,所以不用配到配置中心。生产有特殊配置的，需要覆盖代码的配置的，才需要配到配置中心。

然后再次访问，数据库连接就没有问题了

后台模块发布

将gateway.jar上传到服务器

直接用java命令启动，就会一直占用当前会话窗口，不能执行其它的命令。

用nohup java -jar gateway.jar >/root/logs/gateway-nohup.log 2>&1 &

可以百度下nohup xxx 2>&1 &的写法作用

再回到浏览器

接着把business.jar、file.jar都上传到服务器上

可以将启动命令保存起来，要重启的时候直接拷贝过来，也可以将启动命令做成脚本，通过执行脚本来启动。

注意：此时business和file只配置了注册中心，没有配置配置中心，后续会解决。

kill -9 某项服务

停止某项服务

ps -ef | grep java

查看状态，通过“｜”管道过滤

项目迭代发布流程：修改代码，重新打包，上传Jar包，杀到原进程，执行启动命令。

问题：SecureCRT一段时间不用的话，就会自动断开。可以通过设置反空闲功能解决 

1.用tail命令查看最新的日志

tail -200 error.log

查看最后200行日志

tail -200 error.log

查看实时更新日志

2.用grep 命令查找某段日志

>grep ConnectException error.log

error.log中关于ConnectException的信息

>grep -C 10 ConnectException error.log

error.log中关于ConnectException的上下10行的信息

>grep -A 10 ConnectException error.log

error.log中关于ConnectException的上面10行的信息

>grep -B 10 ConnectException error.log

error.log中关于ConnectException的下面10行的信息

通过搜索日志ID，来查看某一次请求的完整日志，方便分析问题；还可以通过搜索某个时间点的上下N行来分析问题，注意：如果搜索的关键字包含空格，需要用“”包起来。

要为business和file增加配置中心，修改数据库连接。注意：到这一步，business和file的代码并没有加配置中心的配置，所以实际上还没有连到配置中心，后面介绍。

17-8 Nginx安装与Vue项目发布

www.xxx.com/admin

一：通过配置不同的二级目录，来访问不同的模块。

admin.xxx.com,www.xxx.com

二：通过配置不同的二级域名，来访问不同的模块

开始安装nginx

yum install xxx 在线安装

yum install nginx

下载nginx

nginx -v

查看nginx的版本号

service nginx start

nginx启动

访问浏览器

接下来我们打包admin

换成公网ip

admin和gateway发布在同一台ECS上，这里的地址为什么不是配成127.0.0.1？

通过浏览器去访问gateway,就是在本地电脑去访问gateway,本地电脑对ECS来说就是外部网络，所以要填公网IP。

vue.config.js

在介绍baseUrl时，有看过Vue官方文档，关于生产二级目录的配置

将dist上传到服务器上

在/etc/nginx/conf.d 目录里建立admin.conf

 admin.conf

nginx -s reload

重新加载一遍所有的配置文件

打开浏览器

安装完nginx后，会多一个nginx用户，并且默认以nginx用户启动，而admin相关的文件是用root用户上传的,这时nginx用户就没有权限去读admin相关的文件。

进到/etc/nginx/nginx.conf

修改完成之后更新nginx -s reload

再返回浏览器，就能加载出页面了

这里的验证码是redis,我是在阿里云上点击免费试用

在白名单中要加上0.0.0.0/0

在nacos中添加redis配置

登录页面跳到欢迎页面，原来是用push,后面改成了window.open

login.vue

使用window.open("/welcome"),ip+端口后面的目录都会被去掉，而使用push,虽然也是/welcome,但是因为是vue框架的绝对路径，所以会保留baseUrl的配置，即保留/admin/

admin.vue

改完代码后，需要重新执行build-prod，然后上传到服务器，和之前的操作一样

后续会改为二级域名来访问，即admin.xxx.com,这叫二级域名。

www.xxx.com/admin/,这叫二级目录。

修改完成之后，重新 nginx -s reload

17-9 域名配置

域名配置1

购买域名：courseimooc.xyz

通过admin.courseimooc.xyz访问控台

通过www.courseimooc.xyz访问web网站

通过server.courseimooc.xyz来访问路由

注意：不是所有的域名都能备案，如果是要长期用的，可以选择.com,.cn等能备案的域名。不能备案的域名不能解析到国内ECS，只能买国外或香港的ECS，网络肯定不如国内的好。

如果目标是做成百年老店，那可以把所有的域名都注册上。很多公司都会把与自己相似的所有域名都注册上。典型的反面例子：12306的域名是12306.cn,但12306.com并不是，不知道以后会不会高价收购。

注意，目前是只有续费有优惠，注册域名没优惠。大家购买的时候注意看提示

创建模板

点击解析

 这里解析域名

访问admin.courseimooc.xzy

这里重新访问一下地址admin.courseimooc.xyz

vue.config.js

build-prod

修改nginx配置才需要reload,上传静态文件不需要reload

admin.conf 

重新加载一次nginx -s reload

刷新浏览器

域名配置2

把http://106.14.243.169:9000/system/admin/user/login换成http://server.courseimooc.xyz/system/admin/user/login，建议不要用gateway，别人一看就知道是个网关，为了网站安全，尽量不要让别人看出后端的架构。

 在/etc/nginx/conf.d目录中添加server.conf

文件名必须是xxx.conf,前面的文件名任意。

nginx核心功能之一：反向代理。

反向代理，代理的是服务器，浏览器只知道访问了80端口，并不知道真实的服务端是9000端口。正向代理，代理的是客户端，如VPN，服务端只知道被VPN服务器访问了，但不知道真实的客户端来自哪里。

.env.prod

再次打包发布到服务器上

再次刷新浏览器

接下来：发布web端，并通过www.courseimooc.xyz来访问

.env.prod

package.json

刷新npm,双击build-prod

在服务器root目录下创建web,将打好的包上传上去

接下来，添加web.conf配置

修改完成之后，记得nginx -s reload

访问www.courseimooc.xyz/list

可以自己配个nacos的域名，然后nginx增加一个配置，像server的配置一样，反向代理配置8848端口。

business和file没有连接配置中心，下面进行配置

bootstrap.properties(business、file)

pom.xml(business、file)

注意：使用了配置中心后，要把项目中，用到@Vaule的配置移动到bootstrap.properties,或者配置到nacos中。就是bootstrap.properties和nacos任意一个地方要有配置。

application.properties

bootstrap.properties

改完打包，记得本地测试下，确保没问题再上线。

将business和file的jar包打包好发布到服务器上

在真实项目里，不会用这么暴力的kill -9 ，一般会搭配一些流量控制的功能，先将流量切断，等待当前所有的线程执行完，确认服务器日志没有再刷了，最后再kill -9。

扩展：本项目演示只用了一台服务器。真实的项目中，一般一个应用放一台服务器，不要把鸡蛋放在一个篮子里。并且每个应用会配置多个节点，防止单点宕机。