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

embedded/2024/10/18 12:27:43/

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/embedded/128449.html

相关文章

【人工智能】实验室GPU资源申请使用

实验室独占实例Ubuntu 20.04 配置 Pytorch GPU 一、换源 1. 备份原来的文件 sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup2. 编辑vi /etc/apt/sources.list文件 vim /etc/apt/sources.list3. 将内容全部替换为下面 # 默认注释了源码镜像以提高 apt update…

文本生成视频技术:艺术与科学的交汇点

在人工智能技术的飞速发展下,文本生成视频(Text-to-Video)技术已经成为现实。这项技术能够根据文本描述生成相应的视频内容,极大地拓展了内容创作的边界。本文将从三个主要方面对文本生成视频技术进行深入探讨:技术能达…

白炽灯有频闪为什么最护眼?孩子用的台灯哪个牌子好你知道吗?

在当今社会,随着电子产品的普及与长时间的学习需求,保护视力成为了家庭关注的重点之一。而关于照明设备的选择,市场上存在各种说法与推荐,其中一种观点认为,尽管白炽灯存在频闪现象,它却因为接近自然光的变…

【Kubernets】配置类型资源 Etcd, Secret, ConfigMap

文章目录 所有资源概览Etcd详细说明一、基本概念二、主要功能三、架构与组件四、数据模型与操作五、安全与认证六、集群部署与管理 Secret详细说明一、Secret 的类型二、Secret 的创建三、Secret 的使用四、Secret 的更新与删除五、Secret 的安全性 ConfigMap详细说明一、Confi…

OpenCV高级图形用户界面(6)获取指定窗口中图像的矩形区域函数getWindowImageRect()的使用

操作系统:ubuntu22.04 OpenCV版本:OpenCV4.9 IDE:Visual Studio Code 编程语言:C11 算法描述 提供窗口中图像的矩形区域。 该函数 getWindowImageRect 返回图像渲染区域的客户端屏幕坐标、宽度和高度。 函数原型 Rect cv::getWindowImage…

【论文速读】Prefix-Tuning: Optimizing Continuous Prompts for Generation

arxiv:2101.00190v1 摘要 微调实际上是利用大型预训练过的语言模型来执行下游任务的一种方法。但是,它会修改所有的语言模型参数,因此需要为每个任务存储一个完整的副本。在本文中,我们提出了Prefix-Tuning(前缀调优…

Linux手账—exec和fork

希望你开心,希望你健康,希望你幸福,希望你点赞! 最后的最后,关注喵,关注喵,关注喵,大大会看到更多有趣的博客哦!!! 喵喵喵,你对我真的…

GitHub生成SSH密钥,

GitHub会通过SSH密钥来验证你的身份,确保你有权限克隆、推送或拉取代码。 对于公开仓库,你不需要额外的权限,只需确保SSH密钥已正确配置并可以通过GitHub验证。公开仓库允许任何人克隆,即使仓库属于他人,只要你通过SS…