导航:首页 > 配服务器 > 前端dist如何放在tomcat服务器中

前端dist如何放在tomcat服务器中

发布时间:2023-09-20 01:34:15

‘壹’ 如何将web项目部署到Linux服务器的tomcat上

找到Project Structer

重新构建项目

找到重新构建的项目,也就是我们的war包地址

根据路径找到war包,截图如下:

右键CRT选项卡打开SFTP服务:

找到war包的本地地址

本地:

Linux:

输入Put name.war

开始上传war包:

启动tomcat--- /usr/tomcat/apache-tomcat-7.0.61/bin/startup.sh

部署完毕

‘贰’ web前端项目部署到服务器:

执行成功后会生成dist文件

4.1 进入到nginx配置目录:/usr/local/nginx/conf,对 nginx.conf 文件进行配置

使用include可以配置多个.conf文件,如一个项目一个配置文件。在同目录下创建demo文件夹,并创建demo.conf配置文件

下面使用是以ip地址的方式创建的的配置文件

访问地址:

其中dist名称时可以修改,保持与/usr/local/nginx/html下cp名称一致,否则会访问不到;并且/usr/local/nginx/html目录可存在同一ip下多个web项目。

域名与ip绑定

配置域名demo.conf
eg: 域名 - demo.cn

4.2阿里云配置域名前缀
阿里云->域名->域名列表—>域名 管理-> 域名解析->解析设置

如图:记录值 填写当前服务ip

学习过程中所记录,有问题或者有好的方式欢迎指点。不胜感激 🤗 🤗 🤗

‘叁’ 使用Tomcat和Nginx部署前端项目

第一种方式,将我们的前端项目放置在webapps目录下

进入tomcat安装路径下的conf目录,在server.xml文件中<Host>标签内配置虚拟路径

简单的解释一下参数
path 对应用户请求过来的url路径, /static 匹配所有以 /static 开头的请求
docBase 表示实际匹配到的路径,这里可以使用绝对路径,也可以使用相对路径
reloadable 如果为true,则tomcat会自动检测应用程序的/WEB-INF/lib 和/WEB-INF/classes目录的变化。(对于静态资源来说,个人觉得这个配置用处不大)
总结起来就是,对于ip:8080/static的资源请求,会通过虚拟路径匹配到我们实际的资源路径music_client/static。
配置好后重启,我们可以发现已经能够看到我们的前端项目了

对于ROOT目录下的资源,tomcat可以直接在根目录下进行访问。通过这种方式,我们可以让项目的路径去适配tomcat访问的路径。
但是这种方式不是特别推荐,当有多个项目在同一个tomcat服务器上的时候,会不方便管理。

Nginx是当下热门的服务器,使用起来只需要进行简单的配置即可。对于Nginx的安装大家可以自行网络解决。
我们先进入到usr/local/nginx(具体以实际nginx安装目录为准)下的conf目录,vim编辑nginx.xml。主要进行下面的配置

简单的解释一下
listen 表示nginx监听的端口号,也就是你希望暴露哪个端口给用户进行访问
server_name 表示nginx接受请求的域名,一般默认localhost就行
location 模块用于响应请求,这里的 / 表示匹配8082端口的所有请求
root 表示静态资源/项目的路径
index 表示默认的访问资源
配置完成后,进入 sbin 目录下,通过 ./nginx -t 检查配置文件的格式是否正确
如正确 ./nginx 进行启动或者 ./nginx -s reload 进行重启
启动完,我们就可以直接ip:8082直接访问我们的前端项目啦

开启nginx的反向代理也比较简单,只需要加上proxy_pass 配置即可

出现这个问题的原因是: 在history模式下,只是动态的通过js操作window.history来改变浏览器地址栏里的路径,并没有发起http请求,但是当我们直接在浏览器输入这个地址的时候,就会对服务器发起http请求,但是这个目标在服务器上又不存在,所以会返回404。
我们可以通过把所有请求都转发到首页上来解决这个问题。只需要在 Nignx 中的配置文件加入如下配置:

事实上,上面的解决方式也是Vue-Router官方推荐的解决方式( https://router.vuejs.org/zh/guide/essentials/history-mode.html#nginx )。
那上面的 try_files 为什么能帮助我们解决这个问题呢?我们可以看一下这个属性的作用

try_files :按选项所指定的顺序去检查用户请求的文件是否存在,如果本地存在的话则返回该请求;不存在的话将该请求转发到指定的其它路径。也就是说,比如我们当前的前端项目部署在 /usr/myproj 目录下,现在我们在浏览器发起 ip:port/testApi 请求,那么此时 uri 为testApi,nginx会先去 $root/testApi (即/usr/local/myproj/testApi)找是否存在该静态资源,若不存在,则继续寻找 $root/testApi/index (即/usr/local/myproj/testApi/index)文件是否存在,如果还是不存在,则会把请求转发到首页。

而我们的项目本事就是由Vue-Cli创建的 单页面应用 ,当index页面接收到请求的时候,对应的history模式路由就可以发挥作用了,根据浏览器的路由跳转到对应的页面,这也就保证了我们的路由请求都能够转发给index页面来进行处理。

这种问题一般是出现在服务器一开始安装Nginx的时候,没有安装SSL模块。在不重装Nignx的情况下,可以安装如下方式进行操作:

执行如下命令

这一步只是以防万一,可以省略

也可以直接执行 ./usr/local/nginx/sbin/nginx -t 看还会不会报错就行

nginx报错: [emerg] https protocol requires SSL support in /usr/local/nginx/conf/nginx.conf:50

阅读全文

与前端dist如何放在tomcat服务器中相关的资料

热点内容
互联网程序员下班可以学吗 浏览:115
通达信海洋状态指标源码 浏览:548
工作压力大有什么好的解压方法 浏览:925
数字还可以怎样加密 浏览:116
为什么安卓没白鸟 浏览:237
程序员投行 浏览:323
java多线程读取文件 浏览:148
香港外贸服务器有什么好处 浏览:614
邓伦参加密室大逃脱结果变成团宠 浏览:849
购买文件服务器怎么选择 浏览:722
空调压缩机高压报警 浏览:502
u盘数控程序放哪个文件夹 浏览:856
python模拟微信登录其他APP 浏览:304
绑扎钢筋加密区规范 浏览:671
怎么更换手机壁纸安卓 浏览:808
闲鱼app卖手机怎么走验机 浏览:821
安卓三个按键音怎么关闭 浏览:64
esp8266手机app源码 浏览:713
服务器如何建立多个站点 浏览:151
加密狗可以在笔记本上做账吗 浏览:888