一种网页应用的处理方法、装置、存储介质及电子设备与流程

1.本技术涉及容器、前端构建技术领域，更具体地说，涉及一种网页应用的处理方法、装置、存储介质及电子设备。


背景技术：

2.在全球广域网(worldwide web，web)应用开发中，通常会使用构建工具(webpack、rollup等)在编译构建网页应用源码过程中，将环境变量作为配置嵌入到网页应用中。
3.由于编译构建输出的是静态的超文本标记语言(hypertextmarkup language，html)/层叠样式表(cascading style sheets，css)/即时编译型的编程语言(javascript，js)文件包，它们无法在运行时动态加载和读取配置。当网页应用需要部署运行在不同环境下时，需要调整配置(环境变量)，重新构建网页应用源码并打包，从而造成了服务器资源的浪费，不同部署下的代码无法保持一致性。
4.因此，现有构建网页应用的处理方式会造成服务器资源的浪费，且不同部署下的代码无法保持一致性。


技术实现要素：

5.有鉴于此，本技术公开了一种网页应用的处理方法、装置、存储介质及电子设备，简化了静态网页应用程序的构建方式，避免了重复构建网页应用带来的服务器资源浪费。同时在不同部署环境下部署网页应用时无需修改代码，保证了在不同部署环境下部署网页应用时代码的一致性。
6.为了实现上述目的，其公开的技术方案如下：
7.本技术第一方面公开了一种网页应用的处理方法，所述方法包括：
8.当监测到网页应用容器环境为生产环境时，提取网页应用容器的生产环境的环境变量值；
9.当接收到访问网页应用的访问请求时，将所述环境变量值嵌入到网页文件中；
10.对所述网页文件进行镜像构建，得到网页应用的镜像文件；
11.在不同部署环境下部署所述网页应用时，执行所述镜像文件，以实现在不同部署环境下网页应用运行时的动态加载和读取网页服务器的环境变量来运行网页应用程序。
12.优选的，所述当监测到网页应用容器环境为生产环境时，提取网页应用容器的生产环境的环境变量值，包括：
13.通过预设获取脚本获取网页应用容器环境的环境变量；
14.若所述网页应用容器环境的环境变量为生产环境变量，则确定网页应用容器环境为生产环境；
15.提取网页应用容器的生产环境的环境变量值。
16.优选的，所述当接收到访问网页应用的访问请求时，将所述环境变量值嵌入到网页文件中，包括：
17.当接收到访问网页应用的访问请求时，将网页文件中的环境变量占位符替换为所述环境变量值，以使所述环境变量值嵌入到网页文件中。
18.优选的，所述对所述网页文件进行镜像构建，得到网页应用的镜像文件，包括：
19.添加模板文件和网页应用构建文件；所述模板文件为网页服务器的配置文件；
20.通过应用容器引擎，对所述模板文件和所述网页应用构建文件进行镜像构建操作，得到网页应用的镜像文件。
21.优选的，所述在不同部署环境下部署所述网页应用时，执行所述镜像文件，以实现在不同部署环境下网页应用运行时的动态加载和读取网页服务器的环境变量来运行网页应用程序，包括：
22.在不同部署环境下部署所述网页应用时，通过预设启动命令，执行所述镜像文件使得所述环境变量值存储至网页服务器的配置文件中，以完成在不同部署环境下网页应用运行时的动态加载和网页服务器的环境变量来运行网页应用程序。
23.优选的，还包括：
24.通过预设访问定位符访问所述网页应用的环境变量值。
25.本技术第二方面公开了一种网页应用的处理装置，所述装置包括：
26.提取单元，用于当监测到网页应用容器环境为生产环境时，提取网页应用容器的生产环境的环境变量值；
27.嵌入单元，用于当接收到访问网页应用的访问请求时，将所述环境变量值嵌入到网页文件中；
28.构建单元，用于对所述网页文件进行镜像构建，得到网页应用的镜像文件；
29.执行单元，用于在不同部署环境下部署所述网页应用时，执行所述镜像文件，以实现在不同部署环境下网页应用运行时的动态加载和读取网页服务器的环境变量来运行网页应用程序。
30.优选的，所述提取单元，包括：
31.获取模块，用于通过预设获取脚本获取网页应用容器环境的环境变量；
32.确定模块，用于若所述网页应用容器环境的环境变量为生产环境变量，则确定网页应用容器环境为生产环境；
33.提取模块，用于提取网页应用容器的生产环境的环境变量值。
34.本技术第三方面公开了一种存储介质，所述存储介质包括存储的指令，其中，在所述指令运行时控制所述存储介质所在的设备执行如第一方面任意一项所述的网页应用的处理方法。
35.本技术第四方面公开了一种电子设备，包括存储器，以及一个或者一个以上的指令，其中一个或者一个以上指令存储于存储器中，且经配置以由一个或者一个以上处理器执行如第一方面任意一项所述的网页应用的处理方法。
36.经由上述技术方案可知，本技术公开了一种网页应用的处理方法、装置、存储介质及电子设备，当监测到网页应用容器环境为生产环境时，提取网页应用容器的生产环境的环境变量值，当接收到访问网页应用的访问请求时，将环境变量值嵌入到网页文件中，对网页文件进行镜像构建，得到网页应用的镜像文件，在不同部署环境下部署网页应用时，执行镜像文件，以完成在不同部署环境下网页应用运行时的动态加载和读取网页服务器的环境
变量来运行网页应用程序。通过上述方案，当网页应用需要部署在不同的部署环境时，只需一次构建网页应用即可实现在不同部署环境下网页应用运行时的动态加载和读取网页服务器的环境变量来运行网页应用程序，简化静态网页应用程序的构建方式，避免重复构建网页应用带来的服务器资源浪费。同时在不同部署环境下部署网页应用时无需修改代码，确保在不同部署环境下部署网页应用时代码的一致性。
附图说明
37.为了更清楚地说明本技术实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本技术的实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据提供的附图获得其他的附图。
38.图1为本技术实施例公开的一种网页应用的处理方法的流程示意图；
39.图2为本技术实施例公开的一种网页应用的处理装置的结构示意图；
40.图3为本技术实施例公开的一种电子设备的结构示意图。
具体实施方式
41.下面将结合本技术实施例中的附图，对本技术实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本技术一部分实施例，而不是全部的实施例。基于本技术中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本技术保护的范围。
42.在本技术中，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个
……”
限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。
43.由背景技术可知，由于编译构建输出的是静态的超文本标记语言(hyper textmarkup language，html)/层叠样式表(cascading style sheets，css)/即时编译型的编程语言(javascript，js)文件包，它们无法在运行时动态加载和读取配置。当网页应用需要部署运行在不同环境下时，需要调整配置(环境变量)，重新构建网页应用源码并打包，从而造成了服务器资源的浪费，不同部署下的代码无法保持一致性。
44.为了解决上述问题，本技术实施例公开了一种网页应用的处理方法、装置、存储介质及电子设备，当监测到网页应用容器环境为生产环境时，提取网页应用容器的生产环境的环境变量值，当接收到访问网页应用的访问请求时，将环境变量值嵌入到网页文件中，对网页文件进行镜像构建，得到网页应用的镜像文件，在不同部署环境下部署网页应用时，执行镜像文件，以完成在不同部署环境下网页应用运行时的动态加载和读取网页服务器的环境变量来运行网页应用程序。通过上述方案，当网页应用需要部署在不同的部署环境时，只需一次构建网页应用即可实现在不同部署环境下网页应用运行时的动态加载和读取网页服务器的环境变量来运行网页应用程序，简化静态网页应用程序的构建方式，避免重复构建网页应用带来的服务器资源浪费。同时在不同部署环境下部署网页应用时无需修改代
码，确保在不同部署环境下部署网页应用时代码的一致性。具体实现方式通过下述实施例具体进行说明。
45.参考图1所示，为本技术实施例公开的一种网页应用的处理方法的流程示意图，该网页应用的处理方法主要包括如下步骤：
46.s101：当监测到网页应用容器环境为生产环境时，提取网页应用容器的生产环境的环境变量值。
47.其中，将应用的网页应用容器的配置存储在环境变量中，通过在shell脚本中设置环境变量，或者使用.env文件来保存预先定义好的环境变量。通过不同的.env后缀名文件可以进行分组配置，例如：.env.development作为开发环境时的配置，.env.production作为生产环境的配置。
48.环境变量(environment variables)一般是指在操作系统中用来指定操作系统运行环境的一些参数，如：临时文件夹位置和系统文件夹位置等。环境变量是在操作系统中一个具有特定名字的对象，它包含了一个或者多个应用程序所将使用到的信息。例如windows操作系统和dos操作系统中的path环境变量。
49.具体当监测到网页应用容器环境为生产环境时，提取网页应用容器的生产环境的环境变量值的过程如a1-a3所示。
50.a1：通过预设获取脚本获取网页应用容器环境的环境变量。
51.其中，预设获取脚本可以是shell脚本，也可以是其他脚本，具体预设获取脚本的确定由技术人员根据实际情况进行设置，本技术不同具体限定。本技术的预设获取脚本优选shell脚本。
52.shell脚本就是将命令写入文本中，文本可以被执行。
53.脚本本质是一个文件，文件里面存放的是特定格式的指令，可以使用脚本解析器翻译或解析指令并执行。
54.a2：若网页应用容器环境的环境变量为生产环境变量，则确定网页应用容器环境为生产环境。
55.其中，通过网页应用代码的构建工具(如webpack，rollup等)对网页应用源代码打包构建过程中，会根据node_env内置环境变量的值判断当前的环境，读取对应的.env文件。例如，根据node_env内置环境变量的值node_env＝production为生产环境，通过网页应用代码的构建工具读取.env.production文件的配置。
56.a3：提取网页应用容器的生产环境的环境变量值。
57.s102：当接收到访问网页应用的访问请求时，将环境变量值嵌入到网页文件中。
58.在s102中，生产环境配置会在构建网页应用打包过程中通过文本替换的方式，嵌入到网页文件(网页应用包)中。
59.当接收到访问网页应用的访问请求时，将网页文件中的环境变量占位符替换为环境变量值，以使环境变量值嵌入到网页文件中。
60.s103：对网页文件进行镜像构建，得到网页应用的镜像文件。
61.具体对网页文件进行镜像构建，得到网页应用的镜像文件的过程如下：
62.首先，添加模板文件default.conf.template和网页应用构建文件dockerfile；模板文件为网页服务器的配置文件。
63.其中，添加default.conf.template对应的代码如下：
64.server{
65.listen80；
66.location/{
67.root/usr/share/nginx/html/；
68.include/etc/nginx/mime.types；
69.try_files$uri$uri//index.html；
70.sub_filter'％react_app_api_url％”${react_app_api_url}'；
71.}
72.}。
73.添加dockerfile对应的代码如下：
74.from node:14-alpine as builder；
75.env node_env production；
76.#添加工作目录；
77.workdir/app；
78.#安装依赖包；
79.copypackage.json；
80.copyyarn.lock；
81.run yarn install—production；
82.#复制源码文件；
83.copy；
84.#构建打包；
85.run yarnbuild；
86.from nginx:1.21.0-alpine as production；
87.env node_env production；
88.#复制构建好的静态文件资源；
89.copy
‑‑
from＝builder/app/build/usr/share/nginx/html；
90.#添加nginx模板文件；
91.copydefault.conf.template/etc/nginx/templates/default.conf.template；
92.#设置端口；
93.expose 80；
94.#启动服务器；
95.cmd["nginx","-g","daemon off；"]。
[0096]
然后，通过应用容器引擎(docker)，对模板文件和网页应用构建文件进行镜像构建操作，得到网页应用的镜像文件。
[0097]
具体得到网页应用的镜像文件的过程如b1-b11所示。
[0098]
b1：拉取node镜像作为编译环境。
[0099]
其中，node镜像作为基本的编译环境，提供了node.js包管理器(node package manager，npm)等工具，使用npm可以安装网页应用源码依赖的第三方库，以及代码编译工具
webpack、模块打包器rollup等工具。运行webpack编译构建网页应用源码时，需要通过node.js来执行javascript脚本。
[0100]
b2：设置node_env环境变量为生产环境。
[0101]
其中，设置node_env环境变量为生产环境，可以指定webpack等工具使用生产环境的配置来编译构建网页应用源码。
[0102]
b2的生产环境是指node_env环境变量的值为production，用来指定webpack编译构建网页应用源码时读取生产环境配置。
[0103]
b3：设置工作目录。
[0104]
b4：拷贝网页应用源代码到工作目录。
[0105]
b5：安装网页应用源码依赖关系。
[0106]
其中，网页应用源码依赖关系是指不同的网页应用本身需要安装的第三方库及构建工具，例如网页开发框架react，webpack构建打包工具等。
[0107]
b6：执行网页应用构建打包，得到网页应用包。
[0108]
b7：拉取nginx镜像作为生产环境。
[0109]
其中，b7的生产环境是指定最终的网页应用镜像文件包含的运行环境，即已经安装和配置了nginx服务器的镜像文件。
[0110]
b8：从编译环境拷贝网页应用包到web服务器文件目录。
[0111]
b9：拷贝模板文件到web服务器templates目录。
[0112]
b10：设置http网页服务器监听的端口。
[0113]
其中，http网页服务器监听的端口，通常是默认端口80及443(https端口)。
[0114]
b11：设置预设启动命令。
[0115]
其中，预设启动命令即为应用容器引擎docker启动命令。
[0116]
s104：在不同部署环境下部署网页应用时，执行镜像文件，以实现在不同部署环境下网页应用运行时的动态加载和读取网页服务器的环境变量来运行网页应用程序。
[0117]
在s104中，在不同部署环境下部署网页应用时，通过预设启动命令，执行镜像文件使得环境变量值存储至网页服务器的配置文件中，以完成在不同部署环境下网页应用运行时的动态加载和网页服务器的环境变量来运行网页应用程序。
[0118]
当执行上述b1-b11后生成一个可部署的网页应用的镜像文件，可以在不同的部署环境直接使用应用容器引擎docker启动命令使用该镜像文件。针对不同的部署环境，使用该镜像启动容器时，可以设置部署环境相应的环境变量，容器启动时会执行读取加载容器环境变量，动态设置网页服务器配置等初始化动作，以此来实现网页应用动态加载和读取配置的效果。
[0119]
具体网页应用运行时的动态加载的过程如下：
[0120]
首先，利用应用容器引擎docker启动命令动态设置网页应用的环境变量配置，在网页应用容器启动时，使用shell脚本提取容器环境变量值。
[0121]
其中，在不同部署环境下部署网页应用时，通过应用容器引擎docker启动命令的代码如下：
[0122]
docker run-e react_app_api_url＝https://api.example.com
‑‑
name react-app-d-p 8080:80react-app-image。
[0123]
其次，将环境变量值写入模板文件中，作为nginx网页服务器的配置。
[0124]
然后，当用户通过网络访问网页应用时，nginx网页服务器会根据配置文件，将网页文件(如超文本标记语言(hyper text markup language，html)文件)中的环境变量占位符替换为相应的环境变量值，并返回给用户端。
[0125]
最后，用户端(浏览器)接收到nginx网页服务器返回的html文件，解析并运行html文件里的《script》《/script》代码片段，将环境变量值设置为网页应用的配置，实现网页应用运行时动态加载和读取服务器环境变量的效果。
[0126]
网页应用代码的构建工具提供的网页服务器，通过监听网页源代码的改动，读取开发环境配置，自动构建代码，用户可以通过网页服务器在实时预览网页应用。
[0127]
本技术实施例中，当网页应用需要部署在不同的部署环境时，只需一次构建网页应用即可实现在不同部署环境下网页应用运行时的动态加载和读取网页服务器的环境变量来运行网页应用程序，简化静态网页应用程序的构建方式，避免重复构建网页应用带来的服务器资源浪费。同时在不同部署环境下部署网页应用时无需修改代码，确保在不同部署环境下部署网页应用时代码的一致性。
[0128]
基于上述实施例图1公开的一种网页应用的处理方法，本技术实施例还对应公开了一种网页应用的处理装置，如图2所示，该网页应用的处理装置包括提取单元201、嵌入单元202、构建单元203和执行单元204。
[0129]
提取单元201，用于当监测到网页应用容器环境为生产环境时，提取网页应用容器的生产环境的环境变量值。
[0130]
嵌入单元202，用于当接收到访问网页应用的访问请求时，将环境变量值嵌入到网页文件中。
[0131]
构建单元203，用于对网页文件进行镜像构建，得到网页应用的镜像文件。
[0132]
执行单元204，用于在不同部署环境下部署网页应用时，执行镜像文件，以实现在不同部署环境下网页应用运行时的动态加载和读取网页服务器的环境变量来运行网页应用程序。
[0133]
进一步的，提取单元201包括获取模块、确定模块和提取模块。
[0134]
获取模块，用于通过预设获取脚本获取网页应用容器环境的环境变量。
[0135]
确定模块，用于若网页应用容器环境的环境变量为生产环境变量，则确定网页应用容器环境为生产环境。
[0136]
提取模块，用于提取网页应用容器的生产环境的环境变量值。
[0137]
进一步的，构建单元203包括添加模块和构建模块。
[0138]
添加模块，用于添加模板文件和网页应用构建文件；模板文件为网页服务器的配置文件。
[0139]
构建模块，用于通过应用容器引擎，对模板文件和网页应用构建文件进行镜像构建操作，得到网页应用的镜像文件。
[0140]
进一步的，执行单元204具体用于在不同部署环境下部署网页应用时，通过预设启动命令，执行镜像文件使得环境变量值存储至网页服务器的配置文件中，以完成在不同部署环境下网页应用运行时的动态加载和网页服务器的环境变量来运行网页应用程序。
[0141]
进一步的，网页应用的处理装置还包括访问单元。
[0142]
访问单元，用于通过预设访问定位符访问网页应用的环境变量值。
[0143]
本技术实施例中，当网页应用需要部署在不同的部署环境时，只需一次构建网页应用即可实现在不同部署环境下网页应用运行时的动态加载和读取网页服务器的环境变量来运行网页应用程序，简化静态网页应用程序的构建方式，避免重复构建网页应用带来的服务器资源浪费。同时在不同部署环境下部署网页应用时无需修改代码，确保在不同部署环境下部署网页应用时代码的一致性。
[0144]
本技术实施例还提供了一种存储介质，存储介质包括存储的指令，其中，在指令运行时控制存储介质所在的设备执行上述网页应用的处理方法。
[0145]
本技术实施例还提供了一种电子设备，其结构示意图如图3所示，具体包括存储器301，以及一个或者一个以上的指令302，其中一个或者一个以上指令302存储于存储器301中，且经配置以由一个或者一个以上处理器303执行所述一个或者一个以上指令302执行如下：
[0146]
当监测到网页应用容器环境为生产环境时，提取网页应用容器的生产环境的环境变量值；
[0147]
当接收到访问网页应用的访问请求时，将所述环境变量值嵌入到网页文件中；
[0148]
对网页文件进行镜像构建，得到网页应用的镜像文件；
[0149]
在不同部署环境下部署所述网页应用时，执行镜像文件，以实现在不同部署环境下网页应用运行时的动态加载和读取网页服务器的环境变量来运行网页应用程序。
[0150]
上述各个实施例的具体实施过程及其衍生方式，均在本技术的保护范围之内。
[0151]
本说明书中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于系统或系统实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的系统及系统实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
[0152]
专业人员还可以进一步意识到，结合本文中所公开的实施例描述的各示例的单元及算法步骤，能够以电子硬件、计算机软件或者二者的结合来实现，为了清楚地说明硬件和软件的可互换性，在上述说明中已经按照功能一般性地描述了各示例的组成及步骤。这些功能究竟以硬件还是软件方式来执行，取决于技术方案的特定应用和设计约束条件。专业技术人员可以对每个特定的应用来使用不同方法来实现所描述的功能，但是这种实现不应认为超出本技术的范围。
[0153]
对所公开的实施例的上述说明，使本领域技术人员能够实现或使用本技术。对这些实施例的多种修改对本领域技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本技术的精神或范围的情况下，在其它实施例中实现。因此，本技术将不会被限制于本文所示的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。
[0154]
以上所述仅是本技术的优选实施方式，应当指出，对于本技术领域的普通技术人
员来说，在不脱离本技术原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视为本技术的保护范围。