mirror of
https://github.com/zhwei820/learn.lianglianglee.com.git
synced 2025-09-17 08:46:40 +08:00
391 lines
23 KiB
HTML
391 lines
23 KiB
HTML
<!DOCTYPE html>
|
||
<!-- saved from url=(0046)https://kaiiiz.github.io/hexo-theme-book-demo/ -->
|
||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||
<head>
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
|
||
<link rel="icon" href="/static/favicon.png">
|
||
<title>21 容器方案：从构建到部署，容器化方案的优势有哪些？.md.html</title>
|
||
<!-- Spectre.css framework -->
|
||
<link rel="stylesheet" href="/static/index.css">
|
||
<!-- theme css & js -->
|
||
<meta name="generator" content="Hexo 4.2.0">
|
||
</head>
|
||
|
||
<body>
|
||
|
||
<div class="book-container">
|
||
<div class="book-sidebar">
|
||
<div class="book-brand">
|
||
<a href="/">
|
||
<img src="/static/favicon.png">
|
||
<span>技术文章摘抄</span>
|
||
</a>
|
||
</div>
|
||
<div class="book-menu uncollapsible">
|
||
<ul class="uncollapsible">
|
||
<li><a href="/" class="current-tab">首页</a></li>
|
||
</ul>
|
||
|
||
<ul class="uncollapsible">
|
||
<li><a href="../">上一级</a></li>
|
||
</ul>
|
||
|
||
<ul class="uncollapsible">
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/00 开篇词 建立上帝视角，全面系统掌握前端效率工程化.md.html">00 开篇词 建立上帝视角，全面系统掌握前端效率工程化.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/01 项目基石：前端脚手架工具探秘.md.html">01 项目基石：前端脚手架工具探秘.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/02 界面调试：热更新技术如何开着飞机修引擎？.md.html">02 界面调试：热更新技术如何开着飞机修引擎？.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/03 构建提速：如何正确使用 SourceMap？.md.html">03 构建提速：如何正确使用 SourceMap？.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/04 接口调试：Mock 工具如何快速进行接口调试？.md.html">04 接口调试：Mock 工具如何快速进行接口调试？.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/05 编码效率：如何提高编写代码的效率？.md.html">05 编码效率：如何提高编写代码的效率？.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/06 团队工具：如何利用云开发提升团队开发效率？.md.html">06 团队工具：如何利用云开发提升团队开发效率？.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/07 低代码工具：如何用更少的代码实现更灵活的需求.md.html">07 低代码工具：如何用更少的代码实现更灵活的需求.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/08 无代码工具：如何做到不写代码就能高效交付？.md.html">08 无代码工具：如何做到不写代码就能高效交付？.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/09 构建总览：前端构建工具的演进.md.html">09 构建总览：前端构建工具的演进.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/10 流程分解：Webpack 的完整构建流程.md.html">10 流程分解：Webpack 的完整构建流程.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/11 编译提效：如何为 Webpack 编译阶段提速？.md.html">11 编译提效：如何为 Webpack 编译阶段提速？.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/12 打包提效：如何为 Webpack 打包阶段提速？.md.html">12 打包提效：如何为 Webpack 打包阶段提速？.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/13 缓存优化：那些基于缓存的优化方案.md.html">13 缓存优化：那些基于缓存的优化方案.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/14 增量构建：Webpack 中的增量构建.md.html">14 增量构建：Webpack 中的增量构建.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/15 版本特性：Webpack 5 中的优化细节.md.html">15 版本特性：Webpack 5 中的优化细节.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/16 无包构建：盘点那些 No-bundle 的构建方案.md.html">16 无包构建：盘点那些 No-bundle 的构建方案.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/17 部署初探：为什么一般不在开发环境下部署代码？.md.html">17 部署初探：为什么一般不在开发环境下部署代码？.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/18 工具盘点：掌握那些流行的代码部署工具.md.html">18 工具盘点：掌握那些流行的代码部署工具.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/19 安装提效：部署流程中的依赖安装效率优化.md.html">19 安装提效：部署流程中的依赖安装效率优化.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/20 流程优化：部署流程中的构建流程策略优化.md.html">20 流程优化：部署流程中的构建流程策略优化.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
<a class="current-tab" href="/专栏/前端工程化精讲-完/21 容器方案：从构建到部署，容器化方案的优势有哪些？.md.html">21 容器方案：从构建到部署，容器化方案的优势有哪些？.md.html</a>
|
||
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/22 案例分析：搭建基本的前端高效部署系统.md.html">22 案例分析：搭建基本的前端高效部署系统.md.html</a>
|
||
|
||
</li>
|
||
<li>
|
||
|
||
|
||
<a href="/专栏/前端工程化精讲-完/23 结束语 前端效率工程化的未来展望.md.html">23 结束语 前端效率工程化的未来展望.md.html</a>
|
||
|
||
</li>
|
||
</ul>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<div class="sidebar-toggle" onclick="sidebar_toggle()" onmouseover="add_inner()" onmouseleave="remove_inner()">
|
||
<div class="sidebar-toggle-inner"></div>
|
||
</div>
|
||
|
||
<script>
|
||
function add_inner() {
|
||
let inner = document.querySelector('.sidebar-toggle-inner')
|
||
inner.classList.add('show')
|
||
}
|
||
|
||
function remove_inner() {
|
||
let inner = document.querySelector('.sidebar-toggle-inner')
|
||
inner.classList.remove('show')
|
||
}
|
||
|
||
function sidebar_toggle() {
|
||
let sidebar_toggle = document.querySelector('.sidebar-toggle')
|
||
let sidebar = document.querySelector('.book-sidebar')
|
||
let content = document.querySelector('.off-canvas-content')
|
||
if (sidebar_toggle.classList.contains('extend')) { // show
|
||
sidebar_toggle.classList.remove('extend')
|
||
sidebar.classList.remove('hide')
|
||
content.classList.remove('extend')
|
||
} else { // hide
|
||
sidebar_toggle.classList.add('extend')
|
||
sidebar.classList.add('hide')
|
||
content.classList.add('extend')
|
||
}
|
||
}
|
||
|
||
|
||
function open_sidebar() {
|
||
let sidebar = document.querySelector('.book-sidebar')
|
||
let overlay = document.querySelector('.off-canvas-overlay')
|
||
sidebar.classList.add('show')
|
||
overlay.classList.add('show')
|
||
}
|
||
function hide_canvas() {
|
||
let sidebar = document.querySelector('.book-sidebar')
|
||
let overlay = document.querySelector('.off-canvas-overlay')
|
||
sidebar.classList.remove('show')
|
||
overlay.classList.remove('show')
|
||
}
|
||
|
||
</script>
|
||
|
||
<div class="off-canvas-content">
|
||
<div class="columns">
|
||
<div class="column col-12 col-lg-12">
|
||
<div class="book-navbar">
|
||
<!-- For Responsive Layout -->
|
||
<header class="navbar">
|
||
<section class="navbar-section">
|
||
<a onclick="open_sidebar()">
|
||
<i class="icon icon-menu"></i>
|
||
</a>
|
||
</section>
|
||
</header>
|
||
</div>
|
||
<div class="book-content" style="max-width: 960px; margin: 0 auto;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;">
|
||
<div class="book-post">
|
||
<p id="tip" align="center"></p>
|
||
<div><h1>21 容器方案：从构建到部署，容器化方案的优势有哪些？</h1>
|
||
<p>上节课我们主要介绍了部署系统中各耗时环节的一些常用优化方案。课后思考题是：课程中提到了几种利用缓存的优化方案呢？如果你认真学习了课程内容，不难发现我一共提到了三种基于缓存的优化方案，它们分别是：多项目共用依赖缓存、依赖安装目录的缓存以及构建过程的持久化缓存备份。这些缓存方案不仅可以运用到传统的部署方式中，在今天介绍的容器化部署方案中也有各自的用武之地。</p>
|
||
<p>下面我就来介绍本节课的第一个话题：什么是容器化呢？</p>
|
||
<h3>容器化的基本概念</h3>
|
||
<h4>什么是容器化</h4>
|
||
<p><a href="https://en.wikipedia.org/wiki/OS-level_virtualization">容器化（Containerization）</a>通常是指以 <a href="https://www.docker.com/">Docker</a> 技术为代表，将操作系统内核虚拟化的技术。和传统的虚拟机相比，容器化具有占用空间更小、性能开销更低、启动更快、支持弹性伸缩以及支持容器间互联等优势。</p>
|
||
<p>下面介绍 Docker 的几个基本概念。</p>
|
||
<h4>Docker</h4>
|
||
<p>通常我们提到的 Docker 是指运行在 Linux/Windows/macOS 中开源的虚拟化引擎，用于创建、管理和编排容器（此外，Docker 也是发布和维护该开源项目的公司名称）。</p>
|
||
<h4>镜像</h4>
|
||
<p>Docker 中的镜像（Image）是指用于创建容器实例的基础虚拟化模板。对于开发人员来说，可以把镜像理解为编程语言中的类：通过一个镜像可以创建多个容器实例，镜像之间也存在继承关系。通过 Docker 引擎可以构建、删除镜像，还可以将本地镜像 push 到远程仓库或者从远程拉取。例如一个基于 <a href="https://github.com/nodejs/docker-node/blob/bcd3607a38cdf5529cef9a6ed1163d7e06ddea6d/14/stretch/Dockerfile">node:14</a> 的镜像，在创建时不光包含了运行 node14 版本所需的 Linux 系统环境，还包含了额外打入到镜像内的 Yarn 程序。</p>
|
||
<h4>容器</h4>
|
||
<p>容器（Container）是 Docker 中的核心功能单元。通常一个容器内包含了一个或多个应用程序以及运行它们所需要的完整相关环境依赖。例如，基于上面例子中的 node:14 镜像，就可以创建出对应版本 NodeJS 的独立运行环境。通过 Docker 引擎可以对容器进行创建、删除、停止、恢复、与容器交互等操作。</p>
|
||
<h4>数据挂载与数据卷</h4>
|
||
<p>通常情况下容器内的基础数据来自创建容器的镜像。创建容器后，在容器内执行的命令如果导致容器内的数据产生变化，这些变更的数据会在容器删除的同时被清除，无法持久化保留。如果要解决持久化保留数据，可以采取两种方式：挂载容器的宿主环境（即执行启动容器命令所在的服务器）的目录或使用数据卷。数据卷可以理解为通过 Docker 引擎创建的宿主环境下的独立磁盘空间，用于在容器内读写数据，生命周期独立，不受容器生命周期的影响。</p>
|
||
<h4>网络</h4>
|
||
<p>Docker 容器的网络有多种驱动类型，例如 bridge、host、overlay 等。其中默认的 bridge 类型类似网桥，用于点对点访问容器间端口或者将容器端口映射到宿主环境下。而 host 则是直接使用宿主环境的网络。更多网络模型介绍可参照<a href="https://docs.docker.com/network/">官方说明文档</a>。</p>
|
||
<h3>容器化的构建部署</h3>
|
||
<p>在了解了容器化的基本概念后，我们再来看看什么是容器化的构建部署。</p>
|
||
<p>顾名思义，容器化的构建部署是把原先在部署服务器中执行的项目部署流程的各个环节，改为使用容器化的技术来完成，具体可以划分为操作镜像和操作容器两个阶段。</p>
|
||
<h4>镜像阶段</h4>
|
||
<p>镜像阶段的主要目标是创建一个用于部署代码的容器环境的工作镜像。以前端项目为例，工作镜像中一般会包含：特定版本的 node 环境、git、项目构建所需的其他依赖库等。有了这样的环境就可以在对应的容器中执行各部署环节。</p>
|
||
<p>构建镜像的具体内容写在 Dockerfile 文件中，例如下面的代码：</p>
|
||
<pre><code># 通过FROM指定父镜像
|
||
|
||
FROM node:12-slim
|
||
|
||
# 通过RUN命令依次在镜像中安装git，make和curl程序
|
||
|
||
RUN apt-get update
|
||
|
||
RUN apt-get -y install git
|
||
|
||
RUN apt-get install -y build-essential
|
||
|
||
RUN apt-get install -y curl
|
||
</code></pre>
|
||
<p>这是一个基本的包含 node、git 等依赖程序的部署工作环境的镜像内容。</p>
|
||
<p>然后在 Dockerfile 所在目录下执行构建命令，即可创建相应镜像，如下所示：</p>
|
||
<pre><code>docker build --network host --tag foo:bar .
|
||
</code></pre>
|
||
<h4>容器阶段</h4>
|
||
<p>容器阶段的主要目标就是基于项目的工作镜像创建执行部署过程的容器，并操作容器执行相应的各部署环节：获取代码、安装依赖、执行构建、产物打包、推送产物等。操作分为两个部分，创建容器与执行命令，如下面的代码所示：</p>
|
||
<pre><code># 创建容器
|
||
|
||
docker run -dit --name container_1 foo:bar bash
|
||
|
||
# 容器内执行命令
|
||
|
||
docker exec -it container_1 xxxx
|
||
</code></pre>
|
||
<h3>容器化部署过程的优势</h3>
|
||
<p>与传统的在单台服务器上以目录区分不同部署项目的方式相比，容器化的构建部署过程有以下优点：</p>
|
||
<h4>环境隔离</h4>
|
||
<p>每个项目在独立的容器内执行构建部署过程，保证容器与宿主环境之间，容器与容器之间的环境隔离，防止原先共用一台服务器时可能产生的互相影响（例如项目脚本中修改了全局配置或环境变量等）。同时，环境隔离还可以保证每个项目都可以自由定制专属的环境依赖，而不必担心对其他项目产生影响。</p>
|
||
<h4>多环境构建</h4>
|
||
<p>使用容器化部署，可以方便地针对同一个项目生成多套不同的构建环境，达到类似 Github Actions 中的矩阵构建效果，使项目可以同时检测多套环境下的集成过程。</p>
|
||
<h4>便于调试</h4>
|
||
<p>用户可通过 Xterm+SSH 的方式，通过浏览器访问部署系统中的容器环境。同传统的部署方式相比，用容器化的方式可以在部署遇到问题时让用户第一时间进入容器环境中进行现场调试，效率和便捷性大大提升。之前介绍过的部署工具 CircleCI 中就提供了这一调试功能。</p>
|
||
<h4>环境一致性与迁移效率</h4>
|
||
<p>由于部署过程的工作环境以 Docker 镜像的方式独立制作和存储，因此可以在支持 Docker 引擎的任意服务器中使用。使用时提供一致的工作环境，无须考虑不同服务器操作系统的差异。在迁移时也可以做到一键迁移，无须重复安装环境依赖。</p>
|
||
<h3>容器化部署过程的挑战及建议</h3>
|
||
<p>尽管容器化的部署方式有上述优势，但也面临一些问题，例如缓存方面和性能方面的问题等。</p>
|
||
<h4>缓存问题</h4>
|
||
<p>项目在独立容器中构建部署时，首先面临的就是缓存方面的问题：</p>
|
||
<ul>
|
||
<li><strong>依赖缓存</strong>：默认情况下，容器内的依赖缓存目录与宿主环境缓存目录不互通，这就导致每次依赖安装时，都无法享受宿主环境缓存带来的效率提升。同时，每次部署流程都在新容器中进行，这也导致在依赖安装的过程中，也无法读取历史依赖安装后的缓存数据。要解决这类问题，可以从两方面入手：生成容器时挂载宿主环境依赖缓存目录，以及上节课中提到的安装目录缓存。</li>
|
||
<li><strong>构建缓存</strong>：在传统的服务器中执行部署时，可以通过留存历史构建目录的方式来保留构建缓存数据。而在容器化的情况下，每次部署过程都会基于新容器环境重新执行各部署环节，构建过程的缓存数据也会随着部署结束、容器移除而消失。因此在这种部署方式中，尤其需要重视持久化缓存数据的留存问题。你同样可以考虑从两个方向解决：在宿主环境中创建构建缓存目录并挂载到容器中，并在项目构建配置中将缓存目录设置为该目录，这样就可以将缓存直接写入宿主服务器目录中。或者按照上节课提到的持久化缓存的备份与还原方案，将缓存备份到宿主服务器或远程存储服务器中，之后在新部署流程中进行还原使用。</li>
|
||
</ul>
|
||
<h4>性能问题</h4>
|
||
<p>通常情况下，与传统的服务器部署相比，容器化部署并没有明显的性能差异，但是在实践中也存在一些性能方面的特殊情况：</p>
|
||
<ul>
|
||
<li><strong>容器资源限制</strong>：在创建容器时可以通过参数来限制容器使用的 CPU 核心数和内存大小。和在普通服务器中执行部署时，完整使用所有系统资源的方式相比，限制系统资源的方式会在一定程度上导致执行过程性能的降低。在多项目使用的容器化集群方案中，这种限制通常是必要的，只是对于性能降低明显的项目而言，可以考虑在设置中分配更多的资源以提升执行效率。</li>
|
||
<li><strong>copy-to-write</strong>：性能问题的另一方面则体现在它独特的数据存储方式上。和传统的磁盘读写方式不同，容器中的数据是分层的，环境的数据来自镜像层，而新增的数据则来自写入容器层。在读取数据时，数据来自镜像层还是容器层并没有差别，但当修改数据时，如果修改或删除的是镜像层的数据，容器会先将数据从镜像层复制到容器层，然后进行相应操作。这种先复制后写入的模式称为 copy-to-write。因此，如果在容器的部署流程中涉及对镜像层数据的修改时，执行起来会比在普通服务器中的操作耗费更多时间。举个极端的例子，如果我们把项目的依赖安装过程写入构建镜像中，然后在容器内移动 node_modules 目录，会发现这个操作耗费的时间几乎等同于复制完整目录的时间。而同样的移动操作在普通服务器中几乎是瞬间完成的。因此，在使用容器化部署时，需要尽量避免将可变数据写入镜像中。</li>
|
||
</ul>
|
||
<h3>总结</h3>
|
||
<p>这节课我们首先了解了以 Docker 为代表的容器化技术的基本概念：镜像、容器、数据挂载和网络等。然后讨论了容器化的构建部署需要经历的流程，先创建镜像，然后根据镜像创建容器，最后在容器内执行相关部署环节。接着分析了容器化部署的优势和劣势：容器化部署具有隔离性高、支持多环境矩阵执行、易于调试和环境标准化等优势，同时在使用时也需要额外注意对应的缓存和性能问题。</p>
|
||
<p>本节课的思考题是：容器化技术不仅可以应用在部署过程中，还更广泛地被应用在部署后的项目服务运行中。试比较这两种场景下对容器化技术需求的差异性。</p>
|
||
<p>下节课我们将进入部署效率模块的最后一节课：如何搭建基本的前端高效部署系统。</p>
|
||
</div>
|
||
</div>
|
||
<div>
|
||
<div style="float: left">
|
||
<a href="/专栏/前端工程化精讲-完/20 流程优化：部署流程中的构建流程策略优化.md.html">上一页</a>
|
||
</div>
|
||
<div style="float: right">
|
||
<a href="/专栏/前端工程化精讲-完/22 案例分析：搭建基本的前端高效部署系统.md.html">下一页</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<a class="off-canvas-overlay" onclick="hide_canvas()"></a>
|
||
</div>
|
||
<script defer src="https://static.cloudflareinsights.com/beacon.min.js/v652eace1692a40cfa3763df669d7439c1639079717194" integrity="sha512-Gi7xpJR8tSkrpF7aordPZQlW2DLtzUlZcumS8dMQjwDHEnw9I7ZLyiOj/6tZStRBGtGgN6ceN6cMH8z7etPGlw==" data-cf-beacon='{"rayId":"709977768f363cfa","version":"2021.12.0","r":1,"token":"1f5d475227ce4f0089a7cff1ab17c0f5","si":100}' crossorigin="anonymous"></script>
|
||
</body>
|
||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
||
<script async src="https://www.googletagmanager.com/gtag/js?id=G-NPSEEVD756"></script>
|
||
<script>
|
||
window.dataLayer = window.dataLayer || [];
|
||
|
||
function gtag() {
|
||
dataLayer.push(arguments);
|
||
}
|
||
|
||
gtag('js', new Date());
|
||
gtag('config', 'G-NPSEEVD756');
|
||
var path = window.location.pathname
|
||
var cookie = getCookie("lastPath");
|
||
console.log(path)
|
||
if (path.replace("/", "") === "") {
|
||
if (cookie.replace("/", "") !== "") {
|
||
console.log(cookie)
|
||
document.getElementById("tip").innerHTML = "<a href='" + cookie + "'>跳转到上次进度</a>"
|
||
}
|
||
} else {
|
||
setCookie("lastPath", path)
|
||
}
|
||
|
||
function setCookie(cname, cvalue) {
|
||
var d = new Date();
|
||
d.setTime(d.getTime() + (180 * 24 * 60 * 60 * 1000));
|
||
var expires = "expires=" + d.toGMTString();
|
||
document.cookie = cname + "=" + cvalue + "; " + expires + ";path = /";
|
||
}
|
||
|
||
function getCookie(cname) {
|
||
var name = cname + "=";
|
||
var ca = document.cookie.split(';');
|
||
for (var i = 0; i < ca.length; i++) {
|
||
var c = ca[i].trim();
|
||
if (c.indexOf(name) === 0) return c.substring(name.length, c.length);
|
||
}
|
||
return "";
|
||
}
|
||
|
||
</script>
|
||
|
||
</html>
|