服务器部署前后端分离项目vue+springboot

news2024/9/24 1:27:38

步骤

1-安装java,mysql,nginx环境

服务器先安装宝塔

yum install -y wget && wget -O install.sh https://download.bt.cn/install/install_lts.sh && bash install.sh ed8484bec

安装后输入bt 14查看内网链接打开宝塔页面

java&&tomcat

image-20240829101853614

image-20240829101956119

安装tomcat服务器

image-20240829102025539

mysql

image-20240829122218294

nginx

image-20240829122301709

2-数据库导入

用户名密码和java application 配置文件保持一致

image-20240829102229069

image-20240829102449137

image-20240829102541338

3-打包前后端项目,配置nginx

前端

在www目录下新建公共目录,传入打包好的前端项目

image-20240829103503696

image-20240829103708539

前端路径指向

其实这块不用怎么改,除非你端口发生变化,否则这里的localhost服务器自己会找ip的

运行环境变量.env.production

# just a flag
ENV = 'production'

# base api
VUE_APP_BASE_API = 'http://localhost:8088'

request.js

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
  // url = base url + request urls
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 15000 // request timeout
})

vue.config.js
这一块的端口号填写你后端springboot启动端口,这个proxy服务器代理就是帮你转发到该springboot后端,

为什么要代理?浏览器不能跨域,也就是http 和 ip和端口,必须一致,这里我们的前端端口和后端不就不一致了嘛,

所以说前后端分离项目出现了跨域项目,俩服务器了,一个nginx一个java tomcat。

proxy: {
      [process.env.VUE_APP_BASE_API]: {
        target: `http://localhost:端口号`,
        // websocket支持
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },

服务器配置redis

如果项目中没用到redis可以直接跳到后面

py3安装慢的一批无语了

不安装后续编译会报错…

wget http://cdn.npm.taobao.org/dist/python/3.6.5/Python-3.6.5.tgz && tar -zxvf Python-3.6.5.tgz && cd Python-3.6.5/ && ./configure --prefix=/usr/local/python3 --with-ssl && make && make install &&  ln -s /usr/local/python3/bin/python3 /usr/bin/python3 
 ln -s /usr/local/python3/bin/pip3 /usr/bin/pip3

获取资源——解压——安装指定目录——编译安装——软连接bin命令位置

安装gcc软件包(由gcc make install安装)
yum install gcc-c++
下载安装redis

Index of /releases/ (redis.io)

选择想要的版本,右键复制链接 到linux里wget获取到该包(如果太慢就下完丢虚拟机里)

wget https://download.redis.io/releases/redis-7.0.5.tar.gz

解压到用户目录

mkdir /usr/local/redis && tar -zvxf redis-7.0.5.tar.gz -C /usr/local/redis

执行make,并install安装也是嘎嘎慢

make… 注意看这里cd进入的为你下载对应版本解压后的redis,这段别照cv了

cd /usr/local/redis/redis-7.0.5/ && make

成功效果

install…

make PREFIX=/usr/local/redis install

查看版本,验证安装结果

/usr/local/redis/bin/redis-cli -v

启动redis

/usr/local/redis/bin/redis-server
image-20240829210542450

有个鸡肋的地方,如果想要生效配置文件得

/usr/local/redis/bin/redis-server /配置文件路径..
修改启动方式为守护式进程,后台运行…
vi redis.conf 
image-20240829203726290
远程连接

image-20240829203835089

查看运行状况

ps -ef|grep redis

image-20240829211438191

redis客户端

/usr/local/redis/bin/redis-cli

关闭redis

找到nestat/ps 。。。 进程号
kill -9 进程号

软连接创建快捷方式

 ln -s /usr/local/redis/bin/redis-server ./
  • ln: 创建链接的命令。
  • -s: 表示创建一个软链接(符号链接)。
  • /usr/redis: 这是你要链接的目标路径。
  • /root/redis: 这是你希望创建的软链接的路径。

后端

添加打包依赖

 <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
<!--                指定Spring Boot应用程序的主类-->
                    <mainClass>com.zww.ZwwAdminApplication</mainClass>
<!--                    插件执行是否跳过,如为true,则不会执行maven插件,repackage,run等...-->
<!--                    及其所有依赖同时也会被跳过,当前项目启动报错,缺失xxx...依赖-->
                    <skip>false</skip>
                </configuration>
<!--                maven插件目标,在构建过程中执行repackage目标,打成jar/war包-->
<!--                执行的操作有 编译,运行,打包-->
                <executions>
                    <execution>
                        <id>repackage</id>
                        <goals>
                            <goal>repackage</goal>
                        </goals>
                    </execution>
                </executions>
            </plugin>
        </plugins>
    </build>

image-20240829213216528

application随着打出来的在target里的jar包一起带过去,如果application配置文件相同就端口不一致后续使用命令行参数–server.port=8888就不用分目录了

image-20240829112801838

image-20240829112900980

启动jar包

打开宝塔自带终端或者自己习惯用的远程连接工具,这里推荐mobaxterm,然后到公共目录启动,如果到这里你觉得看不懂大多,那我建议你好好百度或者b站补点前置知识
image-20240829113116528

cd /www/【你的文件目录】/前后台后端目录
nohup java -jar jar包名 --server.port=端口号 > admin/blog/_server.log 2>&1 &
echo 'start success'

c
nohup java -jar zww-blog-0.0.1-SNAPSHOT.jar --server.port=7777 > blog.log 2>&1 &
echo 'start success'
  1. > server.log: 这部分将标准输出重定向到 server.log,即丢弃所有标准输出,不会显示在终端上。(也就是你在idea上报错的所有信息都跑到这个文件上了,要看可以vi看或者cat或者tail -f 文件名实时追踪)
  2. 2>&1: 这部分将标准错误输出(文件描述符 2)重定向到标准输出(文件描述符 1),也就是同样丢弃,不会显示在终端上。
  3. &: 这个符号表示将整个命令放入后台运行。

实时查看后台

tail -f server.log

查看启动状况

ps -ef | grep zww-admin-0.0.1-SNAPSHOT.jar

image-20240829214132483

nginx配置文件

 cat /www/server/nginx/conf/nginx.conf

image-20240829220055668

类似于vue组件,相当于app组件vhost下所有conf结尾的包含在主配置文件里

创建博客配置文件

vi /www/server/panel/vhost/nginx/zww_blog.conf

server {
                listen 8010;
                server_name 192.168.233.135;
                charset utf-8;
                                location / {
                                    alias /www/zww_blog/vue-admin/dist/;
                                        try_files $uri $uri/ /index.html;
                                        index  index.html index.htm;
                                }

}

server {
                listen 8011;
                server_name 192.168.233.135;
                charset utf-8;
                                location / {
                                    alias /www/zww_blog/vue-blog/dist/;
                                        try_files $uri $uri/ /index.html;
                                        index  index.html index.htm;
                                }

}

好像有一些配置这里会多一个服务器 location为 api,类似vue的代理转发,但是已经在vue项目里设置了一个proxy服务器 就不用在这里设置了

重启服务

 /www/server/nginx/sbin/nginx -s reload

然后访问测试

image-20240830143550597

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2090399.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

uniapp icons图标不显示的问题解决

如图所示 在uniapp开发中 突然发现icons组件不显示图标了 &#xff0c;而且没什么报错 这是为什么 其实这最大的原因就是你上面的代码在取值上没有做好null的判断 导致参数取值报错 因此影响了页面正常的渲染 导致下面的图标都不显示

vsCode多文件标签栏换行显示

1.文件——首选项——点‘设置’ 2.输入 wrap tabs 并勾选Workbench › Editor: Wrap Tabs

安装MySQL,navicat以及Django配置遇到的一些问题

MySQL安装问题 安装MySQL按照了此文章&#xff1a; MySQL数据库下载及安装教程&#xff08;最最新版&#xff09;_mysql下载安装-CSDN博客https://blog.csdn.net/weixin_39289696/article/details/128850498首先是遇到了starting the server红色叉号显示 按照上面文章的介绍…

《机器学习》【项目】 爬虫爬取数据、数据分词、贝叶斯算法、判断分类 <完整实战详解> (全篇完结)

目录 一、回顾爬虫 1、什么是爬虫 2、实操爬虫 1&#xff09;寻找标签位置 2&#xff09;爬取苏某某购产品好评数据 运行代码&#xff1a; 3&#xff09;爬取差评内容 二、数据分词 1、将获取到的好评和差评数据进行初步分词 1&#xff09;初步分词 2&#xff09;内…

华为云征文|1分钟熟悉Flexus X实例基础操作

前言 随着云计算技术的普及&#xff0c;越来越多的企业和个人开始将业务迁移到云端。华为云作为国内领先的云服务提供商&#xff0c;推出了高性能、高可用性的Flexus云服务器X&#xff0c;以满足不同用户的需求。本文将详细介绍如何购买Flexus云服务器X以及初次使用时的基本操…

物联网平台组件2: 平台校验规则

加载不通的规则引擎配置文件&#xff0c;使用DynamicExpresso校验采集数据&#xff0c;得出是否告警 rules.json {"Rules": [{"Description": "温度超过阈值警报","Condition": "temperature > 30","Action":…

2024 Xiangtan University Summer Camp-Div.2 个人题解 (待补完)

前言&#xff1a; 教练突然发在群里的一个比赛&#xff0c;想到自己好像也没什么事干&#xff0c;就参加了个div2&#xff08;太菜了&#xff09;&#xff0c;我看着好像没啥人发这玩意的题解&#xff0c;cf上比赛结束了也看不了别人代码&#xff0c;就将自己的写出题的代码分享…

鸿蒙Next 单元测试框架——hypium

一 框架概述 单元测试框架(hypium)是HarmonyOS上的测试框架&#xff0c;提供测试用例编写、执行、结果显示能力&#xff0c;用于测试系统或应用接口。 表1 单元测试框架功能特性 二 安装使用 目前hypium以npm包的形式发布, 因此需要在Deveco Studio 工程级package.json内配…

Javascript集合引用类型(一)

思维导图 Javascript集合引用类型(一)思维导图 对象 数组与定型数组 Map、WeakMap、Set以及WeakSet类型 1. Object 创建的对象的两种方式&#xff1a;new 操作符和对象字面量 使用对象字面量的更多&#xff0c;因为代码量少&#xff1b; 2. Array Array构造函数,es6新增…

android studio avd设置中文输入法和时间

设置语言 打开avd 找到设置 找到语言 找到系统语言 把中文移动到第一个就是默认语言了 如果想删除英文可以点击三个点有个移除 随便找个输入框&#xff0c;默认就是中文了 设置时间 点击设置->系统->日期和时间 关掉自动设置 选择一下时区为上海即可

【Datawhale X 李宏毅苹果书 AI夏令营】深度学习自适应学习率(AdaGrad/RMSProp/Adam)及其调度

1、自适应学习率 理论上&#xff1a;在训练一个网络&#xff0c;训练到现在参数在临界点附近&#xff0c;再根据特征值的正负号判断该 临界点是鞍点还是局部最小值实际上&#xff1a;①在训练的时候&#xff0c;要走到鞍点或局部最小值非常困难&#xff1b;②多数还未走到临界…

第十周:机器学习笔记

第十周机器学习周报 摘要Abstract机器学习——self-attention&#xff08;注意力机制&#xff09;1. 为什么要用self-attention2. self-attention 工作原理2.1 求α的两种方式2.2 attention-score&#xff08;关联程度&#xff09; Pytorch学习1. 损失函数代码实战1.1 L1loss&a…

EmguCV学习笔记 VB.Net 8.4 pyrMeanShiftFiltering

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 EmguCV是一个基于OpenCV的开源免费的跨平台计算机视觉库,它向C#和VB.NET开发者提供了OpenCV库的大部分功能。 教程VB.net版本请访问…

如何构建大型超市数据处理系统?Java SpringBoot搭配MySQL,实现高效数据管理!

&#x1f34a;作者&#xff1a;计算机毕设匠心工作室 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目…

深入了解Pod(一)

一、pod的配置文件 Pod配置文件的属性说明 属性名称 取值类型 是否必须 取值说明 version String √ 版本号 &#xff0c;例如V1 kind String √ Pod metadata Object √ 元数据 metadata.name String √ Pod名称 metadata.namespace String √…

分销渠道|中小企业可以有推广计划吗?

大家好&#xff0c;我是林叔&#xff0c;专注于分享SaaS企业渠道分销的实战经验。今天&#xff0c;我们来聊聊一个常被中小企业主忽视但极具潜力的营销策略——推广计划。很多人可能觉得推广计划是大企业的专利&#xff0c;但实际上&#xff0c;对于中小企业而言&#xff0c;它…

pycharm怎样关联anaconda虚拟环境.conda executable not found

刚下载的pycharm和anaconda怎样进行关联。 打开pycharm时&#xff0c;点击右侧的conda环境时&#xff0c;出现anaconda.conda executable not found&#xff0c;说明你的anaconda和pycharm没有进行关联。 第一步&#xff1a;重启电脑 第二步&#xff1a;点击圆圈中的文件夹按…

laravel8快速开发简单博客系统(二)

目录 一、创建文章增删改成提交的控制器 1、注释文章查看权限&#xff0c;非登录状态可以查看文章列表页 2、创建提交控制器post 3、创建数据表 4、创建提交post资源路由 5、创建post控制器view目录post 二、文章添加功能实现 1.模板显示 2.复制home.blade.php模板到po…

Django+Vue宠物服务管理系统的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 需要的环境3.2 Django接口层3.3 实体类3.4 config.ini3.5 启动类3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍&#xff1a;CSDN认证博客专家&#xff0c;CSDN平台Java领域优质创作者&…

探讨离线AI知识库的技术实现:AntSKPro AI 离线知识库一体机

在现代社会&#xff0c;离线AI解决方案越来越受到关注。最近我接触到一款名为AntSKPro AI 离线知识库一体机的设备&#xff0c;它能在没有网络连接的情况下提供强大的AI支持。这里我想分享一下这款设备的一些技术亮点和使用体验。 技术架构与实现 AntSKPro AI 离线知…