前后端分离后,tomcat服务器部署和发布

打包服务端:
IDEA打开项目,等待项目初始化完成,点击Build- Build Artifacts,进行打包


前后端分离后,tomcat服务器部署和发布_第1张图片
image.png

点击之后会出现下面这个小窗口,选择红框中部分:


前后端分离后,tomcat服务器部署和发布_第2张图片
image.png

这个过程就是打包了,等待打包完成之后,会出现一个target目录,这个目录下会有一个war包
前后端分离后,tomcat服务器部署和发布_第3张图片
image.png

用快捷键ctrl+shift+c,复制文件路径,进入路径将以上生成的war包,修改成ROOT.war


前后端分离后,tomcat服务器部署和发布_第4张图片
image.png

设置tomact:
进入92服务器,解压一个tomact的zip,并且将该tomact文件夹名字修改成自己可以识别的;


image.png

进入tomact目录下的webapp,如下:


前后端分离后,tomcat服务器部署和发布_第5张图片
image.png

将这个目录下的文件删掉;其实也可以不删,但是可能会影响自己项目;所以最好删掉吧;
并且将打包好的ROOT.war 复制进来


前后端分离后,tomcat服务器部署和发布_第6张图片
image.png

修改服务端口:
进入tomact的conf文件夹,找到server.xml文件,文件如下:


前后端分离后,tomcat服务器部署和发布_第7张图片
image.png

修改端口:


前后端分离后,tomcat服务器部署和发布_第8张图片
image.png

前后端分离后,tomcat服务器部署和发布_第9张图片
image.png

端口改好之后保存,就可以启动服务了;
进入bin目录下,找到startup.bat,双击启动即可;


前后端分离后,tomcat服务器部署和发布_第10张图片
image.png

在cmd命令行打印出一下内容就表示服务启动成功


image.png

可以看到webapp目录下,多出来如下东西


前后端分离后,tomcat服务器部署和发布_第11张图片
image.png

打包web前端:
启动项目,将项目的服务器路径改成上面启动的服务路径:http:// xxx.xxx.xxx.xxx:xxxx ;
等待项目加载完成;npm install 安装插件包;

前后端分离后,tomcat服务器部署和发布_第12张图片
image.png

安装成功之后,执行npm run build,进行前端打包;打包结束之后会出现一个这个目录


前后端分离后,tomcat服务器部署和发布_第13张图片
image.png

前后端分离后,tomcat服务器部署和发布_第14张图片
image.png

将该目录下所有内容copy到tomcat--webapps-ROOT目录下:


前后端分离后,tomcat服务器部署和发布_第15张图片
image.png

到这里,你的web前端已经发布成功啦;可以访问了

我们前端还有另外一个小app,所以呢,这里直接将app下的文件copy进ROOT-app下,就可以了;

你可能感兴趣的:(前后端分离后,tomcat服务器部署和发布)