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

news2024/10/12 1:21:09

1. 准备工作

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

2. 启动 AWS EC2 实例

登录 AWS 管理控制台。
创建 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. 安装宝塔面板

安装宝塔面板：
- 使用 SSH 连接到 EC2 实例后，执行以下命令安装宝塔面板：
  - Ubuntu 系统：
```
 wget -O install.sh https://download.bt.cn/install/install_lts.sh && sudo bash install.sh ed8484bec
```
安装完成后，终端会显示宝塔的管理地址和登录信息账号密码，创建一个txt保存一下。使用这些信息通过浏览器访问宝塔面板。会提示，请在安全组放行。。端口，入站规则放行一下。
复制外网面板地址到Chrome，登录宝塔面板，会提示不安全继续前往就好了，账号密码就用安装好时给的登录信息，阅读同意用户信息协议，绑定官网帐号，这里自行注册。

4. 配置宝塔环境

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

5. 部署前端 Vue3 项目

准备 Vue3 项目：
- 在本地开发环境中，确保已经构建了 Vue3 项目，使用以下命令生成打包后的静态文件：
```
npm run build
```
- 打包完成后，文件一般会生成在 dist 文件夹中。
上传 Vue3 静态文件到服务器：
- 将打包好的 dist 文件夹上传到服务器上的网站目录中。
- 在宝塔面板中，点击左侧的 “网站” -> “添加站点” -> 填写域名或 IP 地址，创建网站。
- 将 Vue3 的 dist 文件夹上传到该网站的根目录 /www/wwwroot/your-site/。
配置 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 项目

打包 Spring Boot 项目：
- 在本地开发环境中，使用 Maven 或 Gradle 将 Spring Boot 项目打包为 .jar 文件：
```
mvn clean package
```
- 生成的 .jar 文件通常在 target 文件夹中。
上传后端项目到服务器：
- 将打包好的 .jar 文件上传到服务器的某个目录下，例如 /www/wwwroot/your-site/java/。
- 上传配置文件application.properties，改一下里面的项目地址之类的。
启动 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 文件。
再次打开网站就可以看到验证码正确显示出来了，顺利登陆