美元符号是写前面还是后面(Gitlab-ci:从零开始的前端自动化部署)

Gitlab-ci:从零开始的前端自动化部署

关于本文

文章地址：https://zhuanlan.zhihu.com/p/184936276

目录

以gitlab-ci为例：

(1)通过在项目根目录下配置**.gitlab-ci.yml**文件，可以控制ci流程的不同阶段，例如install/检查/编译/部署服务器。gitlab平台会扫描.gitlab-ci.yml文件，并据此处理ci流程

(2)ci流程在每次团队成员「push/merge」后之后触发。每当你push/merge一次，gitlab-ci都会检查项目下有没有.gitlab-ci.yml文件，如果有，它会执行你在里面编写的脚本，并完整地走一遍从「intall=>」 「eslint检查=>编译=>部署服务器」的流程

(3)gitlab-ci提供了指定ci运行平台的机制，它提供了一个叫「gitlab-runner」的软件，只要在对应的平台(机器或docker)上下载并运行这个命令行软件，并输入从gitlab交互界面获取的token,就可以把当前机器和对应的gitlab-ci流程绑定，也即：每次跑ci都在这个平台上进行。

(4).gitlab-ci的所有流程都是可视化的，每个流程节点的状态可以在gitlab的交互界面上看到，包括执行成功或失败。如下图所示,因为它的执行看上去就和多节管道一样，所以我们通常用“pipeLine”来称呼它

(5).不同push/merge所触发的CI流程不会互相影响，也就是说，你的一次push引发的CI流程并不会因为接下来另一位同事的push而阻断，它们是互不影响的。这一个特点方便让测试同学根据不同版本进行测试。

(6)pipeline不仅能被动触发，也是可以手动触发的。

自动化部署的好处体现在几个方面

「1.提高前端的开发效率和开发测试之间的协调效率」

「Before」

如果按照传统的流程，在项目上线前的测试阶段，前端同学修复bug之后，要手动把代码部署之后。才能通知测试同学在测试环境进行测试。

这会造成几个问题：本身手动部署服务的工作是比较繁琐的，占用了开发时间。同时开发-测试之间的环节的耦合问题，则会增加团队沟通成本。

「After」

通过gitlab-ci，前端开发在提交代码之后就不用管了，ci流程会自动部署到测试或集成环境的服务器。很大程度上节约了开发的时间。

同时，因为开发和测试人员可以共用gitlab里的pipeline界面,测试同学能够随时把握代码部署的情况，同时还可以通过交互界面手动启动pipeline，自己去部署测试，从而节约和开发之间的沟通时间。

「2.从更细的粒度把握代码质量」

我们可以把eslint或其他的代码检查加到pipeline流程中，每当团队成员提交和合并一次，pipeline都会触发一次并对代码做一次全面检测，这样就从一个更细的粒度上控制代码质量了。

介绍完gitlab-ci的基本概念，接下来我将会介绍编写一个gitlab-ci用例所需要的知识。这是在实战之前的一点准备工作，主要包括三部分

首先要了解的是gitlab-ci中涉及的一些基本概念

「1.Pipeline&Job」

Pipeline是Gitlab根据项目的.gitlab-ci.yml文件执行的流程，它由许多个任务节点组成,而这些Pipeline上的每一个任务节点，都是一个独立的Job

Job在YML中的配置我们将会在下面介绍，现在需要知道的是：「每个Job都会配置一个stage属性，来表示这个Job所处的阶段。」

「一个Pipleline有若干个stage,每个stage上有至少一个Job」，如下图所示：

「2.Runner」

Runner可以理解为：「在特定机器上」根据项目的**.gitlab-ci.yml「文件，对项目执行pipeline的」程序**。Runner可以分为两种：「SpecificRunner」 和 「SharedRunner」

Gitlab-runner下载链接：https://docs.gitlab.com/runner/install/

「SharedRunner和SpecificRunner的区别」

「3.Executor」

什么是Executor？我们上面说过SpecificRunner是在我们自己选择的平台上执行的，这个平台就是我们现在说到的“Executor”，我们在特定机器上通过gitlab-runner这个命令行软件注册runner的时候，命令行就会提示我们输入相应的平台类型。可供选择的平台一共有如下几种，下面是一张它们各方面特点的比较表格

参考链接：https://docs.gitlab.com/runner/executors/#selecting-the-executor

「为了简单起见，我下面的实践部分使用的是我自己的本地Mac机器作为Executor，并且在注册时选择“Shell”作为Executor类型。」

CI流程的运行控制，决定于项目根目录下编写的配置文件—— 「.gitlab-ci.yml」，正因如此，我们需要掌握YML的基本语法规则。

YML是一种编写配置文件的语言，比JSON更为简洁和方便，因此，我们首先要掌握的就是YML文件的编写语法。

一份简单的YML文件长下面这个样子：

从这里我们就可以看出：

在基本结构上，YML和JSON也类似

如下所示：

「YML中的数组写法」

相当于JSON中的

「YML中的对象写法：」

相当于JSON中的

当然也可以是数组和对象之间形成的嵌套结构

相当于

「从JSON到YML之间的过渡学习的注意要点：」

了解了这些，对于编写一个gitlab-ci的「helloworld」已经没有问题了。

当然YML还有着比JSON更为丰富的功能，比如用”&"符号和"「stages&stage」

stages定义在YML文件的最外层，它的值是一个数组，用于定义一个pipeline不同的流程节点

例如我们定义如下:

则在Gitlab交互界面中能够看到如下展示

我们上面说过：「Job是pipeline的任务节点，它构成了pipeline的基本单元」

而stage/script/tags这三个关键字，都是作为Job的子属性来使用的,如下所示，install就是我们定义的一个Job

「stage」

是一个字符串，且是stages数组的一个子项，表示的是当前的pipeline节点。

当前stage的执行情况能在交互面板上能看的清清楚楚：

「script」

它是当前pipeline节点运行的shell脚本（以项目根目录为上下文执行）。

这个script是我们控制CI流程的核心，我们所有的工作：从安装，编译到部署都是通过script中定义的shell脚本来完成的。

如果脚本执行成功，pipeline就会进入下一个Job节点，如果执行失败那么pipeline就会终止

「tags」

tags是当前Job的标记，「这个tags关键字是很重要，因为gitlab的runner会通过tags去判断能否执行当前这个Job」

例如我们在gitlab的面板中能看到当前激活的runner的信息

上面的这个sss就是当前Runner的tags，这意味着：**这个runner只会执行tag为sss的Job。**如果一个Job没有tag或者tag不是sss,那么即使这个Runner是激活且空闲的，也不会去执行！

基本的gitlab-ci关键字就介绍结束了，有了这些知识对于编写一个gitlab-ci的”helloworld”已经足够了。对于更多的关键字的相关知识，将在文章最后再进行介绍

好，说了这么多终于到了实践的部分了，请原谅前面的啰嗦，下面我将会展示一下如何从零开始实践一个gitlab-ci的Helloworld:

「1.在平台上下载并安装Gitlab-runner命令行」

我是在Mac上跑的ci，所以下面的适用于OSX系统（如果是其他平台，可自行参考以下官方链接中的相关资料）

参考资料：https://docs.gitlab.com/runner/install/

依次运行：

备注：这个下载过程可能会很慢，你可以复制上面的链接到浏览器中翻墙下载，然后下载完毕再进行后续处理

「2.初始化gitlab-runner」

最后输出如下，说明成功了。

「3.注册Runner」

运行完gitlab-runnerstart只是完成了初始化，接下来你还要通过注册才能运行runner

参考链接：https://docs.gitlab.com/runner/register/index.html

注册runner只需要一条运行命令：

然后写入相应的token,url和tag等相关信息，就注册完毕了。

上面要求输入的Runner绑定的token和url，获取方式如下：

「4.激活Runner」

注册完了可能还需要激活，这时我们可以看下面板，如果有个黑色的感叹号，这说明runner注册成功了，但是尚未激活（「如果是绿色的说明已经激活，本步骤跳过」）

激活方法是本地运行：

输出

这时候回去看Gitlab面板里的Runner参数：

是绿色就说明激活成功了

「5.梳理和规划Pipeline的不同阶段和过程」

在编写.gitlab-ci.yml前，首先需要考虑的是我们的pipeline分几个阶段处理。

从前端工程师的角度出发，一个前端项目的PipeLine处理包括以下阶段

「install阶段」

就是执行npminstall命令,根据package.json安装node_modules依赖包

「eslint阶段」

执行eslint检查，判断代码格式是否符合规范，如果不符合则pipeline终止。

在这之前，我先通过npminstalleslint安装了eslint检查工具，然后在项目根目录下配置了.eslintrc文件。这部分可自行参考相关资料，这里暂不多赘述。

「build阶段」

编译生成生产代码，可以通过webpack之类的打包工具执行编译。当然可以通过框架提供的编译命令进行编译，例如我这个示例项目是用react-scripts脚手架搭建的，所以通过npxreact-script**uild进行编译。

「deploy阶段」

deploy也就是部署阶段，也就是把刚才bulid阶段生成的生产代码，部署到生产访问的服务器上。这里又具体有以下两部分工作要做

「A.申请服务器&安装web服务(准备工作)」

（1）我本次使用的是百度云的「云服务器」(每天9点的时候可以抢有一定免费使用期限的服务器)

（2）然后在本地终端通过ssh远程登陆服务器，并安装「apache」以提供web服务

（3）然后，安装完后的apache会在服务器下新增**/var/www/html/**目录，这个目录就是存放网站资源的位置。

（4）最后我们只需要在每次部署的时候把生产的单页面拷贝到这个页面下，就能在浏览器上通过对应的 「IP+路径」来访问Web页面了。

「B.部署资源（每次pipeline都进行）」

我下面的示例中，是通过 「scp」 这一命令，将本地机器代码远程拷贝到云服务器上。

因为这一命令需要输入密码，所以通过 「sshpass」 命令携带密码再执行scp：

这里说明一下，「Gitlab有自定义变量的功能」，例如我们觉得直接在YML中写入密码/账号等信息不太好，那么「可以通过美元符号$写入一个预定义的变量，然后在Gitlab面板上输入它」

「7.编写.gitlab-ci.yml配置文件」

回顾一下之前YML语法规则和gitlab-ci配置关键字的知识，就不难编写出以下YML文件

「package.json」如下

「8.提交项目代码」

OK！终于到最后一步了，commit然后push

可以看到运行如下

跑完后

最后输入我们部署的IP看看我们部署的网页

发现已经把我们的项目代码部署上去了

下面总结一下使用过程中遇到的典型坑点

「1.Runner未激活问题」

有时候注册之后，查看面板上的Runner信息，可能会发现Runner处在未激活状态

解决方法：

运行以下命令重新启动runner

「2.Job一直挂起，没有Runner来处理」

1.首先考虑的是不是Runner没有激活，如果没有那么按上面方式处理

2.还可能是tag没有匹配到，上面说过，Runner注册时是要填写绑定tag的，如果你在YML里面编写Job没有带上tag是不会有自定义Runner来处理。解决方法:给Job加tags

3.最后一种可能：你连续注册了多个Runner,这些Runner冲突了，或者是新注册的Runner和旧Runner使用了同一个token,这时候的解决方法如下：

「先删掉本地其他旧的Runner」

然后重置token,并使用更新后的token重新注册一个Runner

「3.specificRunner被ShareRunner抢占了Job」

有时候你可能会发现：你的Job并没有被你新建的Runner执行，而是被ShareRunner抢先执行了。你如果不想要ShareRunner，你可以在Gitlab面板上关掉

上面我们编写了gitlab-ci的**"helloworld"**。但在实际项目的运行中，.gitlab-ci.yml的编写可能会渐趋复杂。那么这个时候YML的一些其他语法功能就派上用场了，上面我们将JSON和YML的基本结构做比较并发现它们的相似之处，但实际上，「YML提供了比JSON更为丰富的功能。」

「YML的片段复用功能」

「试思考」：如果有一段配置片段会被很多Job使用，那么如果重复写入片段，则会使我们的YML文件变得过分冗长。

而如果能把这段提前进行定义，并根据别名进行导入，就能让YML文件简洁很多了。

「YML的语法天然提供了这个功能:」

「YML的模块化功能」

试思考，如果我们配置脚本很长的话，我们一定要把它写在.gitlab-ci.yml这单独一个文件里吗？

能否将它分成多个yml文件，然后把其他YML文件导入到入口YML文件(.gitlab-ci.yml)中呢。

gitlab-ci提供的include关键字便可实现这个功能,它可以用来导入外部的YML文件。

例如我们有如下的YML结构

「那么在.gitlab-ci.yml中这么写，就可以对它们做合并」

gitlab-ci还提供了extend关键字，它的功能和前面提到的YML的片段导入的功能是一样的，

不过可读性更好一些。

cache关键字是需要特别着重讲的一个关键字。顾名思义，它是用来做缓存的。

为什么要做缓存呢？当然是为了「重复运行pipeline的时候不会重复安装全部node_modules的包」，从而减少pipeline的时间，提高pipeline的性能。

「但是，这并不是cache关键字唯一的功能！」

在介绍cache的另外一个功能之前，我要先说一下gitlab-ci的一个优点“恶心人”的特点：

它在运行下一个Job的时候，会默认把前一个Job新增的资源删除得干干静静

没错，也就是说，我们上面bulid阶段编译生成的包，会在deploy阶段运行前被默认删除！（我生产包都没了我怎么部署emmmmmmm）

而cache的作用就在这里体现出来了：如果我们把bulid生产的包的路径添加到cache里面，虽然gitlab还是会删除bulid目录，但是因为在删除前我们已经重新上传了cache，并且在下个Job运行时又把cache给pull下来，那么这个时候就可以实现在下一个Job里面使用前一个Job的资源了

总而言之，cache的功能体现在两点：

虽然cache会缓存旧的包，但我们并不用担心使用到旧的资源，因为npminstall还是会如期运行，并检查package.json是否有更新，npmbuild的时候，生成的build资源包也会覆盖cache,并且在当前Job运行结束时，作为**"新的cache"**上传

这个关键字的作用是：将生成的资源作为pipeline运行成功的附件上传，并在gitlab交互界面上提供下载

例如我们新增以下YML

pipeline跑完后是这样的：

这两个关键字可使用Docker的镜像和服务运行Job，具体可参考Docker的相关资料,这里暂不多加叙述

这两个关键字后面跟的值是tag或者分支名的列表。

故名思义

值为true/false,表示当前Job是否允许允许失败。

顾名思义，指明的是当前Job的失败重试次数的上限。

但是这个值只能在0～2之间，也就是重试次数最多为2次，包括第一次运行在内，Job最多自动运行3次

配置超时时间，超过时间判定为失败

表示当前Job在何种状态下运行，它可设置为3个值

这可能是大型复杂项目下数据流的最佳实践

你要知道的NpmScript都在这里

图解React-router带你深入理解路由本质

NPM组件你应该知道的事

如何搭建一个完美的组件库？

npx，你了解吗？

一文快速入门Graphql

8个问题带你进阶React

从0实现一个脚手架

一个栗子带你上手CSS3动画

你不知道的useRef

面试官：你怎么优雅写CSS？

Typescript最佳实践

添加 peen 好友，拉你进交流划水聊天群，有看到好文章/代码都会发在群里。

如果觉得这篇文章还不错，来个【转发、收藏、在看】三连吧，让更多的人也看到~

❤️顺手点个在看呗↓

美元中有什么单位还有它们的进制是怎样的？

楼上的就会复制粘贴？自己不懂别误人子弟行吗？

美国的货币进制是二级百进制，货币单位只有美元和美分，1美元＝100美分，没有角不像中国货币是元角分三级十进制。纯手打！

美元金额的书写格式是什么

美元金额的标准书写方式为:在数额之前或者之后加上USD，也可以在数额之前加上US$，并且在美元符号和具体金额中间不能留有空格。例如:30美元可写作USD30或US$30或30USD;1250美元可写作USD1，250或US$1，250或1，250USD。

美元的符号到底是？

是$

美元,港元,欧元,日元,请写出它们的货币符号.

美元符号是USA$，港元符号是HK$，欧元符在Unicode字符集中的名称是EUROSIGN，日元符号是JPY￥。1、美元符号是USA$是UnitedStatesdollar货币缩写，是美利坚合众国的法定货币。目前流通的美元纸币是自1929年以来发行的各版...

美元是用什么做成的？

美元纸币是采用棉纤维和麻制成的。

棉纤维长使纸张不易断裂，吸墨好、不易掉色。

麻纤维结实坚韧，使纸张挺括，经久流通不起毛，对水、油及一些化学物质有一定的抵抗能力。

美元纸张中没有添加增白剂，呈本白色，在紫光灯下不反光。

自1880年起，美钞纸张内夹有红蓝纤维丝，这种纤维丝是在造纸时掺入纸浆的。

因此，纤维丝有的夹在纸中，有的浮于表面，用针尖可以把纤维丝挑出来。

1928年以前，红兰纤维丝分布在钞票的正中，由上至下狭长的一条。

1928年及以后各版，纤维丝漫布全版。

1990年起，美元纸张中（人像左侧）加入了一条被称为“迈拉”的聚酯类高分子物质制成的安全线，安全线上有美元符号及面额数字，迎光透视清晰可见。

美元正面油墨为黑色稍深，略带灰色，背面为绿色。

1934年以后各版，油墨中添加了磁物质，具有磁性真美钞采用荧光油墨和磁性油墨等专用油墨特制，故美钞正面右侧的绿色徽记和绿色号码，在白纸上用力擦拭后，纸上能留下“绿痕”。

1996年以后发行的部分美元会随光线角度不同而显示一会黑一会绿。

美元的主要图案是雕刻凹版印刷，库印及连号等为凸印。

1990年版以后，下面肖像窗周围加有缩微文字。

$这是人民币符还是美金符号啊?

$这是美金符号。“$”是美元标志的一种代表符号。提起“$”的由来，要追溯到16世纪初，当时西班牙铸造了一种名为“PESO”（比索）的银元。这种银元的图案，一面是皇冠和王徽（狮子和城堡），一面是两根柱子。根据西方神话，它们是大力士赫居里斯的柱子，代表直布罗陀海峡两岸的山峰。相传，很久以前，欧洲和非洲，彼此连接，后来被大力士赫居里斯拉开。1732年墨西哥城用机器铸造出一种“双柱银元”，其图形与“PESO”差不多。只是在两柱之间加上了东西两半球的图案，两柱上各有一条卷曲成“$$”状的图形。时间久了，人们就将“$”视作银元的记号了。时至今日，世界上还有不少的国家采用“$”作为本国货币符号，因此，有时为区别这些国家（地区）的货币（包括美国），会在“$”前加上该国（地区）的英文名称缩写，如美元（USA$），加元（CAN$），港元（HK$）。在不引起歧义的情况下可以直接写作“$”。关于这个美元标志的由来，有许多说法，其中较为普遍的有两种。一种说法认为，这个符号是将一个写得较窄的U放在一个写得较宽的S上形成的，所以它代表了美国（UnitedStates）的美元符号。另一种说法却指出，它是PS叠合写法的演变。PS是18至19世纪期间美国的一种圆形硬币比索（Pesos）的缩写，这种硬币在1974年美国正式建立造币厂以前一直在全国通用。后来美国**认可了$这个符号作为新货币的一个单位，即一美元。在书写时，$要摆在数字前面。如1美元应写成$1，50美元写成$50。扩展资料：美国发行了新版钞票，比旧版钞票加入了多项先进的防伪功能。可以从以下几个方面进行鉴别：（1）雕刻凹版印刷美元正背面的人像、建筑、边框及面额数字等均采用雕刻凹版印刷，用手触摸有明显的凹凸感。1996年之后美元的人像加大，形象也更生动。（2）全埋式安全线从1990年版起，5美元至100美元各面额纸币中加入了一条全埋文字安全线。安全线上印有“USA”及***或英文单词面额数字字样。1996年版50、20美元安全线上还增加了美国国旗图案。1996年版美元的安全线还是荧光安全线，在紫外光下呈现出不同的颜色，100、50、20、10、5美元安全线分别为红、黄、绿、棕和蓝色。垂直位于肖像右边纸张内镶嵌着的一条安全线（塑料条），迎光可见连续的“USA50”字样和一面小旗，紫光灯下安全线有黄色荧光。（3）固定头像水印1996年版美元纸张加入了与票面人物头像图案相同的固定水印，但是1、2美元没有水印。（4）光变面额数字1996年版100、50、20、10美元正面右下角面额数字是用光变油墨凹版印刷的，在与票面垂直角度观察时呈绿色，将钞票倾斜一定角度则变为蓝色。2006年版50、20、10美元正面右下角面额数字是用光变油墨凹版印刷的，在与票面垂直角度观察时呈金色，将钞票倾斜一定角度则变为绿色。参考资料来源：百度百科—美元

货币的符号是放在数字前面还是后面

¥”符号，既可防止在金额前填加数字，又可表明是人民币的金额数量。由于“¥”本身表示人民币的单位“元”，所以，凡是在金额前加了“¥”符号的，金额后就不需要再加“元”字。

US＄是什么意思

美元符号＄的来历○李忠东大家都知道，＄表示美元。那么它是怎样来的呢？关于这个符号的来历，有许多说法，其中较为普遍的有两种。一种说法认为，这个符号是将一个写得较窄的u放在一个写得较宽的s上形成的，所以它代表了美国（unitedstates）。另一种说法却指出，它是ps叠合写法的演变。ps是18至19世纪期间美国的一种圆形硬币比索（pesos）的缩写，这种硬币在1974年美国正式建立造币厂以前一直在全国通用。后来美国**认可了＄这个符号作为新货币的一个单位，即一美元。在书写时，＄要摆在数字前面。如1美元应写成＄1，50美元写成＄50。需要说明的是，看到＄，不要以为一定就是美元。在其它一些国家和地区，货币的名称也会使用＄。为了区别起见，美元、加拿大元、澳大利亚元、新西兰元、新加坡元、香港元分别用us＄、can＄、a＄、nz＄、s＄和hk＄表示。(李忠东《中国中学生报》第1156期)发表评论

美元符号怎么写

＄——美元符号