1. Toy模板网首页
  2. > Toy博客

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

7月前 作者：localhost:9000 分类：Toy博客 阅读(46) 违法举报

这篇具有很好参考价值的文章主要介绍了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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

2.服务器上传nginx

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

cd /usr/local/

centos7部署vue项目,Linux,nginx,tomcat,vue.js

3.解压nginx 

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

输入以下命令进行解压，可以输入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

执行结果

centos7部署vue项目,Linux,nginx,tomcat,vue.js

2.然后执行编译

make 

make install

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

 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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

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

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

systemctl stop firewalld.service

systemctl disable firewalld.service

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

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

firewall-cmd --list-ports --permanent

centos7部署vue项目,Linux,nginx,tomcat,vue.js

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

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

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

firewall-cmd --reload

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

8.安装成系统服务

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

1.创建服务脚本

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

2.写入以下内容

[Unit]
Description=nginx - web server
After=network.target remote-fs.target nss-lookup.target

[Service]
Type=forking
PIDFile=/usr/local/nginx/logs/nginx.pid
ExecStartPre=/usr/local/nginx/sbin/nginx -t -c /usr/local/nginx/conf/nginx.conf
ExecStart=/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf
ExecReload=/usr/local/nginx/sbin/nginx -s reload
ExecStop=/usr/local/nginx/sbin/nginx -s stop
ExecQuit=/usr/local/nginx/sbin/nginx -s quit
PrivateTmp=true

[Install]
WantedBy=multi-user.target

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

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

systemctl daemon-reload

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

systemctl start nginx.service

systemctl 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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

解压并删除安装包

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

rm -rvf jdk-8u152-linux-x64.tar.gz

 配置环境变量

vi /etc/profile

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

 centos7部署vue项目,Linux,nginx,tomcat,vue.js

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

使配置生效

source /etc/profile

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

2.准备Tomcat

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

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js​

3.服务器上传tomcat

cd /usr/local

mkdir tomcat

cd tomcat

上传文件 

centos7部署vue项目,Linux,nginx,tomcat,vue.js​

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js​

6.访问tomcat

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

firewall-cmd --zone=public --add-port=8080/tcp --permanent

firewall-cmd --reload

查看开放列表

firewall-cmd --list-ports --permanent

centos7部署vue项目,Linux,nginx,tomcat,vue.js​ 

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js​

 7.设置Tomcat开机启动

/usr/local/tomcat/apache-tomcat-9.0.80/bin

vi 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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

编写启动脚本

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

写入以下内容 

[Unit]

Description=Tomcat

After=network.target remote-fs.target nss-lookup.target

[Service]

Type=forking

TimeoutSec=0

PIDFile=/usr/local/tomcat/apache-tomcat-9.0.80/tomcat.pid

ExecStart=/usr/local/tomcat/apache-tomcat-9.0.80/bin/startup.sh

ExecReload=/bin/kill -s HUP $MAINPID

ExecStop=/bin/kill -s QUIT $MAINPID

PrivateTmp=true

[Install]

WantedBy=multi-user.target

 重载配置

systemctl daemon-reload

设置开机自启动

systemctl enable tomcat

其他命令 


//配置开机启动
systemctl enable tomcat
//启动tomcat
systemctl start tomcat
//停止tomcat
systemctl stop tomcat
//重启tomcat
systemctl 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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

五、后端SpringBoot打包

1.CCApplication类

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

2.创建CCServletInitializer类

同级目录创建CCServletInitializer类如下

centos7部署vue项目,Linux,nginx,tomcat,vue.js

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>

centos7部署vue项目,Linux,nginx,tomcat,vue.js 修改artifactId，打成war包后的文件夹名。

centos7部署vue项目,Linux,nginx,tomcat,vue.js

打包，先clean，再package

centos7部署vue项目,Linux,nginx,tomcat,vue.js

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

六、配置nginx.conf

1.修改配置文件

cd /usr/local/nginx/conf

vi 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下文件如下：

centos7部署vue项目,Linux,nginx,tomcat,vue.js

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

mkdir cloud

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

 重启nginx，或者重载nginx

cd /usr/local/nginx/sbin

./nginx -s reload

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

2.后端部署

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

上传war包到该路径 

centos7部署vue项目,Linux,nginx,tomcat,vue.js

重启tomcat

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

./shutdown.sh  //关闭tomacat

./startup.sh // 开启tomacat

centos7部署vue项目,Linux,nginx,tomcat,vue.js

 查看springboot启动日志

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


tail -n 100 catalina.out

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

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

centos7部署vue项目,Linux,nginx,tomcat,vue.js

      回复关注可以获取同版本 软件（nginx+tomcat+jdk同版本版本）、系统（前后端配置模板）、nginx配置文件，可供测试使用。文章来源地址https://www.toymoban.com/news/detail-755519.html

到了这里，关于Centos7通过nginx+tomcat部署Vue+SpringBoot项目(超详细步骤，从nginx+tomcat安装到Vue+SpringBoot打包配置+nginx.conf）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处： 如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：
领支付宝红包 赞助服务器费用

相关文章

  • CentOS7---部署Tomcat和安装Jpress

    CentOS7---部署Tomcat和安装Jpress

    静态网页： 请求响应信息，发给客户端进行处理，由浏览器进行解析，显示的页面，静态网页包含文本、图像、Flash动画、超链接等内容，在编写网页源代码时已经确定。除非网页源代码被重新修改，否则这些内容不会发生变化。 动态网页： 请求响应信息，发给事务端进行

    2023年04月15日
    浏览(26)

  • centos7在线安装 jdk1.8+tomcat+mysql8+nginx+docker

    centos7 在线安装jdk1.8 安装tomcat mysql8 nginx docker

    2024年02月11日
    浏览(32)
  • centos7部署nginx

    centos7部署nginx

    2024年02月06日
    浏览(25)
  • 阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)

    阿里云CentOS8系统上Nginx部署多个Vue项目(多端口监听)

    阿里云CentOS8系统上安装Nginx服务器----Vue项目部署(一) 阿里云CentOS8系统上部署前后端分离项目----Vue项目部署(二) 编译工具：webstorm 终端中输入：npm run build 打包成功，文件都生成在项目中dist下 将打包好的Vue项目的dist文件夹中的文件全部上传到服务器上。 路径位于上一步查到

    2024年02月06日
    浏览(48)
  • Windows服务器，通过Nginx部署VUE+Django前后端分离项目

    Windows服务器，通过Nginx部署VUE+Django前后端分离项目

    基本说明 安装 Nginx 部署 VUE 前端 部署 Django 后端 Django admin 静态文件（CSS，JS等）丢失的问题 总结 本文介绍了在 windows 服务器下，通过 Nginx 部署 VUE + Django 前后端分离项目。本项目前端运行在 80 端口，服务器端运行在 8000 端口。因此本项目使用 Django 的 runserver 命令进行部署

    2024年02月05日
    浏览(48)

  • 基于centos7.9通过nginx实现负载均衡以及反向代理

    摘要：负载均衡： 负载均衡是一种技术，用于在多个服务器之间分发传入的网络流量，以平衡服务器的负载，提高系统的可用性和性能。当您有多台服务器时，您可以使用负载均衡将请求分发到这些服务器上，从而防止单个服务器过载而影响用户体验。 反向代理： 反向代理

    2024年02月13日
    浏览(29)
  • 如何在linux服务器上用Nginx部署Vue项目，以及如何部署springboot后端项目

    如何在linux服务器上用Nginx部署Vue项目，以及如何部署springboot后端项目

    提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 提示：这里可以添加本文要记录的大概内容： 本文内容记录如何在Linux(Ubuntu)系统上安装Nginx，并部署打包好的Vue前端项目，最后通过浏览器访问。 提示：以下是本篇文章正文内容，下面案例可供参考

    2024年04月16日
    浏览(33)
  • 华为云云服务器评测 宝塔+nginx 同时部署Springboot、Vue项目

    华为云云服务器评测 宝塔+nginx 同时部署Springboot、Vue项目

    华为云云服务器评测 第一章 [linux实战] 华为云耀云服务器L实例 Java、node环境配置 华为云云服务器评测 第二章 [linux实战] Unbutnu添加SSH Key、启动Springboot项目 华为云云服务器评测 第三章 [linux实战] 使用Vue3、Element-plus菜单组件构建轮播图 华为云云服务器评测 第四章 [linux实战

    2024年02月10日
    浏览(43)
  • 【Docker】docker部署springboot+vue+mysql+nginx前后端分离项目【部署实战篇】

    【Docker】docker部署springboot+vue+mysql+nginx前后端分离项目【部署实战篇】

    安装docker: https://blog.csdn.net/qq_39900031/article/details/121666892 springboot-vue前后端分离项目：https://gitee.com/ma-haojie/springboot-vue-demo.git https://jackwei.blog.csdn.net/article/details/110227719 或者 --restart=always 参数能够使我们 在重启docker时，自动启动相关容器 。 Docker容器的重启策略如下： no，默认

    2024年02月13日
    浏览(31)
  • 通过宝塔面板部署一个SpringBoot+Vue前后端分离项目的指南（三更）

    通过宝塔面板部署一个SpringBoot+Vue前后端分离项目的指南（三更）

    阿里云服务器-FinalShell-宝塔面板。 近期需要将自己的一个SpringBoot+Vue前后端分离项目，并且是分模块开发的项目部署到服务器上，记录一下踩坑的地方，结合C站大佬的解决方案，循循善诱一步步部署到服务器上，简单，快速！ 购买服务器，阿里云，腾讯云，华为云等，24周岁

    2024年02月03日
    浏览(44)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包，优惠每天领

二维码1

领取红包

二维码2

领红包