angular 构建可以动态挂载的配置服务
angular 构建可以动态挂载的配置服务
Intro
在 angular
中可以指定 environment
来区分不同环境下的配置,然而 environment
中的配置会在打包时是固定的,想要像挂载 asp.net core 里的 appsettings.json
的配置文件一样挂载 environment
是做不到的,想要读取系统的环境变量也是行不通的。
有时候希望能够动态指定一些配置,运行 docker 容器的时候挂载一个配置文件来实现动态配置
实现方案
通过一个 config.js
的配置文件,将配置信息写入 window
对象的属性中,配置信息从 window
对象中读取,
这样就可以动态挂载配置文件了。
实现细节
实现 ConfigService
:
import { environment } from "../../environments/environment";
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class ConfigService {
public GetApiBaseUrl(): string {
if (window["__env"] && window["__env"]["ApiBaseUrl"]) {
return <string>window["__env"]["ApiBaseUrl"];
}
return environment.apiBaseUrl;
}
}
config.js
示例:
var env = {
ApiBaseUrl: "https://reservation.weihanli.xyz"
};
window["__env"]= env;
在 index.html
中引入 config.js
文件
<script src="assets/config.js"></script>
使用 ConfigService
示例:
import { ConfigService } from './ConfigService';
export class BaseService<TModel>{
protected readonly apiBaseUrl;
constructor(config: ConfigService){
this.apiBaseUrl = config.GetApiBaseUrl();
}
}
Docker 挂载
docker run -d -p 9000:80 --name=reservation-client -v $(pwd)/assets/config.js:/usr/share/nginx/html/assets/config.js weihanli/reservation-client:latest # 挂载配置文件
sample config.js
:
var env = {
ApiBaseUrl: "https://reservation.weihanli.top"
};
window["__env"]= env;
容器启动成功之后,访问 http://localhost:9000
即可,监控 HTTP 请求
可以看到实际请求的地址已经变成了挂载的配置文件里的地址了
Reference
- https://github.com/WeihanLi/ActivityReservation/tree/dev/ActivityReservation.Clients/ReservationClient
- https://reservation-client.weihanli.xyz/
angular 构建可以动态挂载的配置服务的更多相关文章
- 使用Angular构建单页面应用(SPA)
什么是SPA?看下图就是SPA: 下面说正经的,个人理解SPA就是整个应用只有一个页面,所有的交互都在一个页面完成,不需要在页面之间跳转. 单页面的好处是更快的响应速度,更流畅的用户体验,甚至和桌面应 ...
- 使用 firewalld 构建 Linux 动态防火墙
firewalld 是新一 Linux 代防火墙工具,它提供了支持网络 / 防火墙区域 (zone) 定义网络链接以及接口安全等级的动态防火墙管理工具.它也支持允许服务或者应用程序直接添加防火墙规则的 ...
- 通过Nginx、Consul、Upsync实现动态负载均衡和服务平滑发布
前提 前段时间顺利地把整个服务集群和中间件全部从UCloud迁移到阿里云,笔者担任了架构和半个运维的角色.这里详细记录一下通过Nginx.Consul.Upsync实现动态负载均衡和服务平滑发布的核心 ...
- NFS 配置服务
NFS 配置服务 北京市海淀区 张俊浩 一.NFS.即网络文件系统(Network File System,NFS).一种使用于分散式文件系统的协议,由升阳公司开发.于1984年向外发布.功能是通过 ...
- kvm 动态挂载硬盘
根据最新需求需要动态的给kvm下的windows虚拟机挂载硬盘,网上查看了很多资料终于试通了,在这里记录下方便自己回忆,同事可以给大家做做参考,如果有问题欢迎吐槽 环境:先说说我使用的环境,环境是使用 ...
- Azure 项目构建 – 构建直播教学系统之媒体服务篇
本课程主要介绍如何在 Azure 平台上快速构建和部署基于 Azure 媒体服务的点播和直播教学系统, 实践讲解如何使用 Azure 门户创建媒体服务, 配置视频流进行传输,连接 CDN 加速等. 具 ...
- lucene构建restful风格的简单搜索引擎服务
来自于本人博客: lucene构建restful风格的简单搜索引擎服务 本人的博客如今也要改成使用lucene进行全文检索的功能,因此在这里把代码贴出来与大家分享 一,文件夹结构: 二,配置文件: 总 ...
- netcore 之动态代理(微服务专题)
动态代理配合rpc技术调用远程服务,不用关注细节的实现,让程序就像在本地调用以用. 因此动态代理在微服务系统中是不可或缺的一个技术.网上看到大部分案例都是通过反射自己实现,且相当复杂.编写和调试相当不 ...
- 6.Sentinel源码分析—Sentinel是如何动态加载配置限流的?
Sentinel源码解析系列: 1.Sentinel源码分析-FlowRuleManager加载规则做了什么? 2. Sentinel源码分析-Sentinel是如何进行流量统计的? 3. Senti ...
随机推荐
- ASP.NET MVC 实现页落网资源分享网站+充值管理+后台管理(4)之业务仓储工厂
在创建业务层之前,我们先来熟悉一下业务仓储工厂Bobo.Repository.dll程序集,后续的业务操作,我们都将通过这个程序集中的方法传递数据库操作,其介于数据库操作与业务层之间,详情可前往< ...
- Weblogic/WAS之Full GC监控与计算
在网上看到关于内存回收机制,同大家一起分析探讨.堆内存划分为Eden.Survivor 和 Tenured/Old 空间,如下图所示: Minor GC 会清理年轻代的内存,Major GC 是清理老 ...
- dotnet 线程静态字段
在 dotnet 程序提供了一个好用的特性,可以让字段作为线程的静态字段,也就是在相同线程的所有代码访问的静态字段是相同对象,但不同线程访问的时候是不同的 在 .NET 程序可以使用 ThreadSt ...
- elasticsearch基础知识杂记
日常工作中用到的ES相关基础知识和总结.不足之处请指正,会持续更新. 1.集群的健康状况为 yellow 则表示全部主分片都正常运行(集群可以正常服务所有请求),但是 副本 分片没有全部处在正常状态. ...
- net core WebApi——依赖注入Autofac
目录 前言 Autofac 添加一个Util来随时调用 小结 代码地址 前言 周末加班,下午犯困,整理下之前鼓捣过的东西,看过我之前的webapi系列的读者知道,我之前试过Aspect,但是升级到3. ...
- ansible批量部署tomcat
1.1 构建目录结构 此操作是安装nginx+mysql+tomcat+db的目录结构,可以参考一下,不错~ mkdir -p /ansible/roles/{nginx,mysql,tomcat,d ...
- MySQL基础篇(04):存储过程和视图,用法和特性详解
本文源码:GitHub·点这里 || GitEE·点这里 一.存储过程 1.概念简介 存储程序是被存储在服务器中的组合SQL语句,经编译创建并保存在数据库中,用户可通过存储过程的名字调用执行.存储过程 ...
- [Oracle]Oracle的闪回归档
Oracle的闪回归档 场景需求,由于管理数据库的一些核心表,在实施初期会有人为误删除的问题.Oracle 11gR2提供了闪回归档的特性,可以保证不用RMAN来恢复误删除的数据.实践如下: 1.创建 ...
- Android短视频滑动播放(一)
本文主要介绍采用RecyclerView配合PagerSnapHelper实现短视频滑动播放内容. 1. 主页内容构建 主页布局文件定义RecyclerView,为RecyclerView建立对应适配 ...
- PHP 经典面试题集
这篇文章介绍的内容是关于PHP 经典面试题集 PHP 经典面试题集,有着一定的参考价值,现在分享给大家,有需要的朋友可以参考一下 结合我自己面试情况,面对的一些php面试题列举出来,基本上结合自己的看 ...