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

使用 1panel面板 部署 springboot 和 vue

news 来源：原创 2024/9/20 9:33:51

1panel面板 部署 spring boot 和 vue 教程

代码仓库：还没弄

目录

  • 网站介绍
  • 安装步骤
  • 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. 刷新对应网站，即可访问

在这里插入图片描述

在这里插入图片描述

相关文章：

  • 北京网站建设多少钱？
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • Python酷库之旅-第三方库Pandas(073)
  • Preferences首选项存储工具类（Harmony OS）
  • 【实现100个unity特效之12】Unity中的冲击波 ——如何使用ShaderGraph制作一个冲击波着色器
  • 实时数据监控，三防平板在工业领域的应用解析
  • Unity补完计划 之 Mask SortingGroup
  • 哈尔滨等保测评——为工业网络安全保驾护航新航标
  • 【康复学习--LeetCode每日一题】3131. 找出与数组相加的整数 I
  • [ Python ]使用Charles对Python程序发出的Get与Post请求抓包-解决Python程序报错问题
  • 企元数智突破超竞争时代：借力欧赛斯，实现商业辉煌
  • [Modbus] Modbus协议开发-基本概念（一）
  • 迭代次数顺序的双重性
  • leetCode- - - 链表
  • 工业设备数据采集方案的设计实施与应用-天拓四方
  • Redis--缓存击穿、缓存穿透、缓存雪崩
  • 21-原理图的可读性的优化处理
  • 【附node操作实例】redis简明入门系列—字符串类型
  • 30秒的PHP代码片段（1）数组 - Array
  • C++回声服务器_9-epoll边缘触发模式版本服务器
  • ECMAScript入门（七）--Module语法
  • E-HPC支持多队列管理和自动伸缩
  • golang中接口赋值与方法集
  • iOS动画编程-View动画[ 1 ] 基础View动画
  • Java新版本的开发已正式进入轨道，版本号18.3
  • java中的hashCode
  • springboot_database项目介绍
  • Transformer-XL: Unleashing the Potential of Attention Models
  • vue2.0项目引入element-ui
  • vue数据传递--我有特殊的实现技巧
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 二维平面内的碰撞检测【一】
  • 服务器从安装到部署全过程（二）
  • 免费小说阅读小程序
  • 批量截取pdf文件
  • ​七周四次课（5月9日)iptables filter表案例、iptables nat表应用
  • # Redis 入门到精通（九）-- 主从复制（1）
  • #07【面试问题整理】嵌入式软件工程师
  • #DBA杂记1
  • #我与Java虚拟机的故事#连载07：我放弃了对JVM的进一步学习
  • (delphi11最新学习资料) Object Pascal 学习笔记---第13章第6节 （嵌套的Finally代码块）
  • (poj1.2.1)1970(筛选法模拟)
  • （南京观海微电子）——示波器使用介绍
  • （一）Docker基本介绍
  • （转）http-server应用
  • （转）总结使用Unity 3D优化游戏运行性能的经验
  • . ./ bash dash source 这五种执行shell脚本方式 区别
  • .axf 转化 .bin文件 的方法
  • .gitignore文件—git忽略文件
  • .NET Framework 4.6.2改进了WPF和安全性
  • .net wcf memory gates checking failed
  • .NET 服务 ServiceController
  • .NET 中小心嵌套等待的 Task，它可能会耗尽你线程池的现有资源，出现类似死锁的情况
  • .net利用SQLBulkCopy进行数据库之间的大批量数据传递
  • .net通过类组装数据转换为json并且传递给对方接口
  • 。。。。。
  • ::before和::after 常见的用法