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

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;  # 将此改为你的宝塔服务器 IP

    charset 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. 再次打开网站就可以看到验证码正确显示出来了，顺利登陆