使用Tomcat和Nginx部署前端项目

前言

最近做了一个前后端分离的项目，项目完成后使用Tomcat和Nginx来部署前端项目。下面会对部署步骤和需要注意的一些坑进行讲解。如果你在部署前端项目上存在疑惑，希望这篇文章能够给你提供帮助。

部署方式一：Tomcat做Web服务器

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

image.png

放置好后回到tomcat的bin目录下，执行./startup.sh，并在网页上查看，会发现这个时候相关的页面并没有展示出来，这是因为tomcat对静态资源的读取是默认从根目录开始的。正确的路径应该是 ip地址:8080/music_client/static/...
'

image.png

解决这个问题有两种方式：

1. 使用虚拟路径

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

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

image.png

2. 将项目直接放置在webapps/ROOT目录下

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

部署方式二：直接用Nginx做Web服务器

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

 server {
        listen       8082;
        server_name  localhost;
        location / {
            root   /usr/local/music_site/music_client/;
            index  index.html index.htm;
            try_files $uri  /index.html;

        }
}

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

image.png

部署方式三：Tomcat做Web服务器，Nginx做反向代理服务器

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

server {
        listen       8082;
        server_name  localhost;

        location / {
             proxy_pass   http://localhost:8080/music_client/;
            index  index.html index.htm;
            try_files $uri  /index.html;

        }