简单Tomcat和Nginx部署前端项目

前言

记录一下前端项目的部署，主要最近也在做这些事情。

一、tomcat部署前端

这里我使用的事linux环境，windows下类似。

1、下载tomcat

tomcat下载官网

版本很多，下载常用的支持Java8的就行。

选择对应系统类型的文件

2、查看tomcat目录

我下载的是Linux版本，windows版本也类似。

tomcat的目录如下。

重点，两步就能部署起项目

1. 我们把前端的项目解压，放到tomcat目录下的webapps下。

   例如：我在webapps下存放了cloud名称的前端项目。

   

2. 在tomcat目录下的bin目录下，启动tomcat（运行startup.sh）

访问路径，tomcat默认端口是8080，如果占用问题修改启动端口即可。

于是访问的路径http://localhost:8080/cloud/index.html

二、使用nginx部署

nginx是一个轻量级的服务器，不经可以作为普通的服务器，还可以作为反向代理服务器，同时支持负载均衡、动静资源分离等等。这里只说部署前端项目。

这里我演示的windows版本，linux下类似

1、概述

1.1 nginx常用命令

1.查看nginx版本号
./nginx -v
2.启动nginx
./nginx
3.关闭nginx
./nginx -s stop
4.重新加载nginx
./nginx -s reload

2、下载nginx

下载地址，说明：

按需下载即可。

3、目录了解

下载文件后，解压

我们把项目放到html文件夹下。比如：

4、配置项目

打开conf目录，编辑nginx.conf文件

我们在http层级下，有一个server层级，修改里面的内容。

把这个路径改成我们项目的路径即可，比如html/dist。

简单说明一下：

server下的属性

• linsten 说明服务启动的端口
• server_name 启动的访问域名
• location / 虚拟地址/，网络地址映射为/根目录

nginx是一个好用的服务器，有兴趣找资料可以了解下。

参考或相关文章

https://segmentfault.com/a/1190000022689642

https://tomcat.apache.org/download-90.cgi

https://docs.nginx.com/nginx/