介绍:本文用的经典的前后端分离开源项目ruoyi

Gitee链接地址:https://gitee.com/y_project/RuoYi

一、拉取项目:

利用Git把项目拉取到本地,也可以直接利用idea工具拉取,如图点击Get from VCS

填入远程仓库地址url,点击clonde

等待一段时间后项目会自动加载入idea工具中

二、准备项目所需环境的修改:

1、部署后端部分:

Ⅰ:后端部分项目配置文件的修改

进入ruoyi-admin中,打开yml配置文件,这里有两个yml文件,需要根据你自己的电脑做出相对应的修改

先点击application-druid.yml这个配置文件,里面配置很多,但是你只需要修改数据库配置就行了。

这里的数据库地址如果改成你相对应的服务器ip地址,用户名,密码根据自己的数据库自行更改。

然后在点击application.yml这个配置文件,这个文件只需要修改redis配置就行了。

这里填自己服务器对应的IP,端口填自己服务器对应的端口

这里运行项目的话会报几个错误,一个是log日志地址错误,找不到路径,还有就是数据库连接,redis连接,因为这两个这里还没有配置,放在后面配置

日志地址错误:需要去对应的文件修改本机路径:点击logback.xml文件,修改日志存放路径到本机下,比如我的项目放在桌面上,然后在桌面建的一个log文件来存放log日志。

你可以根据自己的需要做出相应的修改。

Ⅱ:进行项目打包,本文用的是jar包方式,也可以用war,道理是一样的!

打包之前一定确认好自己redis、mysql中对应服务器ip地址是否正确,用户名、密码是否正确等。

打包方式很简单,ruoyi项目已经给我们加了maven打包依赖,不用我们手动添加了。

点击右边的maven--->在点击package

打包完成后、找到ruoyi-admin.jar包上传到服务器,我这里上传是用的Winscp工具。

在服务器根目录创建一个java文件夹,把打包好的jar包存放到这里

Ⅲ:安装服务器中jar包所需要的运行环境

1、安装Jdk8:

这里为了方便我们就用yum安装方式安装了。

1、先查看是否安装了JDK

yum list installed |grep java

2、卸载CentOS系统Java环境

yum -y remove java-1.8.0-openjdk* *代表卸载所有openjdk相关文件输入

yum -y remove tzdata-java.noarch 卸载tzdata-java

3、查看JDK软件包版本

yum -y list java*

4、查看JDK软件包列表 安装JDK

yum install -y java-1.8.0-openjdk* 自动安装java1.8.0所有程序

控制台返回Complete安装成功!!

2、安装redis:

这里也用yum安装、默认安装的端口是6379,这里就不更改了!

yum install redis

启动redis:

systemctl start redis

3、安装mysql:

也用yum安装、默认端口是3306

查看数据库是否安装:

yum list installed | grep mysql

使用yum安装mysql数据库

yum -y install mysql-server mysql mysql-devel

命令将:mysql-server、mysql、mysql-devel都安装好,当结果显示为“Complete!即安装完毕。

启动mysql

systemctl start mysqld

安装完成后,使用本地数据库工具,Navicat 等等,连接到服务器数据库,创建ruoyi项目所需要的数据库

导入相对应的表

4、然后服务器进入你存放jar包目录下,输入命令:

前台启动:java -jar 项目名称.java

后台启动:java -jar 项目名称.java &

启动成功后浏览器访问后台,输入你的服务器ip地址+端口号,这里默认的端口号是8080

例如我的:192.168.44.128:8080

2、部署前端部分:

1、打开ruoyi-ui前端部分

打开配置文件vue.config.js,修改其中target地址,此地址为你后端项目访问地址:改成后端项目启动浏览器访问地址就行了。

开始前端代码部分打包,在ruoyi-ui模块右击,点击open in打开终端!

先安装项目依赖输入:npm install

在进行项目打包:npm run build:prod

打包完成后会在项目ruoyi-ui目录下生成一个dist文件!

把生成的dist文件准备好,进入服务器,安装nginx这里也用yum方式安装:

1、安装 nginx

yum install -y nginx

安装完成后nginx、会在相应目录下生成配置文件等等

nginx 配置信息

1、网站文件存放默认位置(Welcome to nginx 页面)

/usr/share/nginx/html

2、网站默认站点配置

/etc/nginx/conf.d/default.conf

3、自定义 nginx 站点配置文件存放目录

/etc/nginx/conf.d/

4、nginx 全局配置文件

/etc/nginx/nginx.conf

5、启动 nginx

service nginx start

6、关闭 nginx

service nginx stop

7、重启 nginx

service nginx reload

在服务器/root目录下新建一个文件夹download,把打包生成的dist文件放到此目录下

修改nginx配置文件:

1、cd /etc/nginx/

2、vim nginx.conf

在文件中加入此行配置,root下的项目路径改为上面存放项目的路径!!!!

location为转发到后端路径!!!保存!!!

配置完成后启动nginx

cd /root/usr/sbin/  #进入此目录下启动nginx

./nginx       #启动命令

浏览器访问:IP+端口,nginx端口默认的是80

启动成功!!!!!!

本文用于学习,如有错误请纠正!!!!!

服务器上详细前后端分离项目搭建(springboot+vue)的更多相关文章

  1. 在centos7.6上部署前后端分离项目Nginx反向代理vue.js2.6+Tornado5.1.1,使用supervisor统一管理服务

    原文转载自「刘悦的技术博客」https://v3u.cn/a_id_102 这一次使用vue.js+tornado的组合来部署前后端分离的web项目,vue.js不用说了,前端当红炸子鸡,泛用性非常广 ...

  2. 分享我在前后端分离项目中Gitlab-CI的经验

    长话短说,今天分享我为前后端分离项目搭建Gitlab CI/CD流程的一些额外经验. Before Gitlab-ci是Gitlab提供的CI/CD特性,结合Gitlab简单友好的配置界面,能愉悦的在 ...

  3. List多个字段标识过滤 IIS发布.net core mvc web站点 ASP.NET Core 实战:构建带有版本控制的 API 接口 ASP.NET Core 实战:使用 ASP.NET Core Web API 和 Vue.js 搭建前后端分离项目 Using AutoFac

    List多个字段标识过滤 class Program{  public static void Main(string[] args) { List<T> list = new List& ...

  4. 《Spring Boot 入门及前后端分离项目实践》系列介绍

    课程计划 课程地址点这里 本课程是一个 Spring Boot 技术栈的实战类课程,课程共分为 3 个部分,前面两个部分为基础环境准备和相关概念介绍,第三个部分是 Spring Boot 项目实践开发 ...

  5. 基于Vue的前后端分离项目实践

    一.为什么需要前后端分离 1.1什么是前后端分离  前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目.怎么理解前后端分离?直观的感觉就是前后端分开去做,即功 ...

  6. 超简单!asp.net core前后端分离项目使用gitlab-ci持续集成到IIS

    现在好多使用gitlab-ci的持续集成的教程,大部分都是发布到linux系统上的,但是目前还是有很大一部分企业使用的都是windows系统使用IIS在部署.NET应用程序.这里写一下如何使用gitl ...

  7. 【Docker】1、 前后端分离项目 下载启动运行

    人人开源前后端分离项目下载与配置 文章目录 人人开源前后端分离项目下载与配置 前后端分离框架介绍 后端项目下载与配置 1.renren-fast后台项目介绍 2.开发环境搭建 3.下载后端renren ...

  8. Aspnet Mvc 前后端分离项目手记(二)关于token认证

    在前后端分离的项目中,首先我们要解决的问题就是身份认证 以往的时候,我们使用cookie+session,或者只用cookie来保持会话. 一,先来复习一下cookie和session 首先我们来复习 ...

  9. 《Spring Boot 入门及前后端分离项目实践》目录

    开篇词:SpringBoot入门及前后端分离项目实践导读 第02课:快速认识 Spring Boot 技术栈 第03课:开发环境搭建 第04课:快速构建 Spring Boot 应用 第05课:Spr ...

随机推荐

  1. 微信小程序中涉及虚拟产品购买,ios暂不支持的相关整理意见

    这个东西呢也不能怪微信小程序,属实苹果搞的事情,那怎么小程序相关内容去通过审核呢? 首先我们要搞清楚哪些属于虚拟商品:如某某书币,某某会员,或者是提前编辑好的网课,文档等都属虚拟商品购买,简言之就是没 ...

  2. 007.iSCSI服务器CHAP双向认证配置

    一 iSCSI和CHAP介绍 1.1 iSCSI 磁盘 iSCSI后端存储支持多种设备类型,主要有: 文件 单一分区(partition) 磁盘 数组 RAID LVM 本手册建议以裸磁盘vdb作为示 ...

  3. ES6-11学习笔记--Generator

    基本使用 function后面加个*号 function* foo() { for (let i = 0; i < 3; i++) { yield i; // yield不能作为构造函数去使用, ...

  4. C#编写程序,找一找一个二维数组中的鞍点

    编写程序,找一找一个二维数组中的鞍点(即该位置上的元素值在行中最大,在该列上最小.有可能数组没有鞍点).要求: 1.二维数组的大小.数组元素的值在运行时输入: 2.程序有友好的提示信息. 代码: us ...

  5. 【Android开发】EasyPermissions 请求权限

    安卓6.0以后,开发应用的时候,仅在AndroidManifest.xml中申请权限已经不可以了,需要在代码中动态申请. 现在看一个google推出的机制:EasyPermissions 引入步骤: ...

  6. Blazor组件自做六 : 使用JS隔离封装Baidu地图

    1. 运行截图 演示地址 2. 在文件夹wwwroot/lib,添加baidu子文件夹,添加baidumap.js文件 2.1 跟上一篇类似,用代码方式异步加载API,脚本生成新的 body > ...

  7. SQL注入之延迟盲注

    延迟盲注 你不知道你输入的数据在sql被执行后是否是正确或错误的.你只知道有数据. 利用原理 借助if语句,如果正确就sleep(5),延迟5秒返回数据.通过数据返回的时间大小判断自己的语句是否正确执 ...

  8. 鲜为人知帝国CMS内容页调用上一篇和下一篇的精华方法汇总

    <span style="float:left">上一篇:[!--info.pre--]</span><span style="float: ...

  9. el-carousel手动切换图片

    添加ref 和 点击哪个地方切换的方法 <div class="center">       <div class="pw between"& ...

  10. go源码阅读 - sync/rwmutex

    相比于Mutex来说,RWMutex锁的粒度更细,使用RWMutex可以并发读,但是不能并发读写,或者写写. 1. sync.RWMutex的结构 type RWMutex struct { // 互 ...