使用 1panel面板 部署 springboot 和 vue

已于 2024-08-08 11:26:16 修改
阅读量1.3k 收藏 21
点赞数 23
分类专栏： 部署 文章标签： spring boot vue.js 后端 前端 部署 1panel
于 2024-08-04 21:18:46 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45940369/article/details/140892045
版权

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

代码仓库：还没弄

目录

网站介绍

仿照别人项目做了个基于 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. 刷新对应网站，即可访问

在这里插入图片描述

在这里插入图片描述

奇妙方程式
关注
  • 23
    点赞
  • 踩
  • 21
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
1Panel速成技巧：轻松部署Ollama WebUI Docker版
qq_44103359的博客
05-23 625
通过以上步骤，您已经成功使用1Panel部署了Ollama WebUI。现在，您可以开始使用这个基于Llama模型的文本生成服务了。1Panel的直观界面和Docker的强大功能使整个部署过程变得简单而高效。
[1Panel]开源，现代化，新一代的 Linux 服务器运维管理面板
PHP武器库
10-18 1641
本期测评试用一下1Panel这款面板。1Panel是国内飞致云旗下开源产品。整个界面简洁清爽，后端使用GO开发，前端使用VUE的Element-Plus作为UI框架，整个面板的管理都是基于docker的，想法很先进。官方还提供了视频的使用教程，本期为大家按照本专栏的基本内容进行多方面的测评。1Panel 是一个现代化、开源的 Linux 服务器运维管理面板。快速建站：深度集成 Wordpress 和 Halo，域名绑定、SSL 证书配置等一键搞定；高效管理。
1Panel：简化高效的开源 Linux 服务器运维管理工具
最新发布
Anye 博客
07-10 837
1Panel是一个现代化、开源的 Linux 服务器运维管理面板，旨在简化和高效地管理 Linux 服务器。
armbian使用1panel快速部署部署springBoot项目后端
缘友一世的博客
08-13 3627
这里只是简单记录部署springboot项目后端的快速部署方法。
关于在服务上部署SpingBoot项目
a1571861354的博客
11-23 126
本节讲述了配置springboot项目到云端服务器的完整路径
使用宝塔面板部署vue项目
m0_56409834的博客
06-19 4855
1.购买一款服务器，我选择的是价格比较便宜阿里云"轻量应用服务器" ，镜像是CentO@7.3, 地区选择香港(域名就可以不用备案)
快速部署SpringBoot项目
weixin_53023830的博客
05-21 530
使用宝塔快速部署springboot项目
docker容器化+k8s集群部署教程以及springboot+vue部署示例
04-11
本文介绍VMware虚拟机下centos7操作系统中如何安装云原生 Kubernetes（k8s）集群、k8s可视化界面kuboard，以及如何利用docker容器化将springboot+vue项目在k8s集群中部署运行。
SpringBoot + Vue 项目部署上线到Linux 服务器的教程详解
01-09
给大家分享以下我是如何部署 SpringBoot + Vue 前后端分离的项目的，我用的 Linux 发行版是 CentOS7.5 有了一个基于 ElementUI 的电商后台管理系统，在开发一个相似的后台就会轻松很多。不过前面的系统的后端是使用 ...
Linux下宝塔部署 SpringBoot + Vue 前后端分离项目
weixin_53835008的博客
07-25 1058
配置入口类根据自己项目指定，即启动类全路径在启动类 右键 Copy Path.. ->Copy Reference 复制idea插件打包，在IDEA右侧Maven Projects栏双击package等待Build Success即可，打包前双击clean清理旧缓存和配置的影响。打包完成后jar包会生成到项目里的target目录下，命名一般是 项目名+版本号.jar可以在本地命令先运行一下jar包，看有无问题。
Docker部署SpringBoot+Vue前后端分离项目
02-14
前后端项目和配置文件
基于SpringBoot和Vue构建的文件分享系统.zip
05-02
一个基于SpringBoot和Vue构建的文件分享系统，包括文件的上传与下载，文件的权限管理，远程文件管理等功能。 一个基于SpringBoot和Vue构建的文件分享系统，包括文件的上传与下载，文件的权限管理，远程文件管理等...
Spring Boot Admin Dashboard（Panel）面板监控管理内容详解
iioSnail的博客
06-28 1980
导航栏 WallBoard（大屏展示） Insights Details Metrics Environment（系统环境） Configuration Properties（配置文件） Scheduled Task（定时任务） Loggers（日志级别管理） JVM（管理JVM中的相关数据） JMX Threads（查看线程情况） Heap Dump（下载Dump文件） Web（Web相关数据） Mappings（后台接口） Http Traces（Http请求追踪） Audit Log（审计日志）
不是Jenkins玩不起，而是脚本更有性价比，在1Panel中使用Node搭建前端自动化
03-14 1489
公司测试环境的运维管理面板是1Panel，由于近期有新项目的开发，部署功能并不完善，每次版本的发布需要开发人员在自己电脑上build并通过压缩包手动进行操作发布，这么做既降低了效率，还会导致操作的不一致性，并且难以扩展和维护。于是我计划在面板中搭建一套流水线来维护前端包的自动构建与代码发布。
1Panel 是一个现代化、开源的 Linux 服务器运维管理面板
醉里博客202271.xyz
04-28 541
高效管理：通过 Web 端轻松管理 Linux 服务器，包括应用管理、主机监控、文件管理、数据库管理、容器管理等；快速建站：深度集成 Wordpress 和 Halo，域名绑定、SSL 证书配置等一键搞定；一路默认回车就行，面板端口是随机的，根据自己的端口开放服务器端口就行，也可以自己设置端口。1Panel 是一个现代化、开源的 Linux 服务器运维管理面板。一键备份：支持一键备份和恢复，备份数据云端存储，永不丢失。RedHat / CentOS安装命令。Ubuntu安装命令。
宝塔面板部署vue前后端分离项目
qq_48575500的博客
04-29 2760
检查连接数据库的用户名和密码都没有出现错误，而且本地mysql服务的localhost也修改成对应的阿里云服务ip了，可就是连接失败，不能访问数据库。在导入sql文件之前，需要先创建数据库，此时需要先设置这个数据库的用户名和密码（只是这个数据库的用户名和密码）而已，如果嫌麻烦可以使用全局的root用户（说明nginx监听的是8081的请求，如果listen配置了ip地址，那么下面的server_name就不生效了。安装宝塔面板，等待安装完成，会展示宝塔面板的外网、内网面板地址以及账号密码。
Linux管理面板1Panel
12-24 1323
整个界面简洁清爽，后端使用GO开发，前端使用VUE的Element-Plus作为UI框架，整个面板的管理都是基于docker的。：通过 Web 端轻松管理 Linux 服务器，包括应用管理、主机监控、文件管理、数据库管理、容器管理等；1Panel 是一个现代化、开源的 Linux 服务器运维管理面板。官网： https://1panel.cn/2.1、安装1Panel代码。2.2、安装1Panel过程。一、1Panel介绍。二、1Panel安装。三、访问1Panel。四、1Panel界面。
现代化、开源的 Linux 服务器运维管理面板1Panel
猿小白的博客
05-10 664
快速建站：深度集成 Wordpress 和Halo，域名绑定、SSL 证书配置等一键搞定；高效管理：通过 Web 端轻松管理 Linux 服务器，包括主机监控、文件管理、数据库管理、容器管理等；安全可靠：基于容器来管理和部署应用，最小漏洞暴露面，提供防火墙和日志审计等功能；一键备份：支持一键备份和恢复，备份数据到各类云端存储，永不丢失。
ubuntu18.04部署springboot和vue
05-20
部署 Spring Boot 应用 1. 在服务器上安装 Java 运行环境 ``` sudo apt update sudo apt install default-jdk ``` 2. 将 Spring Boot 应用打包成 jar 包 使用 Maven 或 Gradle 将 Spring Boot 应用打包成 jar 包，可以在项目根目录执行以下命令： ``` mvn clean package ``` 或 ``` gradle clean build ``` 3. 将 jar 包上传到服务器 将打包好的 jar 包上传到服务器上，可以使用 scp 命令： ``` scp target/your-app.jar user@server:/path/to/your/app/ ``` 4. 启动应用 在服务器上执行以下命令启动应用： ``` java -jar /path/to/your/app/your-app.jar ``` 部署 Vue 应用 1. 在服务器上安装 Node.js 和 npm ``` sudo apt update sudo apt install nodejs npm ``` 2. 将 Vue 应用打包成静态文件 在 Vue 项目根目录下执行以下命令： ``` npm install npm run build ``` 3. 将打包好的静态文件上传到服务器 将打包好的静态文件上传到服务器上，可以使用 scp 命令： ``` scp -r dist/* user@server:/path/to/your/app/ ``` 4. 配置 Nginx 在服务器上安装 Nginx： ``` sudo apt install nginx ``` 在 `/etc/nginx/sites-available/` 目录下创建一个新的配置文件，例如 `your-app.conf`，并添加以下内容： ``` server { listen 80; server_name your-domain.com; root /path/to/your/app; index index.html; location / { try_files $uri $uri/ /index.html; } } ``` 将 `your-domain.com` 替换成你的域名，将 `/path/to/your/app` 替换成上传的静态文件所在的目录。 5. 启动 Nginx 在服务器上执行以下命令启动 Nginx： ``` sudo service nginx start ``` 现在你的 Spring Boot 和 Vue 应用都已经部署到了服务器上。你可以通过访问服务器的 IP 地址或域名来访问应用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值