• 前言
• 一、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.配置文件

将前端dist包放在webapps包下，那么访问的路径为 ipport://dist 路径(webapps以及以上路径省略）

在图示host节点中添加 context标签指定静态支援路径

 <Context path=/photo docBase=D:\web reloadable=true /> 

其中path是映射的虚拟路径（可视具体情况配置），docBase是静态资源存放的真实物理路径，reloadable指有文件更新时，是否重新加载，一般设置为true后，tomcat不需要重启启动，自动热加载！

如果加了contenxt 属性，将静态资源放在D盘web下，那么访问路径为 ipport://photo

二 node服务器

ode.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.修改配置文件

到文件，到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