目录

简单Tomcat和Nginx部署前端项目

简单Tomcat和Nginx部署前端项目

前言

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

一、tomcat部署前端

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

1、下载tomcat

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

https://i-blog.csdnimg.cn/blog_migrate/1680db333f2536efd695e5f452317716.png

选择对应系统类型的文件

https://i-blog.csdnimg.cn/blog_migrate/0a3a6a48df584036ffad897790d2519e.png

2、查看tomcat目录

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

tomcat的目录如下。

https://i-blog.csdnimg.cn/blog_migrate/abce3c9b922fbfffd4056c7f321f26d9.png

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

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

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

    https://i-blog.csdnimg.cn/blog_migrate/e75d126a79a1994f7373bdff54d02a38.png

  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

,说明:

https://i-blog.csdnimg.cn/blog_migrate/991f037d9823aa05fe22d00dca6e52ab.png

按需下载即可。

3、目录了解

下载文件后,解压

https://i-blog.csdnimg.cn/blog_migrate/82fdcee0d8ef5ebd5b8f45a44adea133.png

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

https://i-blog.csdnimg.cn/blog_migrate/cfb20b05161ba5052c2e25cd0c9a8705.png

4、配置项目

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

https://i-blog.csdnimg.cn/blog_migrate/2831652ad82ec63790c694fad4a8bf16.png

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

https://i-blog.csdnimg.cn/blog_migrate/6d4f59db29d1807d70af3cd32732c7e2.png

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

简单说明一下:

server下的属性

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

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

参考或相关文章