Centos7通过nginx+tomcat部署Vue+SpringBoot项目(超详细步骤，从nginx+tomcat安装到Vue+SpringBoot打包配置+nginx.conf）

目录

一丶前言

二、安装nginx

1.准备nginx

2.服务器上传nginx

3.解压nginx 

4.安装相关依赖库

5.编译nginx

6.启动nginx

7.访问nginx 

8.安装成系统服务

三、安装Tomcat

1.安装JDK（如果安装并配置环境变量了可以略过）

2.准备Tomcat

3.服务器上传tomcat

4.解压tomcat 

5.启动tomcat

6.访问tomcat

7.设置Tomcat开机启动

 四、前端Vue打包

1.配置文件.env.production

2.配置vite.config.js文件

3.配置reques.js

4.配置router.js

5.配置package.json

五、后端SpringBoot打包

1.CCApplication类

2.创建CCServletInitializer类

3.修改pom.xml文件

六、配置nginx.conf

七、部署系统

1.前端

2.后端

---

一丶前言

准备环境：Centos7 、nginx-1.24.0.tar.gz、apache-tomcat-9.tar.gz

CentOs7下载和安装以及配置网卡请查看博文：VMware虚拟机搭建Centos7，并配置网卡，远程连接https://blog.csdn.net/a1764739438/article/details/132539330

二、安装nginx

1.准备nginx

从官网下载nginx-1.24.0的tar.gz包，下载链接：

nginx开源下载网址https://nginx.org/en/download.html

2.服务器上传nginx

在服务器下上传nginx安装包，可以用xshell上传nginx文件夹至以下路径。

cd /usr/local/

3.解压nginx 

在/usr/local文件夹下面，输入ls查看上传情况，可以看到存在这个文件

输入以下命令进行解压，可以输入tat zxvf nginx+ Tab键进行自动补全。

tar zxvf nginx-1.24.0.tar.gz

 解压完成后，该目录下会出现一个名为nginx-1.24.0的文件夹，然后进入该文件夹。

cd nginx-1.24.0

4.安装相关依赖库

1.安装gcc

yum install -y gcc

2.安装perl库

yum install -y pcre pcre-devel

3.安装zlib库

yum install -y zlib zlib-devel

5.编译nginx

如果安装了第4步的话这一步会没有问题

1.使用cofigure命令创建nginx文件夹，在/usrl/local/nginx-1.24.0目录下执行以下命令：

./configure --prefix=/usr/local/nginx 

执行结果

2.然后执行编译

make make install

执行完成后，我们返回上一级目录，可以看到/usr/local下出现一个新文件nginx,

 6.启动nginx

nginx启动在nginx下的sbin文件夹下执行

./nginx # 启动

./nginx -s stop #快速停止

./nginx -s quit #优雅关闭，在退出前完成已经接受的连接请求

./nginx -s reload #重新加载配置

cd /usr/local/nginx/sbin./nginx

7.访问nginx 

输入ip+80端口访问，如果输入后访问不到nginx页面，说明防火墙没有关闭，或者放行80端口

如果是本地测试环境，可以直接关闭防火墙，通过firewall-cmd --state查看防火墙状态

firewall-cmd --state

如果显示running，说明防火墙正在运行中，请关闭或者开放80端口（nginx默认访问端口）

1.关闭防火墙，开机禁止自启动。

systemctl stop firewalld.servicesystemctl disable firewalld.service

2.不关闭防火墙，开放80端口

查看防火墙永久开放端口列表，发现为空。

firewall-cmd --list-ports --permanent

永久开放80端口，并再次查看开放端口

firewall-cmd --add-port=80/tcp --permanent

 重载防火墙配置（重要）,如果不重载配置或重启防火墙。配置不生效，也会访问不到80端口

firewall-cmd --reload

然后浏览器输入ip+80端口访问,出现以下界面，说明nginx安装成功。

8.安装成系统服务

通过配置可以使nginx在其他地方也可以启动停止。

1.创建服务脚本

vi /usr/lib/systemd/system/nginx.service

2.写入以下内容

[Unit]Description=nginx - web serverAfter=network.target remote-fs.target nss-lookup.target[Service]Type=forkingPIDFile=/usr/local/nginx/logs/nginx.pidExecStartPre=/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.confExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.confExecReload=/usr/local/nginx/sbin/nginx -s reloadExecStop=/usr/local/nginx/sbin/nginx -s stopExecQuit=/usr/local/nginx/sbin/nginx -s quitPrivateTmp=true[Install]WantedBy=multi-user.target

如果在其他位置安装，确保这些路径正确，否则可能会失败。

3.重载系统配置（重要）

systemctl daemon-reload

4.重启服务，并设置开机自启动

systemctl start nginx.servicesystemctl enable nginx.service

 如果启动上面两步报错的话，可以重启服务器、或者关闭nginx服务,如果关闭还失败的话可以重启服务器解决。主要原因是因为nginx启动时为设置nginx.pid 文件配置。

cd /usr/local/nginx/sbin./nginx -s stop

三、安装Tomcat

1.安装JDK（如果安装并配置环境变量了可以略过）

tomcat运行环境需要jdk支持，先安装jdk

可以用java -version查看是否安装了jdk

先卸载自带的openJDK

rpm -qa | grep jdk

rpm -e --nodeps java-1.8.0-openjdk-1.8.0.65-3.b17.el7.x86_64 rpm -e --nodeps java-1.8.0-openjdk-headless-1.8.0.65- 3.b17.el7.x86_64 rpm -e --nodeps java-1.7.0-openjdk-1.7.0.91-2.6.2.3.el7.x86_64 rpm -e --nodeps java-1.7.0-openjdk-headless-1.7.0.91- 2.6.2.3.el7.x86_64

创建java目录

cd /usr/local mkdir java cd java

下载上传jdk，下载链接jdk下载链接https://www.oracle.com/cn/java/technologies/javase/javase8u211-later-archive-downloads.html

解压并删除安装包

tar -zxvf jdk-8u152-linux-x64.tar.gzrm -rvf jdk-8u152-linux-x64.tar.gz

 配置环境变量

vi /etc/profile

在文件最后加入以下信息，主要jdk安装路径信息要与自身安装的一致。 

 

JAVA_HOME=/usr/local/java/jdk1.8.0_152PATH=/usr/local/java/jdk1.8.0_152/bin:$PATHexport JAVA_HOME PATH

使配置生效

source /etc/profile

输入java -version，会显示以下信息说明jdk安装成功。

2.准备Tomcat

 从官网下载tomcat9的tar.gz包，下载链接：

tomcat下载链接https://tomcat.apache.org/download-90.cgi

​

3.服务器上传tomcat

cd /usr/localmkdir tomcatcd tomcat

上传文件 

​

4.解压tomcat 

tar -zxvf apache-tomcat-9.0.80.tar.gz

5.启动tomcat

// 开启tomacat./shutdown.sh //关闭tomacat

cd apache-tomcat-9.0.80/bin

运行tomcat，如果安装了jdk，运行结束后会显示 tomcat started

./startup.sh

​

6.访问tomcat

开放8080端口，如果开机禁止启动防火墙（可以忽略），

firewall-cmd --zone=public --add-port=8080/tcp --permanentfirewall-cmd --reload

查看开放列表

firewall-cmd --list-ports --permanent

​ 

浏览器输入ip+8080端口访问,有显示一下页面表示安装成功。

​

 7.设置Tomcat开机启动

/usr/local/tomcat/apache-tomcat-9.0.80/binvi setenv.sh

 写入以下文件

# 设置Tomcat的PID文件CATALINA_PID="$CATALINA_BASE/tomcat.pid"# 添加JVM选项JAVA_OPTS="-server -XX:PermSize=256M -XX:MaxPermSize=1024m -Xms512M -Xmx1024M -XX:MaxNewSize=256m"

编辑catalina.sh 

vi catalina.sh

编写启动脚本

vi /usr/lib/systemd/system/tomcat.service

写入以下内容 

[Unit]Description=TomcatAfter=network.target remote-fs.target nss-lookup.target[Service]Type=forkingTimeoutSec=0PIDFile=/usr/local/tomcat/apache-tomcat-9.0.80/tomcat.pidExecStart=/usr/local/tomcat/apache-tomcat-9.0.80/bin/startup.shExecReload=/bin/kill -s HUP $MAINPIDExecStop=/bin/kill -s QUIT $MAINPIDPrivateTmp=true[Install]WantedBy=multi-user.target

 重载配置

systemctl daemon-reload

设置开机自启动

systemctl enable tomcat

其他命令 

//配置开机启动systemctl enable tomcat//启动tomcatsystemctl start tomcat//停止tomcatsystemctl stop tomcat//重启tomcatsystemctl restart tomcat

 四、前端Vue打包

1.配置.env.production

VITE_APP_BASE_API = '/cloud-chat' 为请求后端的api，nginx通过cloud-chat匹配，转发请求到后端

VITE_APP_URL = 'http://192.168.237.120'为请求路径

 .env.production（生成环境）

# 页面标题VITE_APP_TITLE = cloud# 生产环境配置VITE_APP_ENV = 'production'# 生产环境VITE_APP_BASE_API = '/cloud-chat'VITE_APP_URL = 'http://192.168.237.120'

 .env.development（开发环境）

# 页面标题VITE_APP_TITLE = cloud# 开发环境配置VITE_APP_ENV = 'development'# 开发环境VITE_APP_BASE_API = '/dev-api'VITE_APP_URL = 'http://localhost:8888'

2.配置vite.config.js文件

base: VITE_APP_ENV === 'production' ? '/cloud/' : '/cloud/' 前端路径带上cloud通过nginx转发访问前端资源

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import path from "path";import { loadEnv } from 'vite'// https://vitejs.dev/config/export default defineConfig(({ mode }) => {  const env = loadEnv(mode, process.cwd())  const { VITE_APP_ENV, VITE_APP_BASE_API, VITE_APP_URL } = env  return {    base: VITE_APP_ENV === 'production' ? '/cloud/' : '/cloud/',    plugins: [      vue(),      // AutoImport({      //   resolvers: [ElementPlusResolver()],      // }),      // Components({      //   resolvers: [ElementPlusResolver()],      // }),    ],    resolve: {      alias: {        '@': path.resolve(__dirname, './src'),      },      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.vue'],    },    server: {      port: 80,      host: true,      hmr:true,      open: true,      proxy: {        [VITE_APP_BASE_API]: {          target: VITE_APP_URL,          changeOrigin: true,          rewrite: (p) => p.replace(/^\/dev-api/, ''),        },      },    },  }})

 3.配置reques.js

baseURL: import.meta.env.VITE_APP_BASE_API, 

import axios from 'axios'// 创建一个 axios 实例const request = axios.create({    baseURL: import.meta.env.VITE_APP_BASE_API, // 这里设置为代理的路径    timeout: 5000 // 请求超时时间});// 请求拦截器request.interceptors.request.use(    config => {        return config;    },    error => {        console.log(error); // 打印错误日志        Promise.reject(error).then(r => {});    });// 响应拦截器request.interceptors.response.use(    response => {        // 在这里可以做一些统一的响应处理逻辑        return response.data;    },    error => {        console.log(error); // 打印错误日志        return Promise.reject(error);    });export default request

4.配置router.js

线上使用createWebHashHistory()

import {createRouter, createWebHashHistory, createWebHistory} from "vue-router";export const constantRoutes = [    {        path: '/',        hidden: true,        component:()=>import('@/views/login.vue')    },    {        path: '/index',        hidden: true,        component:()=>import('@/views/index.vue')    },]const router = createRouter({    // history: createWebHistory(),    history: createWebHashHistory(),    routes: constantRoutes,    scrollBehavior(to, from, savedPosition) {        if (savedPosition) {            return savedPosition        } else {            return { top: 0 }        }    },})export default router

 5.配置package.json

运行build:prod进行打包，打包完成后复制dist文件夹到桌面。

五、后端SpringBoot打包

1.CCApplication类

@SpringBootApplicationpublic class CCApplication {    public static void main(String[] args) {        SpringApplication.run(CCApplication.class, args);        System.out.println("项目启动成功");    }}

2.创建CCServletInitializer类

同级目录创建CCServletInitializer类如下

public class CCServletInitializer extends SpringBootServletInitializer {    @Override    protected SpringApplicationBuilder configure(SpringApplicationBuilder application)    {        return application.sources(CCApplication.class);    }}

3.修改pom.xml文件

新增排除依赖 排除内嵌的tomcat，使用安装的tomcat，同时将新增打包方式，打包成war包

 <!--排除内嵌的tomcat-->        <dependency>            <groupId>org.springframework.boot</groupId>            <artifactId>spring-boot-starter-tomcat</artifactId>            <scope>provided</scope>        </dependency>

 修改artifactId，打成war包后的文件夹名。

打包，先clean，再package

将war包复制到桌面。所需环境已准备好。

六、配置nginx.conf

1.修改配置文件

cd /usr/local/nginx/confvi nginx.conf

location /这一行指定了一个位置块，它匹配所有以斜杠 / 开头的URL路径。

root /usr/local/nginx/html;：这一行设置了根目录，指定了Nginx应该在哪里查找与URL路径匹配的文件。

location /cloud ：它匹配所有以 /cloud 开头的URL路径，前端访问路径。

location /cloud-chat ：它匹配所有以 /cloud-chat 开头的URL路径，后端访问路径。

proxy_pass http://localhost:8080;：这一行使用proxy_pass指令，它告诉Nginx将请求代理到本地的HTTP服务器，该服务器运行在localhost的8080端口上。这个端口是tomcat的端口。

向nginx.conf文件中http下新增三个location块，主要配置文件部分如下： 

worker_processes  1;events {    worker_connections  1024;}http {    include       mime.types;    default_type  application/octet-stream;    sendfile        on;    keepalive_timeout  65;    server {        listen       80;        server_name  localhost;                location / {             root   /usr/local/nginx/html;     #try_files $uri $uri/ /cloud/dist/index.html;             index  index.html index.htm;           }       location /cloud{           alias /usr/local/nginx/html/cloud/dist;             try_files $uri $uri/ /dist/index.html;        index  index.html index.htm;           }           location /cloud-chat{           proxy_pass http://localhost:8080;           }         }      }        

重载配置（重要），每次修改完配置文件都必须重载，不然不起作用。

cd /usr/local/nginx/sbin./nginx -s reload

七、部署系统

1.前端部署

cd /usrl/local/nginx

cd html

 html下文件如下：

删除所有文件，新建cloud文件夹

mkdir cloud

将前端dist文件夹，上传到html/cloud下面 

 重启nginx，或者重载nginx

cd /usr/local/nginx/sbin./nginx -s reload

 浏览器输入ip+/cloud 访问，出现页面表示前端部署成功。

2.后端部署

cd /usr/local/tomcat/apache-tomcat-9.0.80/webapps

上传war包到该路径 

重启tomcat

cd /usr/local/tomcat/apache-tomcat-9.0.80/bin./shutdown.sh  //关闭tomacat./startup.sh // 开启tomacat

 查看springboot启动日志

cd /usr/local/tomcat/apache-tomcat-9.0.80/logstail -n 100 catalina.out

出现以下结果表示后端部署成功。 

 自此，vue+springboot项目部署成功。可以进行一些请求测试，前后端连接情况

      回复关注可以获取同版本 软件（nginx+tomcat+jdk同版本版本）、系统（前后端配置模板）、nginx配置文件，可供测试使用。