首页 前端知识 使用 1panel面板 部署 springboot 和 vue

使用 1panel面板 部署 springboot 和 vue

2024-11-02 11:11:37 前端知识 前端哥 775 639 我要收藏

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. 刷新对应网站,即可访问

在这里插入图片描述

在这里插入图片描述

转载请注明出处或者链接地址:https://www.qianduange.cn//article/19816.html
评论
发布的文章
大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!