一.介绍
大二计算机在读,由于计算机设计大赛选择了web组,而且数据库过于庞大,不能直接将本地项目打包发送给评委组,于是选择了将项目部署到服务器上,评委组通过可访问的地址链接就可以实现查看项目.然后就开始
二.服务器部署项目
(一).概述
1.后端
后端使用的是jfinal框架,框架中提供了Maven打包服务,一键打包后即可在linux系统中通过server.sh运行,前端即可通过公网ip+端口号访问后端接口.
2.前端
前端使用的是vue框架,使用nmp run build命令即可打包得到dist文件夹,将文件夹放到服务器的usr/local/nginx文件下,再配置nginx.conf即可完成到直接通过公网ip+端口号访问到本项目
(二)后端部署
软件准备
1.MobaXterm
用于远程连接服务器和远程传输文件
2.服务器软件环境安装---Nginx
3.服务器软件环境安装---JDK
4.服务器软件环境安装---MySQL
开始部署
1.打包项目
(1)打包jFinal后端项目
注意server.sh和start.bat的MAIN_CLASS的地址都要改成自己的App所在的地址
(2)在文件夹中找到打包好的项目
后缀为.sh的是linux系统上的启动文件，后缀为.bat的是windows上的启动文件
启动命令都是文件名 start,windows上可以直接双击.bat文件
2.使用MobaXterm将压缩文件上传到服务器
(1)连接到远程服务器
输入主机的公网ip和用户名
输入完毕点击OK,输入登录密码即可
(2)文件上传
选择之前打包好的压缩文件进行上传
(3)解压zip文件,unzip+文件名
3.开启安全组端口权限
如果没有开启端口权限,则是无法从远程访问该端口的,于是将常用端口添加进入阿里云的安全组,注意一定要将端口添加进安全组,不然后续的数据库连接操作和接口测试是完全无法实现的
4.在服务器上创建远程数据库
连接创建成功后将原来的本地数据库到处到文件,再从文件导入到远程数据库即可,注意远程数据库的用户要赋予权限(在安装时就把远程权限直接给root)
5.修改参数
(1)数据库连接
将原来的本地数据库连接换成刚刚复制的远程数据库地址
(2)注意undertown的host不需要修改
这里的host不需要修改成公网ip地址,改了反而启动会报错
6.启动
解压weather,进入解压后的weather文件夹,可以看到里面的server.sh和start.bat文件,服务器的系统是linux于是选择启动server.sh,启动后日志输出在output.log里面,和本地IDEA的控制台一样,点击查看启动情况
7.接口测试
测试连接成功,jFinal后端成功部署到服务器上,前端就可以直接使用公网ip来请求后端服务了
总结
最麻烦的其实是一个崭新的服务器上去安装软件环境,后面的具体部署,总结一下就是
1.打包
2.上传打包文件到服务器
3.端口权限配置(这个其实一般就那几个常用接口,用熟了的服务器也不用这一步)
3.将项目数据库复制到远程数据库上
4.修改项目数据库连接地址
5.启动,结果是远程成功连接
(二)前端部署
vue打包
1.获得前端代码,在webstorm上打开
在终端输入npm run build
2.打包完成后在原来的代码包中可以看到一个新的文件夹---dist
3.将dist文件夹压缩上传到nginx的本地安装文件夹(注意不是download文件夹,而是usr/local)
服务器上部署
1.解压dist
2.配置conf
找到nginx文件夹下的conf文件夹,点击nginx.conf进行配置
3.具体配置
找到http下的第一个server,对其中的listen,server_name,location进行修改
其中server_name+listen=最后的访问地址,原理是通过访问这个地址就可以映射到location对应的文件,也就是nginx文件夹--webapp文件夹--dist文件夹下的index.html页面
4.nginx服务命令
(1)启动 Nginx
systemctl start nginx
(2)停止 Nginx
systemctl stop nginx
(3)重启 Nginx
systemctl restart nginx
(4)重新加载 Nginx，用于修改配置后
systemctl reload nginx
(5)设置开机启动 Nginx
systemctl enable nginx
(6)关闭开机启动 Nginx
systemctl disable nginx
(7)查看 Nginx 运行状态
systemctl status nginx
5.上传+配置完成后,启动nginx服务即可
总结
1.打包得到dist并上传到nginx文件夹
2.在nginx.conf中进行配置,使访问地址映射到dist中的index.html
三.收获
真正明白了怎么把本地运行成功的一个web项目部署到服务器,让其他人可以通过一个链接来访问自己的项目,更有成就感了
