多环境概念理解

一:多环境概念:

是指根据项目的不同阶段和需求,将项目部署在不同的环境中,以确保各环境之间相互独立且互不影响。多环境设计的主要目的是为了在不同的开发、测试和部署阶段中,确保项目的稳定性和可靠性。

省流:根据实际需要,对项目阶段进行部署,相互独立且互相不影响。

多环境的分类:
  1. 本地环境(自己的电脑)localhost(熟悉的localhost)
  2. 开发环境:公司连同一台机器,方便开发
  3. 测试环境:性能测试/功能测试/系统集成测试
  4. 预发布环境(体验服):用正式服的数据再进行测试
  5. 正式环境(线上,公开访问的项目)
  6. 沙箱环境:目的就是为了做实验(做完就销毁)

二:前端配置多环境:

1:请求地址:
  • 开发环境:localhost:8000
  • 线上环境:域名或者公网ip

2:启动方式:(本人习惯使用npm)
npm run start

通常用于启动开发服务器或者应用程序的开发模式。这个命令一般会启动一个开发服务器,监听文件变化并自动重新加载应用,以方便开发人员在开发过程中进行实时调试。这个命令通常用于开发阶段,不会对代码进行优化和压缩,以便开发人员能够方便地调试和查看代码变化。

npm run build

通常用于构建生产环境下的部署包。这个命令会对项目代码进行优化、压缩和打包,以减小文件大小并提高运行效率。通常会生成用于部署的静态文件,准备好被部署到生产服务器上。这个命令一般在项目准备发布时执行,以确保发布的代码是经过优化和压缩的
3:项目的配置:

不同的项目(框架)都有不同的配置文件,可以在配置文件后添加对应的环境名称后缀来区分开发环境和生产环境。

以vue项目举例,NODE_ENV环境变量通常用于指示当前的环境,是否为开发环境或生产环境。在开发环境中,通常会设置NODE_ENVdevelopment,而在生产环境中设置为production

build 时会自动传入 NODE_ENV == production 参数

所以我们的思路是什么呢

我们可以在前端的拦截器上加一个判断条件,如果NODE_ENV是等于这个production的,我们就转到我们想要转的地址

1
2
3
4
5
6
const isDev = process.env.NODE_ENV === 'development';
const Service = axios.create({
baseURL: isDev ? 'http://localhost:8089/' : 'http://公网ip或者域名',
withCredentials: true,
});
Service.defaults.withCredentials = true;

一般上线的话,需要运行build 进行打包构建,然后生成一个dist文件

随后,可以在项目终端使用 serve 工具启动(npm i -g serve,先安装),浏览打包好了的文件

三:后端配置多环境:

后端和前端一样都需要配置文件:

SpringBoot 项目,通过 application.yml 添加不同的后缀来区分配置文件(如application-prod.yml作为线上配置 )

然后我们运行maven中的package,对项目进行打包

另外,如果单元测试不重要,我们就可以点击跳过测试模式这个按钮。

打包完之后,我们在这个打包出来的文件夹(target)的终端中输入

1
java -jar .\backend-0.0.1-SNAPSHOT.jar --spring.profiles.active=prod

那一行代码的意思就是往里传了一个环境参数,运行后就会切换到线上配置


多环境概念理解
http://blog.hrseno.cn/2024/11/16/网站部署-多环境/
作者
黄浩森
发布于
2024年11月16日
许可协议