前后端多环境配置

Love The Way You Lie 2023-01-01 14:48 73阅读 0赞

介绍一下前后端的多环境配置，前端使用的 Vue 框架，后端使用的是 SpringBoot 框架。

## 前端 Vue ##

这里以开发环境（`dev`）和生产环境（`prod`）为例。

首先在项目根目录下创建两个文件：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70][]  
这是创建出来了两个不同的环境，内容如下：

.env.dev文件内容:
    
    NODE_ENV=development
    VUE_APP_SERVER=http://127.0.0.1:9000
    
    --------------------------------------
    
    .env.prod文件内容:
    
    NODE_ENV=production
    VUE_APP_SERVER=http://server.wsuo.top

然后在 `package.json` 中配置：

{ 
      "name": "admin",
      "version": "0.1.0",
      "private": true,
      "scripts": { 
        "serve-dev": "vue-cli-service serve --mode dev",
        "serve-prod": "vue-cli-service serve --mode prod",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint"
      },

这里配置的含义是：

*  `serve-dev`：执行命令 `vue-cli-service serve --mode dev`；
 *  `serve-prod`：执行命令 `vue-cli-service serve --mode prod`；

他们会去寻找根目录下的 `dev` 文件和 `prod` 文件，然后读取配置。

## 后端 SpringBoot ##

SpringBoot 的多环境配置与 Vue 类似：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70 1][]  
在 `application.yml` 后面加上一个后缀，表示环境名称。

我们以数据库连接为例，本地的配置和上线后部署到服务器上面的配置肯定不一样。

我们可以将变化的部分放到具体的配置文件中，比如在 `application-dev.yml` 中，配置如下：

spring:
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        type: com.alibaba.druid.pool.DruidDataSource
        url: jdbc:mysql://localhost:3306/online_course?characterEncoding=UTF8&useUnicode=false&serverTimezone=UTC
        username: root
        password: root
      redis:
        host: localhost
        port: 6379

在 `application-prod.yml` 中配置如下：

spring:
      datasource:
        driver-class-name: com.mysql.cj.jdbc.Driver
        type: com.alibaba.druid.pool.DruidDataSource
        url: jdbc:mysql://10.30.100.255:3306/online_course?characterEncoding=UTF8&useUnicode=false&serverTimezone=UTC
        username: root
        password: 1234
      redis:
        host: 10.30.100.255
        port: 6379

配置好了，怎么分环境启动呢？

如果是在编辑器中调试，可以使用 IDEA 自带的工具配置：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70 2][]  
选择要使用的启动模式：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70 3][]  
如果是上线部署，我们可以使用 `spring-boot-maven-plugin` 插件将项目打成 `jar` 包。

然后使用命令执行时，加上参数即可：

java -jar aaa.jar --spring.profiles.active=dev

如果不会打包的可以使用 `maven` 工具的 `install`：  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70 4][]  
注意：

*  如果目标项目依赖子项目，需要先打包子项目；
 *  如果是父子工程，可以直接打包父工程；
 *  如果依赖中有 `spring-boot-maven-plugin` 插件的，该项目必须有主启动类才能成功打包；

打包之后可以在 target 目录下找到文件，执行命令接口运行。  
![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70 5][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70]: /images/20221120/324eaf73bf4f41c4af29a0f9ee63a87d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70 1]: /images/20221120/976fc420a3c84b63a96f2feb1458da82.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70 2]: /images/20221120/f3c9cb2573c84241ab629ca7a3f15036.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70 3]: /images/20221120/c84678c94fff47f88edbbf2f012d775f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70 4]: /images/20221120/fc09a4f091b44c10a2caacfc97ef1386.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80Mzk0MTM2NA_size_16_color_FFFFFF_t_70 5]: /images/20221120/46531388ed8f49f4aaa894503062c961.png