如何实现根据环境切换不同配置？

Posted 2023-03-31 问北

首发于公众号：BiggerBoy

前言

在企业开发中，系统的配置信息往往会分不同的环境，如开发环境、测试环境、生产环境。当我们使用nacos作为配置中心时，一定会遇到的问题就是在应用中配置nacos的server-addr时测试环境的nacos地址和线上nacos地址如何区分的问题

拿开发环境和正式环境来说，比如开发环境的nacos地址是nacos.dev.biggerboy.com:8848而正式环境是nacos.biggerboy.com:8848

当在开发环境开发完成准备上线时如何将nacos地址切换为正式环境呢？修改配置文件中server-addr值为nacos.biggerboy.com:8848吗？如果忘了修改呢？

动态激活配置

这里提供一种方法，采用spring-boot多环境配置和maven profile配合完成环境的切换。

创建bootstrap.yml：

server:
  #取不同环境下配置的端口
  port: @serverPort@
#spring配置
spring:
  profiles:
    #取不同环境下配置的激活项
    active: @profileActive@
  application:
	#取不同环境下配置的项目名称
    name: @projectActiveName@

创建开发环境配置文件：

如下，把需要随环境变化的配置放到当前环境配置文件，比如dev环境，我们创建bootstrap-dev.yml文件：

spring:
  cloud:
    #注册中心采用nacos
    nacos:
      #注册中心
      discovery:
        enabled: true
        server-addr: nacos.dev.biggerboy.com:8848
        group: dev
        # 需要配置完后,使用每个项目自身namespace
        namespace: @nacosNamespace@
        service: $spring.application.name
      #配置中心
      config:
        file-extension: yaml
        server-addr: nacos.dev.biggerboy.com:8848
        group: dev
        prefix: $spring.application.name
        # 需要配置完后,使用每个项目自身namespace
        namespace: @nacosNamespace@

pom文件添加支持

如上通过@取值的方式，如@nacosNamespace@是取pom.xml文件中的配置，我们在下面profile中定义相关配置。通过@获取pom.xml中配置，默认是不支持的，需要在pom.xml中添加以下配置：

<build>
    <resources>
        <resource>
            <directory>src/main/resources</directory>
            <filtering>true</filtering>
        </resource>
    </resources>
    <plugins>
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-resources-plugin</artifactId>
            <version>3.2.0</version>
            <configuration>
                <encoding>UTF-8</encoding>
                <delimiters>
                    <delimiter>@</delimiter>
                </delimiters>
                <useDefaultDelimiters>false</useDefaultDelimiters>
            </configuration>
        </plugin>
        <plugin>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-maven-plugin</artifactId>
        </plugin>
    </plugins>
</build>

创建线上环境配置文件：

然后我们再创建一个正式环境的配置文件，命名为bootstrap-prod.yml：

spring:
  cloud:
    #注册中心采用nacos
    nacos:
      #注册中心
      discovery:
        enabled: true
        server-addr: nacos.biggerboy.com:8848
        group: prod
        # 需要配置完后,使用每个项目自身namespace
        namespace: @nacosNamespace@
        service: $spring.application.name
      #配置中心
      config:
        file-extension: yaml
        server-addr: nacos.biggerboy.com:8848
        group: prod
        prefix: $spring.application.name
        # 需要配置完后,使用每个项目自身namespace
        namespace: @nacosNamespace@

profile配置：

pom.xml文件中增加profile配置：

<profiles>
    <profile>
        <id>dev</id>
        <properties>
            <profileActive>dev</profileActive>
            <nacosNamespace>dev</nacosNamespace>
            <projectActiveName>order-service</projectActiveName>
            <serverPort>80</serverPort>
        </properties>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
    </profile>
    <profile>
        <id>test</id>
        <properties>
            <profileActive>test</profileActive>
            <nacosNamespace>test</nacosNamespace>
            <projectActiveName>order-service</projectActiveName>
            <serverPort>80</serverPort>
        </properties>
        <activation>
            <activeByDefault>false</activeByDefault>
        </activation>
    </profile>
    <profile>
        <id>prod</id>
        <properties>
            <profileActive>prod</profileActive>
            <nacosNamespace>prod</nacosNamespace>
            <projectActiveName>order-service</projectActiveName>
            <serverPort>8080</serverPort>
        </properties>
        <activation>
            <activeByDefault>true</activeByDefault>
        </activation>
    </profile>
</profiles>

激活方式

打包时激活配置：

使用maven打包时，可通过-Pdev指定激活某个配置
mvn clean install -Pdev -DskipTests=true

idea中激活配置方式：

这样就能实现不手动修改配置的情况下切换环境了，赶快试试吧~

如果对你有帮助记得点个推荐，分享给你的朋友。

说的再好，不如行动。不怕慢，就怕站。

vue-cli根据不同的命令自动切换不同环境地址

前言

我们再使用vue脚手架开发项目时，不可避免的涉及到多个环境来回切换接口调用地址的问题，在开发环境中可能会通过 ip 来访问后台接口，但是当项目上线后就要把对用的接口地址换成生产环境的地址，肯定不能再用 ip 来调用，因此我们每次打包发布的时候都要更改相关配置，非常痛苦，今天我们一起来通过代码的方式实现输入不同的命令自动配置不同的环境地址

第一步：搭建vue脚手架，不会的请点击这里，搭建完成之后我们拿到了一个完整的项目

 第二步：新建 src -> util -> env.json 文件，文件内不需要写任何内容

 

 第三步：在项目目录根节点，即和 packge.json 文件同级，新建 vue.config.js

 第四步：在 vue.config.js 文件中添加如下代码，代码中有详细的注释，不懂可以百度

// 引入 node 自带的操作文件的插件 fs
const fs = require("fs")

module.exports = {
  configureWebpack: () => {
    // writeFileSync 是写向文件写入内容的方法
    // process.env 是vue的环境变量，是一个vue自带的固定的参数
    // apiconfig 是在 package.json 中定义的一个变量名，可自定义
    // trim() 是为了去掉自动加到变量值上的空格
    fs.writeFileSync("./src/util/env.json", JSON.stringify({env: process.env.apiconfig.trim()}))
  }
}

第五步：修改 package.json -> scripts 节点中 开发环境 和 生产环境 地址的启动命令

"serve": "set apiconfig=serve && vue-cli-service serve",

"build": "set apiconfig=build && vue-cli-service build",

 

 注意：apiconfig=serve 和  apiconfig=build 中间不能有空格，否则运行会报错，不信邪的朋友可以加上空格试一试；package.json 中定义的名称要和 vue.config.js 中取值的字段一致

第六步：运行 npm run serve 或者 npm run build，查看env.json 文件内容是否发生变化

 输入 npm run serve 后打开 env.json 后发现自动写入了内容

 接着停掉项目输入 npm run build 再查看 env.json

 

查看 env.json 发现输入不同的命令，内容会自动改变

 第七步：新建 src -> util -> api.js 文件作为项目的接口域名配置文件，并写入如下演示代码

 

const apiconfig = {
    // 开发环境
    "serve":{
        getUser:"http://192.168.0.0.1"
    },
    // 生产环境
    "build":{
        getUser:"https://www.xxxx.info.com"
    }
}
// 引入 env.json 文件
import env from "./env.json"
// 导出不同接口地址
export default apiconfig[env.env]

实际开发中会有多个接口地址，为了演示只写一个，我们根据 env,json 文件中的env值自动导出不同的环境的接口地址

第八步：在需要调用接口的文件中引入 api.js 文件，通过 api.XXX 的方式来完成接口调用

 

 通过 npm run serve 启动项目后，控制台打印如下

 

 发现是开发环境的地址，接着手动修改 env.json 文件中 env 的值，改为 build，然后刷新页面

 

 

 

 我们发现，在页面中打印同一个变量，会随着 env.json  的值变化而自动切换为对应环境的接口地址，所以我们已经实现了根据输入不同命令，自动切换环境地址的功能。