umi配置多环境变量并在docker中跑起来验证

原创

已于 2023-03-20 20:21:36 修改 · 1.5k 阅读

CC 4.0 BY-SA版权

文章标签：

于 2023-03-20 20:18:16 首次发布

本文记录了一个umi项目从0到1的开发过程中，如何配置多环境变量（test和prod）并使用docker容器结合nginx在本地进行部署验证的过程。详细描述了创建config文件夹，配置环境变量，编写Dockerfile和nginx配置文件，以及打包、构建镜像和启动容器的步骤。

1、项目背景

最近开始自己负责一个umi项目从0到1的开发，中间遇到的环境变量配置问题记录一下，顺便再熟悉下前端项目在docker中的部署过程。
主要依赖包版本如下：
在这里插入图片描述
安装cross-env包兼容不同的服务器（linux或者windows等）

这里是配置了 test 和 prod 两个环境

先在跟目录下建立config文件夹，文件夹下再建立三个config文件: config.js,
config.test.js, config.prod.js, 如下所示：

在这里插入图片描述

其中config.test.js 和 config.prod.js 中分别配置不同的process.env.UMI_ENV的值。
然后在package.json中写入不同环境下的build命令
最后在页面中打印配置好的环境变量，不同的环境应该会看到不同的值

在这里插入图片描述

设置好不同的环境变量后，先试下测试环境在docker中跑起来，通过打印检查配置是否生效。在此之前我们要先在本地电脑安装好docker并打开（小白教程在这里）

# 拉取nginx镜像
FROM nginx:alpine
ENV TZ=Asia/Shanghai
RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime &&