【项目部署】在亚马逊云(AWS)上使用宝塔面板部署前后端分离的 Vue3 + Spring Boot 项目

devtools/2024/10/15 13:22:59/

1. 准备工作

  • AWS 账户:确保你已经注册了 AWS 账户,并且有足够的权限来创建 EC2 实例和配置安全组。【AWS账户注册】注册亚马逊免费云服务器一年期个人用户
  • 项目准备:确保你已经准备好了前端 Vue3 项目(并且已打包生成静态文件)和后端 Spring Boot 项目(打包为 .jar 文件)。

2. 启动 AWS EC2 实例

  1. 登录 AWS 管理控制台
  2. 创建 EC2 实例
    • 导航到 EC2 控制台,点击 “Launch Instance”。
    • 选择适合的操作系统(建议使用 Ubuntu 20.04 或 CentOS 7)。
    • 选择实例类型(如 t2.micro 对小型项目免费使用)。
    • 配置存储和网络,使用默认设置即可,存储建议选择 30GB 以上。有资格使用免费套餐的客户最多可获得 30GB 的通用型 (SSD) 或磁存储空间
    • 点实例ID蓝色那串,下滑在安全中,配置入站规则,点安全详细信息安全组下边的蓝色那串,编辑入站规则,添加规则的示例:点击 “Add Rule”(添加规则),然后按照以下信息设置新的入站规则:
      • Type(类型):选择 Custom TCP(自定义 TCP)。 Protocol(协议):默认是 TCP,保持不变。
      • Port Range(端口范围):输入 80,这是用于 HTTP 的端口。
      • Source Type(源类型):选择 Custom(自定义)。
      • Source(源):输入 0.0.0.0/0,这表示允许任何 IP 地址访问该端口。如果你希望限制为特定 IP 地址访问,输入相应的 IP地址范围。
      • Description(描述):不要用中文,可以输入 “HTTP Access” 作为可选描述,帮助你未来识别这个规则。
  • 连接到 EC2 实例

  • 直接网页连接到EC2 实例

  • 或者配置了ssh就使用 SSH 连接到你的 EC2 实例

    ssh -i "path/to/your-key.pem" ubuntu@your-ec2-public-ip 
    
    • “path/to/your-key.pem”:指的是你保存 .pem 文件的路径。如果 .pem 文件在当前目录下,可以直接写 your-key.pem

    • ubuntu:这是默认的用户名称,取决于你使用的操作系统和 AMI 类型。如果你使用的是 Amazon Linux AMI,则需要使用 ec2-user 用户名。

      • 如果是 Ubuntu 实例,用户名是 ubuntu
      • 如果是 Amazon Linux 2 实例,用户名是 ec2-user
    • your-ec2-public-ip:这是你的 EC2 实例的公共 IP 地址(或公共 DNS),你需要替换为你在 AWS 控制台中找到的实际 IP 地址。

    • 例如:
      ssh -i "~/Downloads/my-key.pem" ubuntu@3.123.456.789

3. 安装宝塔面板

  1. 安装宝塔面板

    • 使用 SSH 连接到 EC2 实例后,执行以下命令安装宝塔面板:
      • Ubuntu 系统
         wget -O install.sh https://download.bt.cn/install/install_lts.sh && sudo bash install.sh ed8484bec
        
  2. 安装完成后,终端会显示宝塔的管理地址和登录信息账号密码,创建一个txt保存一下。使用这些信息通过浏览器访问宝塔面板。 会提示,请在安全组放行 。。 端口,入站规则放行一下。

  3. 复制外网面板地址到Chrome,登录宝塔面板,会提示不安全继续前往就好了,账号密码就用安装好时给的登录信息,阅读同意用户信息协议,绑定官网帐号,这里自行注册。

4. 配置宝塔环境

  1. 安装必要的软件环境
    • 进入宝塔面板,点击 “软件商店”。
    • 安装以下软件:
      • Nginx
      • Redis
      • MySQL
      • Java项目一键部署:安完点进去容器管理那安装一下tomcat
      sudo apt update
      sudo apt install openjdk-11-jdk
      
  2. 数据库导入:数据库,添加数据库,上传sql文件,上传成功后记得导入覆盖,导入成功后就可以点工具看到导入的各个表。

5. 部署前端 Vue3 项目

  1. 准备 Vue3 项目

    • 在本地开发环境中,确保已经构建了 Vue3 项目,使用以下命令生成打包后的静态文件:
      npm run build
      
    • 打包完成后,文件一般会生成在 dist 文件夹中。
  2. 上传 Vue3 静态文件到服务器

    • 将打包好的 dist 文件夹上传到服务器上的网站目录中。
    • 在宝塔面板中,点击左侧的 “网站” -> “添加站点” -> 填写域名或 IP 地址,创建网站。
    • 将 Vue3 的 dist 文件夹上传到该网站的根目录 /www/wwwroot/your-site/
  3. 配置 Nginx 托管静态文件

    • 到这个文件夹/www/server/panel/vhost/nginx 上传.conf 文件
server {listen 8010;  # Nginx 用于前端监听的端口server_name 43.03.0.3;  # 将此改为你的宝塔服务器 IPcharset utf-8;# 前端静态资源location / { alias /www/wwwroot/easypan/admin-front/dist/;try_files $uri $uri/ /index.html;index index.html index.htm;}# 代理后端 API 请求location /api { proxy_pass http://localhost:9091/api;proxy_set_header x-forwarded-for  $remote_addr;}
}
  • AWS再加一个入站规则放行8010端口,宝塔安全也放行8010
  • 重启nginx
sudo su
cd /www/server/nginx/sbin
./nginx -s reload
  • 访问43.23.70.3:8010就可以看到前端页面了。

6. 部署后端 Spring Boot 项目

  1. 打包 Spring Boot 项目

    • 在本地开发环境中,使用 Maven 或 Gradle 将 Spring Boot 项目打包为 .jar 文件:
      mvn clean package
      
    • 生成的 .jar 文件通常在 target 文件夹中。
  2. 上传后端项目到服务器

    • 将打包好的 .jar 文件上传到服务器的某个目录下,例如 /www/wwwroot/your-site/java/
    • 上传配置文件application.properties,改一下里面的项目地址之类的。
  3. 启动 Spring Boot 应用

    • 终端进入 .jar 文件所在目录,使用以下命令启动应用:
      sudo su
      nohup java -jar easybbs-web-release-1.0.jar --server.port=9091 > /dev/null 2>&1 &
      
    • 该命令会在后台运行 Spring Boot 项目,日志输出到 backend.log 文件。
  4. 再次打开网站就可以看到验证码正确显示出来了,顺利登陆


http://www.ppmy.cn/devtools/126185.html

相关文章

99幅高清修复的中英文旅游地图

我们在《183幅值得珍藏的全国地质图集》、《55幅值得珍藏的水文地质图集》和《28幅高清修复的英文版中国地图》三篇文章中为你分享过精美的地图。 现在再为你分享99幅各省中英文旅游地图,你可以在文末查看该数据的领取方法。 99幅旅游地图 旅游地图是一种专门为游…

机器学习可解释性

机器学习的稳健性、可解释性和结果正确性等是人工智能安全可信应用必须解决的关键问题。 传统机器学习: 内置可解释性:决策树IF-Then规则,直观可理解事后可解释性:训练结束后的可解释技术特定于模型体系结构的解释与解释方法及模…

uniapp的相关知识(1)

1、hover-class:当有鼠标按下时,会切换对应的样式;也可以设置对应的变色时间。 2、selectable:设置text组件的文本是否可以进行复制。 3、with:当设置为80%时,表示宽占整个屏幕的80%。 4、border&#x…

Java设计模式——装饰模式

目录 模式动机 模式定义 模式结构 类图 代码分析 示例:动态添加功能的流 组件接口 具体组件 装饰抽象类 具体装饰类 客户端 模式分析 核心思想 动态扩展功能 组合优于继承 优点 动态扩展功能 组合优于继承 代码复用性高 符合开闭原则 缺点 增加…

10.11作业

人脸: //源文件 #include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this);Mat src;//创建一个图像容器Mat srb;Mat gray;Mat dst;src imread("D:/open…

【论文阅读】SAM 2: 分割一切图像和视频

导言 继SAM模型发布以来,Meta公司于2024年8月发布第二个图像分割大模型SAM2。相较于第一代SAM模型,论文提出了第二代“分割任意物体模型” (SAM 2),旨在解决视频中的可提示视觉分割任务(Promptable Visual Segmentation, PVS&…

python爬虫,爬取网页壁纸图片

python爬虫实战,爬取网页壁纸图片 使用python爬取壁纸图片,保存到本地。 爬取彼岸图网,网站地址https://pic.netbian.com/ 本人小白,记录一下学习过程。 开始前的准备 安装python环境,略。 python编辑器pycharm2…

Adobe 推出全新 AI 视频生成器 Firefly Video Model,完全使用授权内容进行训练

Adobe 推出全新 AI 视频生成器 Firefly Video Model,完全使用授权内容进行训练 🌐🎬 大家好,我是猫头虎 👋,今天带大家了解一下 Adobe 刚刚发布的 Firefly Video Model,这款全新 AI 视频生成器…