1200字范文 > React+SSM+阿里云部署(JDK MySQL8 Tomcat)

React+SSM+阿里云部署(JDK MySQL8 Tomcat)

时间：2023-02-24 15:41:50

前言

最近学了React和SSM，恰好工作室有个餐馆的外卖项目，于是尝试使用React+SSM的方式做了一个。

因为是初次接触这种整合以及服务器部署，翻了不少文档与博客。记录下来详细过程，以供参考。

React部分

修改路由

如果你的项目使用了react-router-dom，并且使用了<BrowserRouter>，那么需要执行如下操作。如果没有，那么可以直接进入build环节。

打开项目，进入到我们的项目<BrowserRouter></BrowserRouter>所在的位置，把<BrowserRouter></BrowserRouter>替换为<HashRouter></HashRouter>，开头import导入HashRouter。

替换后如下:

import {HashRouter, Route} from 'react-router-dom'; // 开头别忘记引入HashRouterfunction App() {return (<div className="App"><Provider store={store}><HashRouter> // BrowserRouter更改为HashRouter<Header/><Route path='/' exact component={Order} /><Route path='/Checkout' exact component={Checkout} /><Route path='/management/login' exact component={Login} /><Route path='/management' exact component={Management} /><Route path='/management/commodity' exact component={ManagementCommodity} /><Route path='/management/addcommodity' exact component={AddCommodity} /></HashRouter></Provider></div>);}

如果不这么操作，我们跳转到其它页面的时候，会报404错误。

原因引用此篇文章的回答:react-router-dom BrowserRouter 无法跳转问题

BrowserRouter 使用了H5的api，如果使用了BrowserRouter的话一旦路径改变，那么浏览器就会去请求服务端，但是这个路径根本不存在，所以页面就会显示404，而如果是使用hashHistory的话，那么我们的路径中就会增加一个#，这个#号后面的路径改变后是不会再去请求后台服务器。
如果做服务端渲染的话建议使用BrowserHistory，在开发阶段可以在webpack devServer中配置historyApiFallback: true，
否则的话还是建议用hashHistory

关于react-router 4.0中，有四个Router:

关于它们的详情，请见:/agj8ebed/

其实也可以使用<BrowserRouter>，但是需要本地或服务器为其做一些适配与调整，具体方法还请网上检索。

build

cd 进入我们React项目所在目录，执行

npm run build

react项目文件目录中，执行npm run build

请稍等一会，build的过程比较慢。

build成功后，此react项目的文件目录中会多出一个叫build的文件夹

我们将react项目文件目录多出来build文件夹中，所有的内容全部拷贝

build文件夹中，所有内容全部选中，拷贝

react部分的操作结束，复制后请看SSM操作。

SSM部分

打开我们的SSM项目目录，进入到/src/main/webapp中，把刚刚从build文件夹中拷贝的内容，全部粘贴进去。

在SSM项目的webapp目录中，把从build拷贝的东西，全部粘贴

然后打开我们的SSM项目，做一些修改。

打开/src/main/webapp/WEB-INF/web.xml文件

在<welcome-file-list></welcome-file-list>标签中，第一行加入<welcome-file>index.html</welcome-file>，如下：

(一定要放在第一行！浏览器访问网站根目录时，首页是第一行的文件)

<welcome-file-list><welcome-file>index.html</welcome-file><welcome-file>index.jsp</welcome-file></welcome-file-list>

保存一下，运行SSM项目。

至于SSM项目具体如何本地运行，开始学习React+SSM+阿里云部署这种整合的朋友，使用tomcat应该会了吧，博主就不啰嗦了，如果有疑问，欢迎在下方评论区交流，博主看到会及时回复。

SSM项目成功运行，整合成功

SSM操作告一段落，先不需要导出War包，云部署完毕后我们还需要对本地SSM项目做一些修改。

阿里云部署

服务器方面，选择了阿里云。国内云服务器阿里云居首，这个没得说，工单回复快，安全性国内第一。只不过添加解析域名需要备案，这是比较麻烦的一点。但是，使用国内的服务器都是需要备案的。

关于备案

这里提一下关于服务器的备案规定：

服务器，和域名都要备案吗？ - Ansersion的回答 - 知乎 /question/329770288/answer/718827534
只有同时满足以下条件的域名（对，域名，只有域名）才需要备案，其他均无备案一说：
需要通过80端口访问的（一般指拿来做网站的域名）；服务器在中国大陆的。

另外：

国外(GoDaddy)注册的域名如何在国内备案? - 懒虫的回答 - 知乎 /question/4717/answer/273874680
1月1日起，在国外域名注册商注册的域名，必须转入国内，才可以正常备案。

所以，不想备案的话，可以使用国外的云服务器(涉及敏感词，请自行检索)，或者阿里云的香港站/国际站。但是要做好面临下述可能异常的准备：

国外服务器面对国内客户，真的不需要备案吗？ - pansz的回答 - 知乎 /question/25351931/answer/41812971
没有违法。但这是给你自己制造风险。因为你的网站随时可能被直接长城认证了。并且不需要给你任何理由。
如果你的网站没有被认证，而是出现时断时续，间歇性抽风等技术问题，也是完全司空见惯的，这种情况也许比直接认证更窝心。
你的风险不是法律上的而是服务质量以及可用性方面的风险，换句话说，是用户体验下降的风险。

域名方面

入门部署阶段，先不考虑接入域名。暂时使用ip访问的方式，例如：http://192.169.1.86:80

阿里云配置选择

建站配置需求不是很高的话，推荐阿里云云翼计划。面向学生，9.5元/月，24岁以下自动获得学生资格。

/ntms/act/campus.html

阿里云云翼计划

操作系统（预装环境），CentOS和Ubuntu都是Linux的发行版。推荐CentOS，比Ubuntu更稳定，网上关于CentOS的技术文章也更多一些，检索起来更容易找到。博主选择的CentOS。

机型方面，从学习角度考虑，推荐选择ECS，自由度高，可玩性高，后期想升级也比轻量级服务器容易。博主选择的ECS。

ECS 还是轻量应用服务器，看完评测你就知道了？- 妙正灰 -云栖社区
/articles/202688

轻量级服务器和ecs有什么区别？ - 魏艾斯博客的回答 - 知乎 /question/280913213/answer/421838386
新手用轻量应用服务器，老手用ECS；看你用来干啥，个人博客类的，哪个都可以。升级的话都可以向上升级，轻量是只能升级到上面的配置，不能单独升级硬盘，ECS可以单独升级任意配置。

然后，开始付款操作，哈哈哈。

调整阿里云控制台设置(修改安全组)

我们需要先开启安全组。安全组是阿里云的连接权限设置。

在阿里云控制台的“实例”中找到安全组配置

8080端口安全组，网页访问时使用

SSH(22)，22端口，远程控制服务器使用的ssh协议需要

MySQL，3306端口

授权对象: 0.0.0.0/0表示给所有ip访问权限。当然，想要通过ssh协议连接还是需要输入服务器密码的。如果比较重视ssh连接的安全，而自己的ip由比较固定，可以在SSH(22)的安全组的授权对象中，只填自己的ip。

本地连接云服务器

从这一步开始，本文使用macOS讲解，但是和windows操作步骤是一致的，都是命令行操作。

windows只需要找到"cmd"图标，鼠标右键"以管理员身份运行"，即可打开拥有管理员权限的cmd，然后省略下文出现的所有"sudo"指令即可(sudo指令是Linux/Unix操作系统中使用管理员权限的一条指令)。如果感兴趣，更多windows中sudo指令的替代方案请见:如何在CMD下运用管理员权限

windows启动具有管理员权限的cmd，截图来源:/p/895895.html

打开终端"Terminal"，输入如下命令行：

sudo ssh ip.ip.ip.ip

其中，"ip.ip.ip.ip"替换为你的服务器ip，阿里云控制台"实例"中可以找到自己服务器的ip。

ssh连接server

连接成功后：

成功连接后提示：Welcome to Alibaba Cloud Elastic Compute Service !

插一段Linux的小知识

/目录、/home目录、~目录的区别
/baiyuwujia/article/details/80648554

路径中“./”、“../”、“/”代表的含义
/Young__Fan/article/details/80152501

进入到云服务器

进入后，默认在~路径下，也就是/root下。我们来查看一下服务器根目录的文件组成：

进入根目录
cd /
查看当前路径中的内容
ls

查看根路径中的内容

然后我们需要进入到/root路径中，新建一个home文件夹，用来存放将要上传到服务器上的jdk

进入/root目录
cd /root
创建名叫home的文件夹
mkdir home

/root目录下，新建home文件夹

配置云服务器运行环境

博主配置了JDK, MySQL, Tomcat三个部分

安装JDK并配置环境变量

博主的项目使用jdk11.0.4，以11.0.4举例流程，其它版本流程是一样的。

首先，来到官网下载jdk版本(历史版本需要在官网Java Archive栏中下载，这里直接粘出链接：/technetwork/java/javase/archive-139210.html)

标题

可以下载.rpm结尾或者.tar.gz结尾的版本，安装方式略有不同。.rpm使用CentOS的软件包管理工具RPM安装(关于RPM更详细的介绍: Linux RPM)，.tar.gz需要手动解压。当然，两者都需要手动配置环境变量。

Oracle官网下载jdk的操作流程相信大家都经历过，较为熟悉。Oracle家下载jdk有个惯例，新出的jdk可以直接下载，历史版本jdk需要使用oracle账号登录后才能下载。注册oracle账号流程是比较繁琐的，想直接下载的朋友可以在网上搜一下oracle账号共享，这里博主粘一个热心人分享的(失效的话还请自己检索了)：jdk官网历史版本下载&Oracle账号密码

还有一种不需要手动配置jdk环境变量和手动下载jdk的方法，使用yum(yum相关介绍)。这种办法的缺点是，jdk版本选择有限，可能根本找不到自己需要的jdk，而且安装的jdk是openjdk。并不推荐使用yum安装。感兴趣的朋友可以自己检索一下yum，此链接文章的"方法一"是使用yum安装的jdk：在CentOS7.4中安装jdk的几种方法及配置环境变量

yum -y list java*查看yum库中的java安装包，安装包版本偏少，且为openjdk

考虑到日后卸载的方便，博主选择使用rpm安装jdk(关于RPM更详细的介绍: Linux RPM)。关于使用RPM进行卸载与安装：centos7上安装JDK11。.rpm版jdk安装包手动在oracle官网下载好就行，下面我们将.rpm传输到服务器上。

我们使用scp将.rpm传输到服务器上，Scp(Secure Copy)是一个在各个主机之间进行复制或者文件传输的一个命令行工具(关于scp的详细介绍)。

找到刚刚下载的rpm版本jdk下载位置，控制台cd进入所在文件夹

执行
scp jdk-11.0.4_linux-x64_bin.rpm root@116.65.63.24:~/home
请注意：root@ip.ip.ip.ip处请替换成自己的ip。一定要确保先前在服务器mkdir创建好了名叫home的文件夹，否则scp上传后，会生成一个名叫home的、文件类型为jdk-8u131-linux-x64.tar.gz的文件。如果预先没有mkdir创建好，还请前翻本文"进入到云服务器"部分。scp传输的内容请注意换为自己的版本，博主传输的jdk11.0.4

scp传输jdk至服务器

进入服务器检查一下，scp上传成功

执行
rpm -ivh jdk-11.0.4_linux-x64_bin.rpm
安装完的jdk可在/usr/java下找到。

rpm安装jdk，安装完的jdk可在/usr/java下找到

设置环境变量，一顿操作猛如虎，走起。

注意：设置环境变量前，一定要简略看一下vi指令下的编辑文件操作方法：vi指令说明。很多博客都是告诉读者"在文件末尾添加XXX"，博主第一次使用vi指令，vi进去之后一脸懵逼，相信这也是之前没有接触过Linux萌新的普遍状况。

对vi编辑文件做一个简要说明：

在使用Vi [filename]之后，进入的是一般指令模式。
此时键盘输入i ，即可进入编辑模式。此时能对文件内容进行修改。
在编辑完成后使用Esc 按键退出编辑模式。此时回到的还是一般指令模式！

vi /etc/profile光标移动到文件末尾，输入小写的o，如下：o新增一行于该行之下供输入使用把下面五行添加到文件的末尾#java environmentexport JAVA_HOME=/usr/java/defaultexport JRE_HOME=\$JAVA_HOME/export PATH=$JAVA_HOME/bin:$PATHexport CLASSPATH=.:$JAVA_HOME/lib/dt.jar:$JAVA_HOME/lib/tools.jar然后按ESC退出vi输入模式。现在还没有退出vi一般指令模式，请继续看下文

vi输入模式下，输入java环境变量

之前没有接触过vi的话，需要看一下如何退出vi:Linux 下进入Vi 与退出方法，linux vi保存退出命令（如何退出vi）。下面博主把这两篇文章的介绍搬过来：

在使用Vi [filename]之后，进入的是一般指令模式。
此时键盘输入i ，即可进入编辑模式。此时能对文件内容进行修改。
在编辑完成后使用Esc 按键退出编辑模式。此时回到的还是一般指令模式！
若想保存编辑内容并到Linux终端，则需要输入:wq注意这里的冒号一定要记得输入！！
无法输入冒号的同学，请注意关闭中文输入法，切换为英文输入状态
不想保存并退出可以输入:q
注:在一般指令模式下，输入命令:q
系统退出Vi返回到shell。若在用此命令退出Vi时，编辑文件没有被保存，则Vi在显示窗口的最末行显示如下信息：
No write since last change (use ! to overrides)
提示用户该文件被修改后没有保存，然后Vi并不退出，继续等待用户命令。若用户就是不想保存被修改后的文件而要强行退出Vi时，可使用命令:q!
Vi放弃所作修改而直接退到shell下。

更详细的Linux VI退出指令清单

注意！我们刚刚已经把jdk环境变量输入完毕，:q!退出vi后不会保存的，刚刚手快:q!退出了的朋友，还请重新进入vi输入一下环境变量吧。

回到主题部分，我们已经输入好了jdk环境变量，然后按ESC退出vi输入模式。现在还没有退出vi一般指令模式。好的，请使用:wq保存文件并退出vi

wq保存文件并退出vi

回到Linux终端后，请输入
source /etc/profile
让环境变量立即生效然后输入
java -version
检查jdk安装和jdk环境变量配置是否正确

source让环境变量立即生效，java -version检查jdk环境变量配置正确性

java -version成功显示，jdk安装和环境变量配置成功！

安装mysql

安装mysql前，请先确认服务器上是否有旧的mysql版本

输入
rpm -pa | grep mysql

如果查询到了旧版本，需要先卸载旧版本，卸载过程可以网上搜一下，博主因为是新买的服务器，只安装了系统镜像，没有旧版本软件。如果什么都没有查询到，那可以进行下面的安装步骤了。

前往mysql官网yum版库链接:/downloads/repo/yum/

mysql官网yum版库链接，根据自己的Linux系统选择，博主的CentOS版本是7.3的

拷贝mysql yum版下载链接

然后，进行服务器操作。

进入之前我们保存.rpm版jdk的位置
cd /root/home
输入：wget 刚刚拷贝的链接，例如：
wget /get/mysql80-community-release-el7-3.noarch.rpm

wget下载mysql的rpm包

请注意，CentOS7开始，直接执行yum install mysql会安装MariaDB，而非mysql。至于为何，感兴趣的话请看这篇文章: 浅谈MySQL和MariaDB的区别

如果想安装mysql，请按照下述方法执行

下载后，执行
yum localinstall mysql80-community-release-el7-3.noarch.rpm

本地安装rpm版mysql

更新yum缓存，执行
yum clean all
yum makecache

安装mysql server，如果选择安装最新版，请直接输入：
yum install mysql-community-server
请注意，这一步安装的是最新版mysql server，博主电脑本地是mysql8.0.17，执行这一操作后，服务器安装了最新的mysql8.0.18。想安装指定历史版本的mysql server，请前往：/archives/community/，自行下载所需版本mysql server。下文将演示如何安装历史版本mysql server

博主想在服务器上安装mysql8.0.17，因此又把mysql8.0.18 server卸载了，卸载过程请参考:/hi_1234567/article/details/9176715。卸载完毕后需要重新安装一遍rpm版mysql，回退至前文.rpm安装mysql部分

mysql server archives

选择系统和mysql版本，下载。和jdk一样，将下载好的rpm包，使用scp传输到服务器上

本地电脑操作：找到下载的mysql server的rpm包位置，终端cd进入，scp传输，执行：
scp mysql-community-server-8.0.17-1.el7.x86_64.rpm root@116.65.63.24:~/home

scp上传mysql server rpm包

然后是服务器操作

cd /root/home
yum localinstallmysql-community-server-8.0.17-1.el7.x86_64.rpm
请注意，此yum本地安装命令可能要多试几次，原因尚不清楚。

本地安装scp上传的mysql server，博主试了好几次yum本地安装指令

如果一直卡在

yum localinstallmysql-community-server-8.0.17-1.el7.x86_64.rpm

一直卡在yum localinstall

如截图，提示：

错误：软件包：mysql-community-server-8.0.17-1.el7.x86_64 (/mysql-community-server-8.0.17-1.el7.x86_64)需要：mysql-community-client(x86-64) >= 8.0.11错误：软件包：mysql-community-server-8.0.17-1.el7.x86_64 (/mysql-community-server-8.0.17-1.el7.x86_64)需要：mysql-community-common(x86-64) = 8.0.17-1.el7

缺少mysql-community-client和mysql-community-common，原因通常是yum的mysql安装源错误，请按照"安装mysql"板块开头部分前往mysql官网yum版库链接:/downloads/repo/yum/

...(中间步骤略过，请参照"安装mysql"板块开头部分)

执行这一步：

yum localinstall mysql80-community-release-el7-3.noarch.rpm

58 执行yum localinstall mysql80-community-release-el7-3.noarch

然后执行

yum localinstallmysql-community-server-8.0.17-1.el7.x86_64.rpm

就成功了。

mysql server安装完毕后，启动mysql，执行
systemctl start mysqld
查看初始化密码，执行
cat /var/log/mysqld.log | grep password

启动mysql与查看初始密码

登录mysql，输入
mysql -u root -p
修改初始化密码（密码一定要大小写字母+数字+符号，如：Aa-135246）
ALTER USER 'root'@'localhost' IDENTIFIED BY 'yourpassword';

mysql修改初始密码，如果缺少规定的密码格式会报错

另外建议开启mysql开机自启，这样服务器报错重启后，mysql也能一起自动重启

退出mysql指令模式
quit;
开启开机自启，linux终端中，输入：
systemctl enable mysqld.service
若要关闭开机自启，可以在Linux终端中，输入：
systemctl disable mysqld.service

另附一份mysql常用指令，来源：/ManagementAndJava/article/details/80039650

登录mysql
mysql -u username -p
退出mysql
quit
启动mysql
systemctl start mysqld.service
结束
systemctl stop mysqld.service
重启
systemctl restart mysqld.service
开机自启
systemctl enable mysqld.service
查看mysql版本
select version();

到这里，mysql已经安装成功了。下面我们要把本地电脑中的mysql表单导出到服务器。

本地终端操作

终端cd进入想要.sql生成的文件夹位置，执行：
mysqldump -u root -p database_name>sql_name.sql
请注意database_name和sql_name替换成自己想要导出的名字如果出现-bash: mysqldump: command not found，说明电脑本地没有配置环境变量，配置环境变量请参考:/p/4d6a171df3d0

把导出的.sql使用scp上传进服务器

scp gouhai_takeaway.sql root@116.65.63.24:~/home

sql文件导出与传输

下面是服务器操作

登入mysql
mysql -u root-p
注意gouhai_takeaway请换成自己数据库的名字，句尾分号不要忘记
CREATE DATABASE gouhai_takeaway DEFAULT CHARACTER SET utf8;
show databases;

服务器端mysql创建新数据库，用于导入

开始导入本地电脑传到服务端的.scp文件

use gouhai_takeaway;
source /root/home/gouhai_takeaway.sql

mysql导入本地电脑上传的sql文件

检查是否导入成功

use gouhai_takeaway;
select * from commodity;
commodity是导入的数据库中一个table的名字，替换成自己数据库中某个原有的table的名字即可

检查是否导入成功

关于连接远程mysql，博主选择使用服务器上的mysql。这样再建表、增删改查，就不用像刚刚那样从本地导出.sql了，MyBatis直接映射到远程服务器上sql语句。

本地电脑操作，将本地电脑的mysql用户root开启远程权限，摘录自：修改MySQL用户的host属性当你远程登录MySQL时，使用的账号要有特殊要求。默认的账号的host属性都是localhost，意思是这个账号只能本地使用，如果要使用某个账号来远程登录，必须将账号的host属性值更改成%。需要在本地电脑的mysql中，执行如下sql语句：
use mysql;
update user set host='%' where user='root';

服务器端mysql远程访问权限设置(支持mysql8最新权限设置语法，mysql8中创建账户和授予权限是分开的)。

以下操作在服务器端mysql中进行。

为将要远程连接到服务器端mysql的主机创建账户, (密码一定要大小写字母+数字+符号，如：Aa-135246)
create user'用户名'@'访问主机' identified by '密码';
例如:
create user'root'@'%' identified by 'Your-password';
授予权限
grant 权限列表 on 数据库 to '用户名'@'访问主机' ;(修改权限时在后面加with grant option)
例如
grant all privileges on *.* to 'root'@'%';