浅谈---开发环境与生产环境

港控/mmm° 2023-05-21 11:52 121阅读 0赞

## 开发环境与生产环境 ##

\*\*介绍：\*\*环境就是指项目运行的地方，当项目处于开发阶段，项目运行在开发人员电脑上，项目所处的环境就是开发环境。当项目开发完成后，要将项目放到真实的网站服务器运行，项目所处的环境就是生产环境。  
\*\*为什么要区分环境：\*\*因为不同环境下，项目的配置是不一样的，需要在项目代码中判断当前项目运行的环境，根据不同的环境应用不同的项目配置（什么环境做什么事）  
**如何区分环境**通过电脑操作系统中的环境变量区分当前是开发环境还是生产环境

*  设置环境变量  
    1，开发环境  
    找到此电脑，右击属性点开，高级系统设置，高级，环境变量，系统环境变量，新建  
    ![在这里插入图片描述][2020041820491830.PNG_pic_center]  
    建议如此书写（语义清晰），这个代表开发环境  
    2，生产环境  
    变量名同上，变量值设置为：production  
    团队开发时，提前声明要用的环境变量。
 *  使用  
    代码块

//cwen获取当前处于哪种开发环境
    if (process.env.NODE_ENV == 'development') { 
        console.log('处于开发环境');
    } else { 
        console.log('处于生产环境');
    }

执行文件（此处以development为例）  
![在这里插入图片描述][20200418205510120.PNG_pic_center]  
输出正确（当系统变量值设为production时输出：生产环境）

*  morgan（Express框架中间件函数，用于开发环境中将客户端向服务器端发送的请求信息打印至控制台；处于生产环境则自动失效，不打印）  
    1，先下载这个第三方模块（npm install morgan）  
    2，引入文件

//引入config第三方模块
    const config = require('config');
    //cwen获取当前处于哪种开发环境
    if (process.env.NODE_ENV == 'development') { 
        console.log('处于开发环境');
        //在开发环境中，将客户端发送到服务器端的请求信息打印到控制台
        app.use(morgan('dev'));
    } else { 
        console.log('处于生产环境');
    }

3，执行结果  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]  
成功输出各个请求的请求参数，地址，状态码，时间

*  config（具有自动识别生产环境的功能）  
    **作用**允许开发人员将不同运行环境下的应用配置信息抽离到单独的文件中，模块内部自动判断当前应用的运行环境，并读取对应的配置信息，极大提供应用配置的维护成本，避免了当运行环境重复多次切换时，手动到项目代码中修改配置信息  
    1，使用步骤  
    （1）命令行工具下载(npm install config)  
    （2）在项目根目录下新建config文件夹  
    （3）在config文件夹下新建default.json, development.json, production.json文件；default.json（存放默认配置信息）development.json（存放开发环境的配置信息）production.json（存放生产环境的配置信息），config判断运行环境时匹配不到开发与生产时，就会选择默认配置信息  
    （4）在项目中引用模块  
    （5）使用模块内供get方法获取配置信息  
    2，撸它  
    代码块  
    default.json（json文件有严格要求，对象属性及值必须用引号）

{ 
        "title": "博主最帅"
    }

development.json

{ 
        "title": "博主最帅-----------开发环境"
    }

production.json

{ 
        "title": "博主最帅----------生产环境"
    }

app.js写入

//引入config第三方模块
    const config = require('config');
    //cwen测试输出当前环境
    console.log(config.get('title'));

执行结果（此处环境变量依旧是上述development）  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]  
3，将数据库配置信息放进配置文件中  
代码块  
（1）development.json

{ 
        "db": { 
            "user": "cwen",
            "pwd": "cwen",
            "host": "localhost",
            "port": "27017",
            "name": "blog"
        }
    }

（2）数据库连接处（细节处含注释）

//引入mongoose数据库模块
    const mongoose = require('mongoose');
    //引入config第三方模块
    const config = require('config');
    //连接数据库
    // mongoose.connect('mongodb://localhost/blog', { useUnifiedTopology: true, useNewUrlParser: true })
    //mongoose.connect('mongodb://user:pwd@localhost:27017/data'),mongodb数据库默认端口27017
    // mongoose.connect('mongodb://cwen:cwen@localhost:27017/blog', { useUnifiedTopology: true, useNewUrlParser: true })
    //使用字符串拼接的方式进行插入数据
    mongoose.connect(`mongodb://${ config.get('db.user')}:${ config.get('db.pwd')}@${ config.get('db.host')}:${ config.get('db.port')}/${ config.get('db.name')}`, {  useUnifiedTopology: true, useNewUrlParser: true })
        .then(() => console.log('数据库连接成功'))
        .catch(err => console.log(err, '数据库连接失败'))

在环境变量为development的情况下，数据库访问依旧正常

**but**问题来了，我的数据库密码暴露啦，搞了半天数据库添加账号，就这？？？  
哈哈哈，有方法隐藏呀，接着听我喷就完啦  
1，把数据库密码写成系统环境变量  
![在这里插入图片描述][20200418213338218.PNG_pic_center]  
2，在config文件夹下新建custom-environment-variables.json文件（文件名不可更改）写入

{ 
        "db": { 
            "pwd": "APP_PWD"
        }
    }

3，将刚刚development内的pwd属性删除  
4，重新执行入口文件，在环境变量为development的情况下，数据库访问依旧正常

**OVER  
冲冲冲**

[2020041820491830.PNG_pic_center]: /images/20230521/54bd9269502c460ea3f94815b799d554.png
[20200418205510120.PNG_pic_center]: /images/20230521/4ec74034fa504019b8e7c591f0e1d779.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center]: /images/20230521/9cd79dd3d3244197b9bf5a08484b341c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N3cTUyMW8_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20230521/ba2630c1cdbd444aa6de939efa3aa8d8.png
[20200418213338218.PNG_pic_center]: /images/20230521/24f436b2de0745f384b46dd4f5c5de19.png