步骤四：组件配置

前端组件配置访问方式

1. 在左侧导航栏中选择“组件配置”。
2. 在“组件配置”页面上方的下拉框中选择“cae-frontend”组件。
3. 单击“访问方式”模块中的“编辑”。
4. “从环境外部访问本组件”页面，选择“负载均衡配置”，并单击“添加负载均衡配置”。
5. 参考表4进行配置。

   表4 负载均衡外网访问配置

   参数	参数说明	本案例示例
   负载均衡器	支持“独享型”和“内置负载均衡器”。 选择“内置负载均衡器”，只支持基于EIP公网访问。 选择“独享型”时，在下拉框中选择对应负载均衡器。 说明： 如需选择“独享型”负载均衡器，请先配置VPC访问CAE环境。 只支持选择环境所属VPC下的负载均衡实例。 可通过将负载均衡器配置弹性公网IP实现外网访问CAE组件。	内置负载均衡器
   健康检查	此处健康检查是设置负载均衡的健康检查配置。 不启用：关闭负载均衡健康检查。 启用：启动负载均衡健康检查。默认为“启用”。 协议 健康检查请求的协议类型。 支持TCP和HTTP协议。默认值为TCP。 说明： 不支持直接切换协议，如需切换，请更新为不启用后再选择其他协议。 检查路径 当健康检查的“协议”选择“HTTP”时，需要配置。 指定健康检查的URL地址。检查路径必须以/开头，长度范围为1-80个字符。 支持使用英文字母、数字和字符‘-’、‘/’、‘.’、‘%’、‘?’、‘&’、‘_’。 检查周期（秒） 发送健康检查请求的时间间隔。 取值范围[1-50]。默认值5秒。 超时时间（秒） 每次健康检查响应的最大超时时间。 取值范围[1-50]。默认值10秒。 最大重试次数 健康检查最大的重试次数。 取值范围[1-10]。默认值3次。	启用
   访问控制	主要用来控制访问组件的IP地址，您可以创建访问控制策略，允许/禁止某个IP地址对组件进行访问。支持IP和IP网段。 允许所有IP访问。 白名单。 只允许白名单中放通的IP访问组件。 黑名单。 禁止黑名单中的IP访问组件。	允许所有IP访问
   端口配置	配置端口的协议、监听端口和访问端口。	协议：选择TCP。 监听端口：填写为8080。 访问端口：任选0~65535之间合法端口，例如20004。 端口号唯一，避免冲突。

6. 单击“确定”，完成前端组件访问方式配置。
7. 单击组件配置页面上方的“生效配置”。在右侧弹框中确认配置信息，并单击“确定”，使配置生效。

后端组件配置访问方式

1. 在“组件配置”页面上方的下拉框中选择“cae-backend”组件。
2. 单击“访问方式”模块中的“编辑”。
3. 选择“负载均衡配置”，单击“添加负载均衡配置”，参考表5进行配置。

   表5 负载均衡外网访问配置

   参数	参数说明	本案例示例
   负载均衡器	支持“独享型”和“内置负载均衡器”。 选择“内置负载均衡器”，只支持基于EIP公网访问。 选择“独享型”时，在下拉框中选择对应负载均衡器。 说明： 如需选择“独享型”负载均衡器，请先配置VPC访问CAE环境。 只支持选择环境所属VPC下的负载均衡实例。 可通过将负载均衡器配置弹性公网IP实现外网访问CAE组件。	内置负载均衡器
   健康检查	此处健康检查是设置负载均衡的健康检查配置。 不启用：关闭负载均衡健康检查。 启用：启动负载均衡健康检查。默认为“启用”。 协议 健康检查请求的协议类型。 支持TCP和HTTP协议。默认值为TCP。 说明： 不支持直接切换协议，如需切换，请更新为不启用后再选择其他协议。 检查路径 当健康检查的“协议”选择“HTTP”时，需要配置。 指定健康检查的URL地址。检查路径必须以/开头，长度范围为1-80个字符。 支持使用英文字母、数字和字符‘-’、‘/’、‘.’、‘%’、‘?’、‘&’、‘_’。 检查周期（秒） 发送健康检查请求的时间间隔。 取值范围[1-50]。默认值5秒。 超时时间（秒） 每次健康检查响应的最大超时时间。 取值范围[1-50]。默认值10秒。 最大重试次数 健康检查最大的重试次数。 取值范围[1-10]。默认值3次。	启用
   访问控制	主要用来控制访问组件的IP地址，您可以创建访问控制策略，允许/禁止某个IP地址对组件进行访问。支持IP和IP网段。 允许所有IP访问。 白名单。 只允许白名单中放通的IP访问组件。 黑名单。 禁止黑名单中的IP访问组件。	允许所有IP访问
   端口配置	配置端口的协议、监听端口和访问端口。	协议：选择TCP。 监听端口：填写9090。 访问端口：任选0~65535之间合法端口，例如20001。 端口号唯一，避免冲突。

4. 单击“确定”，完成后端组件访问方式配置。
5. 单击组件配置页面上方的“生效配置”。在右侧弹框中确认配置信息，并单击“确定”，使配置生效。

前端组件配置环境变量

1. 在“组件配置”页面上方的下拉框中选择“cae-frontend”组件。
2. 单击“环境变量”模块中的“编辑”。
3. 单击“新增环境变量”，参考表6进行配置。

   表6 环境变量参数

   参数	参数说明	本案例示例
   类型	支持“手工添加”和“凭据导入”。	手动添加
   变量名称	环境变量的名称，必须唯一。变量名称的命名规则：由字母、数字、下划线（_）、中划线（-）、点（.）组成，不能以数字开头。	VUE_APP_BASE_URL
   变量/变量引用	填写为“后端的访问地址”，可以在“组件列表”获取，如图1所示。	填写后端的访问地址。

   图1 获取后端访问地址
   
   图2 配置前端环境变量
   

4. 单击“保存”后，单击“确定”完成配置。
5. 单击组件配置页面的上方“生效配置”。在右侧弹框中确认配置信息，并单击“确定”，使配置生效。