前言
最近学了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:
<BrowserRouter>, <HashRouter>, <MemoryRouter>, <StaticRouter>
关于它们的详情,请见:/agj8ebed/
其实也可以使用<BrowserRouter>,但是需要本地或服务器为其做一些适配与调整,具体方法还请网上检索。
build
cd 进入我们React项目所在目录,执行
npm run build
请稍等一会,build的过程比较慢。
我们将react项目文件目录多出来build文件夹中,所有的内容全部拷贝
react部分的操作结束,复制后请看SSM操作。
SSM部分
打开我们的SSM项目目录,进入到/src/main/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操作告一段落,先不需要导出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可以单独升级任意配置。
然后,开始付款操作,哈哈哈。
调整阿里云控制台设置(修改安全组)
我们需要先开启安全组。安全组是阿里云的连接权限设置。
授权对象: 0.0.0.0/0表示给所有ip访问权限。当然,想要通过ssh协议连接还是需要输入服务器密码的。如果比较重视ssh连接的安全,而自己的ip由比较固定,可以在SSH(22)的安全组的授权对象中,只填自己的ip。
本地连接云服务器
从这一步开始,本文使用macOS讲解,但是和windows操作步骤是一致的,都是命令行操作。
windows只需要找到"cmd"图标,鼠标右键"以管理员身份运行",即可打开拥有管理员权限的cmd,然后省略下文出现的所有"sudo"指令即可(sudo指令是Linux/Unix操作系统中使用管理员权限的一条指令)。如果感兴趣,更多windows中sudo指令的替代方案请见:如何在CMD下运用管理员权限
打开终端"Terminal",输入如下命令行:
sudo ssh ip.ip.ip.ip
其中,"ip.ip.ip.ip"替换为你的服务器ip,阿里云控制台"实例"中可以找到自己服务器的ip。
连接成功后:
插一段Linux的小知识
/目录 、/home目录 、~目录的区别
/baiyuwujia/article/details/80648554
路径中“./”、“../”、“/”代表的含义
/Young__Fan/article/details/80152501
进入到云服务器
进入后,默认在~路径下,也就是/root下。我们来查看一下服务器根目录的文件组成:
进入根目录cd /
查看当前路径中的内容
ls
然后我们需要进入到/root路径中,新建一个home文件夹,用来存放将要上传到服务器上的jdk
进入/root目录cd /root
创建名叫home的文件夹
mkdir 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的几种方法及配置环境变量
考虑到日后卸载的方便,博主选择使用rpm安装jdk(关于RPM更详细的介绍: Linux RPM)。关于使用RPM进行卸载与安装:centos7上安装JDK11。.rpm版jdk安装包手动在oracle官网下载好就行,下面我们将.rpm传输到服务器上。
我们使用scp将.rpm传输到服务器上,Scp(Secure Copy)是一个在各个主机之间进行复制或者文件传输的一个命令行工具(关于scp的详细介绍)。
执行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
执行rpm -ivh jdk-11.0.4_linux-x64_bin.rpm
安装完的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的话,需要看一下如何退出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下。
注意!我们刚刚已经把jdk环境变量输入完毕,:q!退出vi后不会保存的,刚刚手快:q!退出了的朋友,还请重新进入vi输入一下环境变量吧。
回到主题部分,我们已经输入好了jdk环境变量,然后按ESC退出vi输入模式。现在还没有退出vi一般指令模式。好的,请使用:wq保存文件并退出vi
回到Linux终端后,请输入source /etc/profile
让环境变量立即生效然后输入
java -version
检查jdk安装和jdk环境变量配置是否正确
java -version成功显示,jdk安装和环境变量配置成功!
安装mysql
安装mysql前,请先确认服务器上是否有旧的mysql版本
输入rpm -pa | grep mysql
如果查询到了旧版本,需要先卸载旧版本,卸载过程可以网上搜一下,博主因为是新买的服务器,只安装了系统镜像,没有旧版本软件。如果什么都没有查询到,那可以进行下面的安装步骤了。
前往mysql官网yum版库链接:/downloads/repo/yum/
然后,进行服务器操作。
进入之前我们保存.rpm版jdk的位置cd /root/home
输入:wget 刚刚拷贝的链接,例如:
wget /get/mysql80-community-release-el7-3.noarch.rpm
请注意,CentOS7开始,直接执行yum install mysql会安装MariaDB,而非mysql。至于为何,感兴趣的话请看这篇文章: 浅谈MySQL和MariaDB的区别
如果想安装mysql,请按照下述方法执行
下载后,执行yum localinstall mysql80-community-release-el7-3.noarch.rpm
更新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版本,下载。和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
然后是服务器操作
cd /root/home
yum localinstallmysql-community-server-8.0.17-1.el7.x86_64.rpm
请注意,此yum本地安装命令可能要多试几次,原因尚不清楚。
如果一直卡在
yum localinstallmysql-community-server-8.0.17-1.el7.x86_64.rpm
如截图,提示:
错误:软件包: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
然后执行
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 -u root -p
修改初始化密码(密码一定要大小写字母+数字+符号,如:Aa-135246)
ALTER USER 'root'@'localhost' IDENTIFIED BY 'yourpassword';
另外建议开启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
下面是服务器操作
登入mysqlmysql -u root-p
注意gouhai_takeaway请换成自己数据库的名字,句尾分号不要忘记
CREATE DATABASE gouhai_takeaway DEFAULT CHARACTER SET utf8;
show databases;
开始导入本地电脑传到服务端的.scp文件
use gouhai_takeaway;
source /root/home/gouhai_takeaway.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'@'%';
安装Tomcat
电脑本地操作,在tomcat官网下载:
如果是最新版,官网首页即可下载
如果下载历史版本的tomcat,请在官网左侧一栏中,点击"Archives":/dist/tomcat/
博主电脑本地使用的tomcat为9.0.26,为了保持一致,服务器端决定也适用tomcat 9.0.26,因此进入Archives下载
使用scp将下载好的tomcat文件上传到服务器~/home目录下:
scp apache-tomcat-9.0.26.tar root@116.65.63.24:~/home
进入到服务器中上传到tomcat文件所在目录,解压到指定的目录中(请确保事先已存在该目录,如没有请先使用mkdir创建,具体目录位置、名称随意,看个人喜好)
关于Linux的解压详情:看完这篇Linux下的解压缩你还不会吗?
tar -xvf apache-tomcat-9.0.26.tar -C /root/Programming/Server
请注意,-f参数的功能:指定压缩文件,因此f需要放在文件名前,也就是那几个参数的最后一个,后面直接跟着压缩文件名。否则会报错:tar: 您必须从"-Acdtrux"或是"--test-label"选项中指定一个
进入tomcat文件夹的bin目录中,并启动tomcat
cd /root/Programming/Server/apache-tomcat-9.0.26
cd bin
./startup.sh
启动成功后,请稍等3-6分钟,服务器端tomcat启动很慢,视项目大小,项目越大启动越慢,启动期间浏览器访问自己的服务器,会一直等待服务器响应。等了一会儿后,在浏览器地址栏中输入ip:8080
例如:116.65.63.24:8080
看到tomcat默认欢迎页,说明tomcat安装与启动成功!
服务器端tomcat启动,但仍然无法访问的朋友,请稍等2-3分钟再试着访问几次。如果还不行,请检查服务器安全组是否开启8080端口,具体办法请见本文"调整阿里云控制台设置(修改安全组)"部分
顺便说一下,tomcat关闭的命令是(在tomcat的bin目录下输入)
./shutdown.sh
React部分(后续)
React需要操作的地方,本文开头我们已经谈过。如果之前没有弄好,还请前翻"React部分"。
SSM部分(后续)
在本文开头的"SSM部分"中,我们已经可以成功在本地运行整合后的SSM项目。
因为要将SSM项目放到服务器上运行,使用的MySQL是服务器端,所以要将SSM项目中,jdbc相关连接设置改为服务器的MySQL。
博主的SSM项目,jdbc相关连接设置写在了jdbc.properties文件中,如下:
修改好后,保存。maven项目生成war包,导出war包。
使用scp将war包上传进tomcat的webapps目录中,上传前请先确保服务器端tomcat处于关闭状态
上传war包后,服务器端启动tomcat。tomcat将会自动将gouhai-takeaway.war文件进行加压成gouhai-takeaway文件夹。
启动成功后,请稍等3-6分钟,服务器端tomcat启动很慢,视项目大小,项目越大启动越慢,启动期间浏览器访问自己的服务器,会一直等待服务器响应。等了一会儿后,从本地浏览器访问一下,看看是否成功部署。
访问格式
ip:8080/项目名称/#/
此处"项目名称"为,上传的war包名字。例如我上传的war包名字为gouhai-takeaway.war,那么我的"项目"名称为gouhai-takeaway
例如
116.65.63.24:8080/gouhai-takeaway/#/
本文结束,可以通过浏览器远程访问啦!
如果大家还有疑惑或者有问题的地方,欢迎在下方评论区交流,博主看到会及时回复。