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等。

下面是终端连接服务端免密登录的语句:

cd .ssh

ssh-copy-id -i id_rsa.pub root@106.14.243.169

ssh root@106.14.243.169

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。

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

如果不想掏钱购买域名,但是,还想实现这种域名的跳转搜索,可以用本地模拟,大概流程讲解

本地模拟域名

打包之前看一下我的配置

server/application.properties

gateway/application.properties

其它基本不变,进行clean,然后install

创建文件夹projectJar,将business.jar、file.jar、gateway.jar、system.jar放到该文件夹下

创建log目录,创建file-nohup.log、gateway-nohup.log、system-nohup.log、business-nohup.log文件

下载SwitchHosts

配置三个域名,ip地址为本机 

本机需要安装nacos、nginx、redis(也可以用远端的)

./configure --prefix=/Users/zhaoxiaoyun/devtools/nginx

make && make install

nginx.conf ,这里面include 是根据你自己的地址写的

创建一个nginxConfig

创建admin.conf

创建server.conf

创建web.conf 

启动脚本reload.sh


给projectJar文件夹chmod 755 *权限,

chmod 777 * 这个是最大的

chmod 755 *

将当前目录下的所有文件和目录的权限设置为:所有者具有读、写、执行的权限,与文件相关的用户组和其他用户具有读、执行的权限,但没有写入的权限

  • 第一个数字(7)表示所有者(owner)的权限。在这里,7 表示可读(4)+ 可写(2)+ 可执行(1),所以所有者有读、写、执行的权限。
  • 第二个数字(5)表示与文件相关的用户组(group)的权限。在这里,5 表示可读(4)+ 可执行(1),所以与文件相关的用户组有读、执行的权限。
  • 第三个数字(5)表示其他用户的权限。同样,5 表示可读(4)+ 可执行(1),所以其他用户有读、执行的权限

chmod -R 755 * 将会递归地将当前目录下的所有文件和目录的权限设置为755,包括所有子目录中的文件和目录。

启动nginx:

./nginx

启动nacos:

sh startup.sh -m standalone

less /Users/zhaoxiaoyun/devtools/nacos/logs/start.out

启动reload.sh脚本

./reload.sh

常用命令

tail -f system-nohup.log 实时日志

ps -ef | grep java 查看java相关进程

查看结果

http://www.courseimooc.xyz/list

http://admin.courseimooc.xyz/login

  • 10
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
本文介绍了一个基于Spring Boot、Spring CloudVue前后端分离的项目实战。这个项目是一个简单的在线商城,包含了用户注册、登录、商品展示、购物车、订单管理等功能。通过这个项目,读者可以深入理解前后端分离的架构模式和互联网应用的开发方式。 首先,文介绍了前后端分离的基本概念和优势。前后端分离是将应用的前端和后端代码分开来开发,使得前端和后端具有独立的开发周期和技术栈,进而提高了开发效率和代码质量。同时,前后端分离还可以提供更好的用户体验和灵活性,对于互联网应用来说尤为重要。 接下来,文介绍了项目的架构和技术栈。项目采用了Spring Boot和Spring Cloud框架来实现后端代码,采用MyBatis作为ORM框架和Redis作为缓存中间件。同时,项目还采用了Vue.js作为前端框架和Element UI组件库来实现前端页面。通过这些开源框架和组件,可以快速搭建一个前后端分离的互联网应用。 然后,文介绍了项目的核心功能和代码实现。在用户注册和登录方面,项目采用了Spring Security框架和JWT令牌来实现用户认证和授权,保证了用户信息的安全性。在商品展示和购物车方面,项目采用了Vue.js来实现前端页面和事件处理。在订单管理方面,项目采用了MyBatis Plus来实现订单数据的持久化和分页查询。 最后,文介绍了项目的测试和优化。通过对项目的压力测试和性能测试,文发现项目还存在一些性能瓶颈和安全隐患,可以通过优化数据库查询、缓存配置和代码实现来提高应用的性能和安全性。 总之,这篇文介绍了一个基于Spring Boot、Spring CloudVue前后端分离的项目实战,通过实现一个在线商城的功能,展示了前后端分离的开发模式和互联网应用的开发技术栈。本文可以作为前后端分离开发的入门教程,也可以作为互联网应用开发的参考文档。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值