前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >前端容器化第三弹 - vue3 项目容器化 - 通过 meta 注入后端地址

前端容器化第三弹 - vue3 项目容器化 - 通过 meta 注入后端地址

作者头像
老麦
发布2022-12-24 09:39:13
3200
发布2022-12-24 09:39:13
举报
文章被收录于专栏:Go与云原生Go与云原生

在前端容器化的时候, 有一个绕不开的问题: 容器返回的后端地址应该怎么设置。

静态编译到所有文件中, 肯定是不可取的, 总不能后端变更一个访问域名,前端都要重新构建一次镜像吧?

由于 js (typescript 编译后 ) 实际是运行在 用户的浏览器上, 所以也不能像后端一样读取环境变量。

所以, 通过 html <meta> 标签传递信息是一个很好的方法。只需要每次 容器启动的时候, 把 config 信息注入到 index.html 中就可以了。

这样, 就实现 一处编译, 处处运行 的容器化思想。

1. html 文件: 配置注入的 config 值

在 html 文件中使用自定义 meta 标签 。 name 为注入名称, content 为注入值, 使用 k1=v1,k2=v2 的方式。

代码语言:javascript
复制
  <meta name="devkit:config" content="BaiduApi=//Dubai.api.com,QQapi=//QQ.com">

完整 html 如下

代码语言:javascript
复制
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- -->
  <meta name="devkit:config" content="BaiduApi=//Dubai.api.com,QQapi=//QQ.com">
  <title>Document</title>
  <script src="../dist/06-workflow/for-interface.js"></script>
</head>

<body></body>
</html>

2. ts 文件: 初始化 config 默认值与新值注入

  1. interface AppConfig 定义 Config 字段
  2. const appConfig:AppConfig = {} 初始化 配置
  3. function injectConfig(){} 执行函数注入信息
    1. document.getElementsByTagName('meta') 获取所有 meta 标签
    2. const item = metas.namedItem('devkit:config') 根据 meta name 获取 meta 标签
    3. item?.contentitem? 忽略 null 情况
    4. content.split(',') 字符串分割
代码语言:javascript
复制
// config.ts

// 定义 Config 字段
interface AppConfig {
    BaiduApi?: string
    AliApi: string
}

// 实例化 config 并赋予默认值
//   外部导入时  import { appConfig } from '@/apis/config.ts'
export const appConfig: AppConfig = {
    BaiduApi: "https://api.baidu.com",
    AliApi: "https://api.aliyun.com"
}

function injectConfig() {
  
  	// 获取所有 metas
    const metas = document.getElementsByTagName('meta')

    // // 01. 使用 meta 的 id 获取, 与 meta 所在的相对位置有关。
    // const item = metas.item(3)
    // console.log(item);

    // // 02. 使用 meta name 获取
    const item = metas.namedItem('devkit:config')
    // console.log("item=> ", item);

    const content = item?.content
    // console.log("content => ", content);

    if (content) {
        const pairs = content.split(',')
        // console.log("pairs=>", pairs);
        
        for (const pair of pairs) {
            const parts = pair.split('=')
            const key = <keyof AppConfig>parts[0]
            const value = <string>parts[1]

            // 没有 key 或者 没有 value 则跳过
            if (!value || !key) {
                continue
            }

            // 赋值 或 创建
            appConfig[key] = value
        }
    }

    // console.log("appConfig=>", appConfig);
}

// 执行
export default injectConfig()

3. 在 main.ts 中引入

只需要执行, 因此不需要赋值任何变量。直接 import 导入即可

代码语言:javascript
复制
// main.ts

// 只需要执行, 因此不需要赋值任何变量。直接 import 导入即可
import './apis/config'

4. 在 vue3 中使用变量

正常写, import ts 文件即可。

代码语言:javascript
复制
<!-- Hello.vue -->

<template>
  <h3>Hello</h3>
  <div>
    <span>AliApi :</span>
    <input type="text" :value="appConfig.AliApi" />
  </div>
</template>

<script setup lang="ts">
import { appConfig } from '@/apis/config'
</script>

<style scoped>
</style>

5. envsubst 通过环境变量注入

  1. 假设, 前端代码打包后的 index.html 文件名为 index.html.tmpl, 启动包含 ${APP_CONFIG} 占位符, 以便注入 真实 的值
代码语言:javascript
复制
<!-- index.html.tmpl -->
<meta name="devkit:config" content="${APP_CONFIG}">
  1. 使用 envsubst 注入环境变量。这里, 可以使用任何替换的工具和方法。
代码语言:javascript
复制
## env
# APP_CONFIG=BaiduApi=//Dubai.api.com,QQapi=//QQ.com

envsubst < index.html.tmpl > index.html
  1. 启动 nginx

编外: 通过 Object.keys 获取所有字段与字段类型断言

代码语言:javascript
复制

// 通过 keys 获取 config 所有字段
function initial() {
    // 获取 interface 的 所有 key
    const keys = Object.keys(appConfig)
    console.log(keys)

    // 便利 所有 key
    for (const key of keys) {
        // https://stackoverflow.com/questions/56568423/typescript-no-index-signature-with-a-parameter-of-type-string-was-found-on-ty/56569217
        // key 类型断言
        // const keyname = <keyof AppConfig>key // 方式1
        const keyname = key as keyof AppConfig // 方式2
        console.log("keyname=", keyname);
        console.log("value=", appConfig[keyname]);
    }
}

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-09-02,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 熊猫云原生Go 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. html 文件: 配置注入的 config 值
  • 2. ts 文件: 初始化 config 默认值与新值注入
    • 3. 在 main.ts 中引入
      • 4. 在 vue3 中使用变量
        • 5. envsubst 通过环境变量注入
        • 编外: 通过 Object.keys 获取所有字段与字段类型断言
        相关产品与服务
        容器服务
        腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档