Laravel 部署到宝塔 一个api接口, 一个前端页面分成两个网站

本文介绍了在前后端分离的项目中,如何解决线上环境前端调用后端API接口的问题。通过在前端网站配置nginx代理,将abc.com的/api/请求转发到like.abc.com,实现跨域访问。同时提供了详细的Laravel项目上线部署步骤,包括环境配置、组件安装、数据库迁移、JWT和权限配置等。

前言

前端单独放了一个网站里(用的一级域名 => abc.com);

后端Laravel框架写的API接口也单独放了一个网站里(用的二级域名 => like.abc.com);

都是放在一个服务器里面的;


但是这么部署的话会有一个问题: 就是前端文件在本地的时候你可以直接代理API那里, 但是发布到线上abc.com那里后, 代理就失效了, 线上直接访问变成了 abc.com/api/list,  但是接口在like.abc.com/api/list里面, 这可怎么拿到数据呢?


方案

 点击abc.com这个网站配置一个nginx, 代理到like.abc.com这个网站上

     #代理请求地址
    location ^~/api/  
    {
      proxy_pass http://like.abc.com;
      add_header 'Access-Control-Allow-Origin' '*'; #解决跨域
      #rewrite ^/api/(.*)$ /$1 break; #删除配置前缀
    }
    
    #这是laravel部署nginx服务器配置的文件
    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

配置完后需要重启nginx服务

然后应该就可以了

解析

laravel部署到宝塔  antDesignPro

二. 部署之后发布命令

安装(在laravel目录里面,  上面有个终端 ,在那里执行终端命令)

laravel 部署到宝塔

 

 

1. 安装组件:(针对服务器)

COMPOSER_MEMORY_LIMI-1 composer install

2. 创建 '.env':
cd .env.example .env

修改.env的配置, 主要是数据库配置
3. 发布DingoAPi配置

php artisan vendor:publish --provider="Dingo\Api\Provider\LaravelServiceProvider"

4. 发布JWT配置

php artisan vendor:publish --provider="Tymon\JWTAuth\Providers\LaravelServiceProvider"

5. 生成JWT TOKEN:

php artisan jwt:secret

6. 生成迁移文件

php artisan migrate

6. 生成权限迁移文件

php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider" --tag="migrations"

7. 发布权限相关配置

php artisan vendor:publish --provider="Spatie\Permission\PermissionServiceProvider" --tag="config"

8. 运行迁移同时填充数据

php artisan migrate --seed

<think>首先,用户的问题是关于在同一个服务器IP上使用宝塔面板部署两个Spring Boot项目,每个项目都有Vue前端。我需要基于提供的引用内容来构建回答,但引用是关于部署单个项目的,所以我需要扩展来处理多个项目。 用户的关键点: - 使用宝塔面板。 - 同一个服务器IP。 - 部署两个Spring Boot应用(后端)。 - 每个应用都有Vue前端。 - 引用中提到了部署Spring Boot和Vue项目,但通常是单个项目;现在需要处理两个独立项目。 我的回答必须: - 使用中文。 - 结构清晰,逐步解决问题。 - 保证真实可靠(基于一般知识,因为引用不直接覆盖这个场景)。 - 在行内数学表达式中使用$...$,独立公式用$$...$$(但这个问题可能不涉及数学,所以我可能不需要)。 - 生成相关问题。 - 在回答中引用的段落末尾添加引用标识。 参考引用: - 引用[1]:阿里云ECS部署Spring Boot+Vue项目,使用宝塔面板。提到了使用Docker部署数据库,但不建议,只在特定场景下使用。 - 引用[2]:宝塔面板部署VUE+Spring Boot,腾讯云服务器。 - 引用[3]:使用宝塔面板部署springboot和vue。 - 引用[4]:通过宝塔部署Spring Boot+Vue3项目,包括Nginx配置示例。 这些引用都聚焦于单个项目的部署。对于多个项目,我需要调整策略,比如使用不同的端口或子域名。 核心步骤(基于一般知识): 1. **准备环境**:确保服务器安装了宝塔面板、Java、Node.js(用于Vue打包)、MySQL等。 2. **部署Spring Boot应用**: - 打包每个Spring Boot项目为JAR文件。 - 在宝塔面板中创建网站或使用Java项目管理器来部署每个应用,使用不同的端口(如8080和8081)。 3. **部署Vue前端**: - 打包每个Vue项目为静态文件。 - 在宝塔面板中为每个前端创建单独的网站或目录。 4. **配置Nginx**:设置反向代理,将前端请求代理到对应的后端API。 - 可以使用不同的域名或子域名(如app1.domain.com和app2.domain.com),或者同一个域名的不同路径(如domain.com/app1和domain.com/app2)。 5. **数据库配置**:如果项目需要数据库,确保每个项目有自己的数据库实例或使用不同的数据库名称。 在引用[4]中,有一个Nginx配置示例,用于单个项目: ``` server { listen 80; server_name localhost; location / { root /www/wwwroot/big-event/dist; index index.html index.htm; try_files $uri $uri/ /index.html; # 解决刷新404 } location /api/ { proxy_pass http://localhost:8090/; } } ``` 对于两个项目,我需要两个这样的server块,使用不同的server_name或不同的端口。 例如: - 项目1:server_name app1.yourdomain.com,后端端口8080 - 项目2:server_name app2.yourdomain.com,后端端口8081 或者,如果没有多个域名,使用路径: - location /app1/ for frontend and /app1/api/ for backend of project 1 - location /app2/ for frontend and /app2/api/ for backend of project 2 但使用路径可能会导致前端路由问题,所以子域名是更好的选择。 回答结构: 1. **引言**:解释在同一个服务器部署多个项目的可行性。 2. **步骤分解**: a. 环境准备。 b. 打包和部署Spring Boot应用。 c. 打包和部署Vue前端。 d. 配置Nginx反向代理。 e. 数据库和端口管理。 3. **注意事项**:端口冲突、域名解析等。 4. **生成相关问题**:在最后添加。 添加引用:在回答中,如果提到特定内容,添加引用标识。例如,如果提到数据库部署,引用[1]提到不建议在Docker上部署数据库,但可以用于开发。 最终,生成相关问题,如关于优化、性能等。</think>### 在宝塔面板上部署两个Spring Boot应用与Vue前端(同一服务器IP) 在同一个服务器IP上部署多个Spring Boot和Vue项目是可行的,核心是通过**端口隔离**和**Nginx反向代理**实现资源分配。以下是详细步骤,基于宝塔面板(版本7.9+)和常见云服务器环境(如阿里云ECS或腾讯云轻量服务器)。整个过程分为环境准备、项目打包、部署配置Nginx代理四部分。 --- ### 1. 环境准备 确保服务器基础环境完备: - **操作系统**:推荐Ubuntu 20.04或CentOS 7.x。 - **宝塔面板**:已安装并配置LNMP环境(Nginx、MySQL、PHP)和Java支持。如果未安装,可通过宝塔官网脚本一键部署[^2]。 - **依赖软件**: - Java JDK 11+(运行Spring Boot)。 - Node.js 16+(打包Vue前端)。 - MySQL 8.0(数据库服务,建议直接安装在宿主机而非Docker,避免性能问题[^1])。 - **防火墙与端口**:开放后端端口(如8080、8081)和前端访问端口(80/443)。在宝塔面板的“安全”页面配置。 > **提示**:如果两个项目需要独立数据库,创建两个MySQL实例(如`db_project1`和`db_project2`),避免冲突[^1]。 --- ### 2. 打包和部署Spring Boot应用 每个Spring Boot应用需独立部署,使用不同端口: #### 步骤: 1. **打包应用**: - 在本地开发环境,为每个项目执行Maven打包命令: ```bash mvn clean package -DskipTests ``` 生成JAR文件(如`project1.jar`和`project2.jar`)。 2. **上传JAR文件**: - 通过宝塔面板的“文件”功能,创建两个目录存放JAR文件: - `/www/wwwroot/project1/backend` - `/www/wwwroot/project2/backend` - 上传JAR文件到对应目录。 3. **配置Java项目**: - 在宝塔面板的“软件商店”中安装“Java项目管理器”。 - 添加第一个项目: - 项目路径:`/www/wwwroot/project1/backend` - 运行端口:`8080`(默认端口,可自定义) - 启动命令:`java -jar project1.jar` - 添加第二个项目: - 项目路径:`/www/wwwroot/project2/backend` - 运行端口:`8081`(避免与8080冲突) - 启动命令:`java -jar project2.jar` - 启动项目并检查日志,确保无报错。 > **注意**:如果应用需连接数据库,修改每个项目的`application.properties`文件,指定独立数据库名和端口。 --- ### 3. 打包和部署Vue前端 每个Vue前端需打包为静态文件,并通过Nginx独立托管: #### 步骤: 1. **打包Vue项目**: - 在每个Vue项目根目录运行: ```bash npm run build ``` 生成`dist`文件夹(包含HTML、CSS、JS等静态文件)。 2. **上传静态文件**: - 在宝塔面板创建两个前端目录: - `/www/wwwroot/project1/frontend/dist`(存放项目1的`dist`内容) - `/www/wwwroot/project2/frontend/dist`(存放项目2的`dist`内容) 3. **创建前端网站**: - 在宝塔面板的“网站页面,点击“添加站点”。 - 为项目1添加站点: - 域名:`project1.yourdomain.com`(需提前解析域名到服务器IP) - 根目录:`/www/wwwroot/project1/frontend/dist` - 为项目2添加站点: - 域名:`project2.yourdomain.com` - 根目录:`/www/wwwroot/project2/frontend/dist` - 如果无多个域名,可用子路径(如`yourdomain.com/project1`),但需额外Nginx配置避免路由冲突。 --- ### 4. 配置Nginx反向代理 通过Nginx前端请求代理到对应后端API,解决跨域问题并管理路由: #### 配置示例: 编辑每个前端站点的Nginx配置文件(在宝塔面板的“网站” → “设置” → “配置文件”)。 - **项目1的Nginx配置**(域名方式): ```nginx server { listen 80; server_name project1.yourdomain.com; # 项目1专属域名 location / { root /www/wwwroot/project1/frontend/dist; index index.html; try_files $uri $uri/ /index.html; # 解决Vue路由刷新404问题[^4] } location /api/ { # 代理项目1的后端API proxy_pass http://localhost:8080/; # 指向项目1的Spring Boot端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` - **项目2的Nginx配置**: ```nginx server { listen 80; server_name project2.yourdomain.com; # 项目2专属域名 location / { root /www/wwwroot/project2/frontend/dist; index index.html; try_files $uri $uri/ /index.html; } location /api/ { proxy_pass http://localhost:8081/; # 指向项目2的Spring Boot端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } } ``` - **若无多个域名,使用路径区分**(不推荐,易冲突): ```nginx server { listen 80; server_name yourdomain.com; location /project1/ { alias /www/wwwroot/project1/frontend/dist/; try_files $uri $uri/ /project1/index.html; } location /project1/api/ { proxy_pass http://localhost:8080/; } location /project2/ { alias /www/wwwroot/project2/frontend/dist/; try_files $uri $uri/ /project2/index.html; } location /project2/api/ { proxy_pass http://localhost:8081/; } } ``` 保存配置后,重启Nginx服务。 --- ### 常见问题与优化建议 1. **端口冲突**:确保每个Spring Boot应用使用唯一端口(如8080、8081),并在防火墙中放行。 2. **Vue样式丢失**:检查打包路径,在`vue.config.js`中设置`publicPath`为相对路径`./`[^4]。 3. **性能优化**: - 为Java项目分配独立JVM内存(在Java项目管理器中设置)。 - 启用Nginx缓存静态资源(添加`expires`指令)。 4. **域名解析**:如果使用域名,需在DNS服务商处将`project1.yourdomain.com`和`project2.yourdomain.com`解析到服务器IP。 5. **HTTPS支持**:在宝塔面板申请SSL证书并强制HTTPS,提升安全性。 > **引用说明**:部署时避免将生产数据库放在Docker容器中,除非用于开发环境隔离[^1]。Nginx配置参考了Vue路由刷新问题的标准解决方案[^4]。 ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值