admin管理员组文章数量:1532204
文章目录
- 前言
- 一、tomcat服务器
- 1.安装tomcat
- 2.配置文件
- 二 node服务器
- 1.安装node.js
- 2.运行前端包
- 三 nginx服务器
- 1.安装nginx
- 2.修改配置文件
前言
在windows系统中,前端将代码打包后,可以直接通过浏览器进行访问。但是这时的前端包只是运行在浏览器上,而真正前端运行需要以服务器作为依托。前端包相当于鱼,而运行前端的服务器相当于鱼缸,今天我们来聊聊前端项目部署的几种方式
一、tomcat服务器
tomcat是一个http和servelt服务器,用户通过浏览器可以对tomcat服务器进行访问。安装前下载jdk,并且配置好环境变量
1.安装tomcat
https://tomcat.apache/
在tomcat的官方网站中,下载zip或者tar包,也可以通过docker进行安装,安装后在bin目录下启动tomcat。
2.配置文件
安装好tomcat后,在安装目录下,存在conf,logs,webapps等文件夹。conf中存在server.xml中可以配置虚拟路径。将前端dist包放在webapps包下,那么访问的路径为 ip+port://dist 路径(webapps以及以上路径省略)
在图示host节点中添加 context标签指定静态支援路径
<Context path="/photo" docBase="D:\web" reloadable="true" />
其中path是映射的虚拟路径(可视具体情况配置),docBase是静态资源存放的真实物理路径,reloadable指有文件更新时,是否重新加载,一般设置为true后,tomcat不需要重启启动,自动热加载!
如果加了contenxt 属性,将静态资源放在D盘web下,那么访问路径为 ip+port://photo
二 node服务器
Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时。运行在浏览器上的服务器
1.安装node.js
下载地址:
https://nodejs/zh-cn/download/
配置好环境变量
2.运行前端包
进入到包根目录
npm run start &
三 nginx服务器
nginx是一个负载均衡,高性能web和反向代理服务器
1.安装nginx
下载地址:
http://nginx/en/download.html
下载后进入bin目录启动
2.修改配置文件
找到nginx.conf文件,找到location / 下,修改root 到web包的绝对路径,或者nginx下的相对路径,index换成web包的需要访问的html页面。
location / {
root html;
index index.html index.htm;
}
默认访问为 ip ,访问地址为nginx根目录下的html包下的index.html文件
location / {
root /usr/web;
index index.html index.htm;
}
修改访问为/usr/web下的index.html文件 ,访问路径为 ip
版权声明:本文标题:linux系统如何部署前端项目 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/xitong/1725679161a1036101.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论