当前位置： 首页 > news >正文

使用 1panel面板 部署 springboot 和 vue

news 文章来源：https://blog.csdn.net/weixin_45940369/article/details/140892045 2025/4/6 17:41:59

代码仓库：还没弄

目录

  • 网站介绍
  • 安装步骤
  • 1. 准备云服务器
  • 2. 准备域名（可跳过）
  • 3. 安装1panel面板
  • 4. 服务器开放端口
  • 5. 进入1panel面板
  • 6. 安装并启动软件（服务器和面板开放端口）
  • 7. 打包并上传项目
    • 7.1 打包 Java项目（springboot ）项目并上传（端口我设置的是9090）
    • 7.2 打包 vue 项目并上传（端口我设置的是8200）
  • 8. 上传 并 创建Java运行环境（服务器和面板开放端口）
  • 9. 上传 并 添加网站 - 静态网站（vue）（服务器和面板开放端口）
  • 10. 数据库配置
  • 11. 修改项目里的数据库配置 并 重启Java服务
  • 12. 刷新对应网站，即可访问

网站介绍

仿照别人项目做了个基于 springboot 和 vue 的网站，在腾讯云服务器上，通过 宝塔面板 部署了该项目。

项目的技术栈：Vue3、Vite5、Axios、Element Plus、Wangeditor5、Highlightjs、Spring Boot2、Mybatis、MySQL8

安装步骤

1. 准备云服务器

买一个低配置的云服务器就行，哪家的都行

选择常见linux的发型版本，centos、debian、ubuntu 啥的都行

在这里插入图片描述

2. 准备域名（可跳过）

买个普通的域名，并接上服务器

国内域名需要备案，尽量写：个人学习项目，这样容易过

3. 安装1panel面板

前往1panel官网，准备安装

https://repository-proxy.fit2cloud.com/1panel/index.html

在这里插入图片描述

在这里插入图片描述

进入云服务器控制台，登录终端，并切换到root用户，再粘贴安装命令，进行安装

在这里插入图片描述

密码要是不知道or忘了，可去云服务器重置密码（上图红框处）

在这里插入图片描述

等待安装完成（约几分钟）

期间会要求配置一些选项，如文件保存路径、面板端口号、面板登录账号和密码

建议修改成好记忆的，当然也可以无脑回车按默认的来。不过不论如何，都建议保存到某个文件中，以防忘记。

如果你忘了面板信息也没事，登录终端，切换到root用户，输入以下命令

1pctl user-info

即可查看

在这里插入图片描述

4. 服务器开放端口

上面设置的端口号（假定是22），要在服务器那开放端口

在这里插入图片描述

写入22（假定是），然后保存

在这里插入图片描述

5. 进入1panel面板

访问面板地址，并输入用户名和密码。登录前后还需要同意协议

在这里插入图片描述

6. 安装并启动软件（服务器和面板开放端口）

先配置镜像加速，否则可能会安装失败

应用商店 - 已安装 - 快速跳转 - 镜像加速 - 设置

https://docker.1panel.live
https://ghcr.nju.edu.cn
https://docker.nju.edu.cn

返回应用商店 - 安装 OpenResty、MySQL、phpMyAdmin 这三款软件，并启动

在这里插入图片描述

可在 应用商店 - 已安装 - 查看各软件的端口，并在 云服务器 和 面板中开放该端口

在这里插入图片描述

在服务器开放端口

在这里插入图片描述

在面板开放端口

主机 - 防火墙 - 创建端口规则

在这里插入图片描述

7. 打包并上传项目

7.1 打包 Java项目（springboot ）项目并上传（端口我设置的是9090）

点击 m（maven） - 双击package，等待片刻，即可完成打包，最终是打包成了jar或者war文件

在这里插入图片描述

之后上传到面板文件

7.2 打包 vue 项目并上传（端口我设置的是8200）

修改后端端口（改成服务器的）

在这里插入图片描述

vscode软件 - NPM脚本 - build ，最后生成的是一个dist文件夹

在这里插入图片描述

之后上传到面板文件

8. 上传 并 创建Java运行环境（服务器和面板开放端口）

把 jar包之类的东西上传到面板文件中

网站 - 运行环境 - Java - 创建运行环境

运行目录 - 选中到 jar包

启动命令：java -jar xxx.jar （xxx,jar改成你自己jar包的名字）

端口号自己设置一下（可以设置成一样的），我这里设置的是9090

在这里插入图片描述

服务器和面板记得开放端口，前面说过方法，这里不重复

9. 上传 并 添加网站 - 静态网站（vue）（服务器和面板开放端口）

网站 - 网站 - 创建环境 - 静态网站

主域名处写下域名和端口就行，比如我写的是：106.53.164.141:8200

代号（就是网站目录的名称）自行设置

之后进入网站目录，把 dist文件夹上传上来

在这里插入图片描述

点进去刚刚设置的网站 - 网站目录 - 运行目录选择 /dist - 保存并重载

同时确保 root目录 选到的是 index文件夹（不是的话重选）

在这里插入图片描述

点击配置文件，把下面的代码加进去并保存

location / {try_files $uri $uri/ /index.html last; index index.html; 
}

在这里插入图片描述

服务器和面板记得开放端口，前面说过方法，这里不重复

10. 数据库配置

先确保 mysql 和 phpMyAdmin 这两个端口号都开放

数据库 - 新建数据库

按自己项目情况来填写

权限改为所有人

在这里插入图片描述

管理 - phpMyAdmin - 进入web端musql管理工具

选择数据库 - 导入 - 上传文件

选择sql文件并上传

在这里插入图片描述

向下滑动，点击执行

在这里插入图片描述

11. 修改项目里的数据库配置 并 重启Java服务

之后修改一下项目里的数据库配置并保存

在这里插入图片描述

修改配置后，需要重启Java项目

在这里插入图片描述

12. 刷新对应网站，即可访问

在这里插入图片描述

在这里插入图片描述

相关文章：

使用 1panel面板 部署 springboot 和 vue

代码仓库：还没弄 目录 网站介绍安装步骤1. 准备云服务器2. 准备域名（可跳过）3. 安装1panel面板4. 服务器开放端口5. 进入1panel面板6. 安装并启动软件（服务器和面板开放端口）7. 打包并上传项目7.1 打包 Java项目&#…...

编程日记 2024/8/5 6:29:27

快速体验LLaMA-Factory 私有化部署和高效微调Llama3模型（曙光超算互联网平台异构加速卡DCU）

序言 本文以 LLaMA-Factory 为例，在超算互联网平台SCNet上使用异构加速卡AI 显存64GB PCIE，私有化部署Llama3模型，并对 Llama3-8B-Instruct 模型进行 LoRA 微调、推理和合并。 快速体验基础版本，请参考另一篇博客：快…...

编程日记 2024/8/5 6:28:26

Cocos Creator 3.8.x bundle设置最佳方案

A： 项目开始场景(Start Scene)加载显示最快的Bundle设置方案：不要使用resources文件夹，除了项目开始场景(Start Scene)所在文件夹，将所有文件分类设置成Bundle； B： A方案较为麻烦，项目文件夹多时…...

编程日记 2024/8/5 6:27:25

【论文笔记】4D Millimeter-Wave Radar in Autonomous Driving: A Survey

原文链接：https://arxiv.org/abs/2306.04242 I. 引言 传统毫米波雷达（3D毫米波雷达）测量俯仰角的能力有限，数据通常仅包括距离、水平角和多普勒速度信息。此外，3D雷达数据存在噪声且分辨率低（尤其是水平角…...

编程日记 2024/8/5 6:26:24

搭建 Rancher 服务，配置k8s集群

1. 前提条件 前提条件： 安装docker，要求版本各节点版本一致。网上还有额外的要求：关闭swap、禁用selinux等等。 2. 搭建 Rancher 服务 直接通过docker命令实现即可，很方便。 docker run -d \--name rancher \--restart unles…...

编程日记 2024/8/5 6:25:23

数据恢复的定制之旅：打造SQL Server的专属恢复方案

数据恢复的定制之旅：打造SQL Server的专属恢复方案 在企业运营中，数据的安全性和可靠性是至关重要的。SQL Server作为企业级数据库解决方案，提供了多种数据恢复技术以应对不同的数据丢失场景。然而，面对特定的业务需求和复杂的数…...

编程日记 2024/8/5 6:24:22

Javascript常见算法详解

在JavaScript（JS）中，常见的算法涵盖了多个领域，从基础的数组操作到更复杂的排序、搜索和数据结构算法。下面是一些在JS中常见的算法示例： 1. 排序算法 Java排序算法-CSDN博客 冒泡排序（Bubble Sort&#x…...

编程日记 2024/8/5 6:23:21

MySQL数据管理 - 查询语句

文章目录 查询数据1 查询指定列2 条件查询3 合并查询4 模糊查询5 聚合函数查询6 对值进行排序7 分组查询8 分页查询9 数据库关联查询1 内连接 INNER JOIN2 LEFT JOIN3 右连接 10 数据库子查询参考 查询数据 数据库最常用的操作就是查询，也是数据操作的基础&#xf…...

编程日记 2024/8/5 6:22:20

经典图论算法回顾之Bellman-Ford算法

Dijkstra最短路径算法存在的一个问题是不能处理负权图（详见：经典图论算法回顾之Dijkstra算法。今天要回顾的Bellman-Ford算法（wikipedia：Bellman–Ford algorithm）可以求出有负权图的最短路径，并可以对最短…...

编程日记 2024/8/5 6:21:19

LinuxC++(10)：调用可执行程序

认识system函数 可以直接用system在代码中实现调用shell命令 /bin/ls -l /tmp表示执行ls -l命令，打开/tmp地址 而前面的/bin/表示这是shell命令，不可少，可以认为，/bin/后面的就是等价于shell里面输入的命令。 然后，cou…...

编程日记 2024/8/5 6:19:16

C语言指针·高级用法超详解（指针运算、野指针、悬空指针、void类型指针、二级以及多级指针）

目录 1. 指针的运算 2. 野指针和悬空指针 2.1 野指针 2.2 悬空指针 3. void类型指针 4. 二级指针和多级指针 4.1 命名规则 4.2 作用 4.2.1 二级指针可以操作一级指针记录的地址 4.2.2 利用二级指针获取变量中记录的数据 1. 指针的运算 文章开始前可以先了…...

编程日记 2024/8/5 6:17:14

SQL注入：MySQL元数据库,外网实战手工SQL注入

MySQL元数据库 MySQL的元数据库是一组特殊的数据库，用于存储MySQL服务器的元数据信息，在sql注入中较为常用为以下两种元数据库： information_schema：这个数据库包含了MySQL服务器上所有其他数据库的元数据信息。例如数据库名、表…...

编程日记 2024/8/5 6:14:10

接口与抽象类有什么区别

接口：只能包含抽象方法，成员变量只能是public static final 类型 是对行为的抽象 先约定再接口再实现 抽象类：包含成员变量和一般方法和抽象方法，当继承时，子类必须实现抽象类中的抽象方法...

编程日记 2024/8/5 6:12:08

【时时三省】unity test 测试框架 使用 code blocks 移植（核心文件：unity.c， unity_fixture.c）

山不在高，有仙则名。水不在深，有龙则灵。 ----CSDN 时时三省 目录 1，移植介绍 2，使用 Code::Blocks 17.12 创建工程 3，搬移文件入工程目录 4，更改代码 5，向工程添加文件 6，运…...

编程日记 2024/8/5 6:10:05

安装Docker以及安装过程中的错误解决

一、纯享版教程＋操作截图 环境：centOs 7 FinalShell ！！！此教程针对第一次安装docker的友友，如果已经安装过且报错的朋友，请移步报错合集。 1.卸载旧版本（无论是否安装过都建议执…...

编程日记 2024/8/5 6:08:03

PXE实验

实验前准备 关闭VMware的dhcp 点击 编辑 点击 虚拟网络编辑器 选择 NAT模式 将dhcp取消勾选 准备两台虚拟机 一台试验机，（网络环境正常并且有图形化的界面的rhel7） 一台测试机 init 5 --------------> 开启图形化界面 如…...

编程日记 2024/8/5 6:06:01

Spring - 解析 统一数据格式返回以及统一异常处理

接上篇文章的统一数据格式返回… 文章目录 1. 统一异常处理1.1 使用 2. 统一数据返回和统一异处理是怎么实现的2.1 initHandleAdapters2.2 initHandleExceptionResolvers 1. 统一异常处理 1.1 使用 统一异常处理的两个关键的注解是ControllerAdvice ExceptionHandler Contro…...

编程日记 2024/8/5 6:02:58

用Manim实现——计算和绘制图形下方区域

用Manim实现——计算和绘制图形下方区域 get_area 函数 get_area是一个用于计算和绘制图形下方区域的函数，常用于图形动画库（如 Manim） get_area(graph, x_rangeNone, color(ManimColor(#58C4DD),ManimColor(#83C167)), opacity0.3, bounde…...

编程日记 2024/8/5 6:01:56

MySQL 保姆级教程（十五）： 组合查询

第 17 章 组合查询 17.1 组合查询 MySQL 允许执行多个查询（多条 SELECT 语句），并将结果作为单个查询集返回 17.2 创建组合查询 可用 UNION 操作符来组合数条 SQL 查询 17.2.1 使用 UNION 输入: SELECT user.USER FROM user UNION SELEC…...

编程日记 2024/8/5 6:00:55

《动手做科研》06. 如何产生新的研究想法

地址链接:《动手做科研》06. 如何产生新的研究想法 欢迎加入我的知识星球，定期分享AI论文干货知识！ 导读: 提出好的研究想法是相当困难的，特别是当你刚接触一个领域时——这需要对文献中的空白有所了解。然而，产生研究想法的过程可…...

编程日记 2024/8/5 5:55:49

【Kubernetes】Deployment 的状态

Deployment 的状态 Deployment 控制器在整个生命周期中存在 3 3 3 种状态： 已完成（Complete）进行中（Progressing）失败（Failed） 通过观察 Deployment 的当前特征，可以判断 Deploym…...

编程日记 2024/8/5 5:54:47

新手学习Gazebo+ros仿真控制小车-----易错和自己理解

赵虚左老师讲的很详细，这里只是理一下思路，说下突然出现“新”概念之间的关系。 urdf文件:里面是配置模型的，既有模型的位置、尺寸、颜色，也包含复杂的物理模型信息比如：转动惯量，碰撞box大小等等&#xff…...

编程日记 2024/8/5 5:53:46

jdbc(mysql)

1.概述 jdbc：java database connection（java与数据库连接） java可以连接不同数据库，不同数据库连接细节不同，具体细节都由数据库自己实现 由java设计出一系列连接数据库的接口规范，然后由不同的数据库开发…...

编程日记 2024/8/5 5:52:45

【Linux】搜索log在哪个文件中执行的方法

在Linux中，如果你需要找到包含特定文本（比如一段log）的文件，你可以使用grep命令结合一些其他工具来实现这一目的。这里有几个方法可以帮助你找到包含特定log内容的文件。 1. 使用grep直接在特定目录或文件中搜索 如果你知道log大…...

编程日记 2024/8/5 5:50:41

web小游戏开发：2048（完）移动操作及动画效果

web小游戏开发：2048（完）移动操作及动画效果 添加随机数字游戏开始时的初始化显示分数移动和合并获取行列元素下标记录移动轨迹完整的 js小结添加随机数字 书接前文，我们在前边定义了一个 move 方法，暂时先往后放放。 在我们已经初始化好的界面上，我们需要先制作一个出现…...

编程日记 2024/8/5 5:48:38

Redis学习笔记——第20章 Lua脚本

第20章 Lua脚本 20.1 创建并修改Lua环境 20.1.1 创建Lua环境 服务器创建一个新的基本的Lua环境 20.1.2 载入函数库 修改Lua环境，载入一些库函数 20.1.3 创建redis全局表格 全局变量，支持在Lua脚本中执行redis命令 20.1.4 使用redis自制随机函数来…...

编程日记 2024/8/5 5:47:37

MySQL--日志管理

前言：本博客仅作记录学习使用，部分图片出自网络，如有侵犯您的权益，请联系删除 一、日志简介 MySQL日志主要分为4类，使用这些日志文件，可以查看MySQL内部发生的事情。这4类日志分别是: 错误日志&#xff1…...

编程日记 2024/8/5 5:45:36

【Nuxt】内置组件和全局样式使用

内置组件 Nuxt3框架也提供一些内置的组件，常用的如下： SEO组件：Html、Body、Head、Title、Meta、Style、Link、NoScript、BaseNuxtWelcome:欢迎页面组件，该组件是nuxt/ui的部分NuxtLayout:是Nuxt自带的页面布局组件NuxtPage:是N…...

编程日记 2024/8/5 5:43:34

Java中spring boot validation 自定义注解使用

创建一个注解 Target({ElementType.FIELD})//需要写注解的三三个要素 Retention(RUNTIME) Documented Constraint(validatedBy {IsSystemYesNoVaildation.class})//绑定 在这里会报错 你需要去实现 public interface IsSystemYesNo {String message() default "数据字典&…...

编程日记 2024/8/5 5:42:33

Android笔试面试题AI答之广播（1）

文章目录 1.简述广播的分类和使用场景 ？一、广播分类二、使用场景举例总结 2.广播的两种注册方式的区别？1. 注册位置与方式2. 生命周期与持久性3. 接收广播的时机4. 安全性与权限5. 优先级与有序广播总结 3.简述广播发送和接收的原理 ？一、广…...

编程日记 2024/8/5 5:39:30