文章目录

  • 前言
  • 一、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.org/

前端部署 nginx Dockerfile 前端部署项目_html


在tomcat的官方网站中，下载zip或者tar包，也可以通过docker进行安装，安装后在bin目录下启动tomcat。

2.配置文件

安装好tomcat后，在安装目录下，存在conf，logs，webapps等文件夹。conf中存在server.xml中可以配置虚拟路径。

前端部署 nginx Dockerfile 前端部署项目_linux_02

将前端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.org/zh-cn/download/

配置好环境变量

2.运行前端包

进入到包根目录

npm run start &

三 nginx服务器

nginx是一个负载均衡，高性能web和反向代理服务器

1.安装nginx

下载地址：

http://nginx.org/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