我們知道持續(xù)集成和發(fā)布（CI / CD）是時(shí)下開(kāi)發(fā)運(yùn)維界的香餑餑譬正。每一個(gè)團(tuán)地都是使用CI / CD來(lái)極大的提高開(kāi)發(fā)效率，加速項(xiàng)目的轉(zhuǎn)化和部署上線檬姥。然而還有很多開(kāi)發(fā)者還因?yàn)镃I / CD的初始比較繁瑣而望而卻步曾我。這里蟲(chóng)蟲(chóng)給實(shí)例大家介紹一個(gè)最簡(jiǎn)單的CI / CD流程，實(shí)現(xiàn)代碼編寫(xiě)編譯部署一棧式流程健民，該流程涉及免費(fèi)版的Travis CI 抒巢，Github頁(yè)面，和Scala.js秉犹，實(shí)現(xiàn)Scala.js應(yīng)用程序到Github頁(yè)面的持續(xù)部署蛉谜。
概述
Scala.js
Scala.js是一種具有良好生態(tài)系統(tǒng)，功能齊全崇堵，支持豐富的Scala To JS代碼編譯器型诚。Scala.js支持全部Scala語(yǔ)言特性，通過(guò)Scala.js鸳劳，可以實(shí)現(xiàn)從前端到完全的Scala全棧Web開(kāi)發(fā)狰贯。
特拉維斯CI
Travis CI是一種開(kāi)源的持續(xù)集成CI系統(tǒng)，和其他CI系統(tǒng)比較赏廓，Travis CI提供在SaaS云版本和GitHub項(xiàng)目可以無(wú)縫集成涵紊，構(gòu)建和測(cè)試GitHub上托管的項(xiàng)目。對(duì)Github公開(kāi)項(xiàng)目可免費(fèi)使用楚昭，直接通過(guò)Github賬號(hào)登陸和配置使用栖袋。我們只需要接收自己的GitHub帳戶，提供相關(guān)權(quán)限并根據(jù)項(xiàng)目的實(shí)際要求更新travis.yaml文件即可抚太。
環(huán)境安裝
所有環(huán)境需要Node.js和sbt，需要安預(yù)先安裝Node.js和sbt昔案，另外需要Github帳戶尿贫。
centos下一個(gè)可以可以先將khara-nodejs-epel-7.repo和bintray-sbt-rpm.repo添加到/etc/yum.repos.d，然后通過(guò)yum安裝
百勝安裝nodejs nodejs-npm sbt
項(xiàng)目實(shí)戰(zhàn)
創(chuàng)建項(xiàng)目
運(yùn)行以下命令：
sbt new scala/hello-Chongchong.g8
該命令將以“ hello-world”模板創(chuàng)建一個(gè)創(chuàng)建一個(gè)Scala項(xiàng)目踏揣。
我們也可以從頭開(kāi)始手動(dòng)創(chuàng)建Scala.js項(xiàng)目庆亡，可以執(zhí)行下面的步驟：
創(chuàng)建文件project / plugins.sbt，并通過(guò)添加以下代碼捞稿，添加Scala.js sbt插件：
addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.29")
我們要設(shè)置基本項(xiàng)目又谋，并在sbt生成文件中啟用此插件拼缝。在build.sbt中添加以下行（在項(xiàng)目根目錄中）：
enablePlugins(ScalaJSPlugin)
scalaJSUseMainModuleInitializer := true
運(yùn)行項(xiàng)目
要運(yùn)行該項(xiàng)目，立即啟動(dòng)sbt并調(diào)用運(yùn)行任務(wù)：
sbt run
結(jié)果如下：
HTML集成
為了加載和啟動(dòng)創(chuàng)建的JS彰亥，我們需要一個(gè)HTML文件來(lái)調(diào)用JS咧七。我們?cè)陧?xiàng)目的根目錄中創(chuàng)建文件夾source。將所有源文件（html任斋，圖像继阻，腳本，樣式）放在此文件夾中废酷，同時(shí)我們也手動(dòng)創(chuàng)建一個(gè)index.html文件瘟檩，內(nèi)容如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Scala.js CI實(shí)例</title>
</head>
<body>
<!-- Include Scala.js compiled code -->
<script type="text/javascript" src="js/hello-world-fastopt.js"></script>
</body></html>
創(chuàng)建Github倉(cāng)庫(kù)
在項(xiàng)目的根文件夾中添加.gitignore文件，排除以下這些文件：
*.class
*.log
.cache/
.history/
.lib/
dist/*
target/
lib_managed/
src_managed/
project/boot/
project/plugins/project/
生成倉(cāng)庫(kù)澈蟆，并推送到github
git init
git add . & git commit -m init
git push
配置Travis CI
使用github賬號(hào)授權(quán)并登陸Travis CI墨辛，選擇需要集成的一個(gè)公共倉(cāng)庫(kù)，并激活：
github倉(cāng)庫(kù)設(shè)置頁(yè)趴俘，給其選擇pages源背蟆，此處我們選擇gh-pages分支，開(kāi)啟pages
在github個(gè)人設(shè)置開(kāi)發(fā)人員設(shè)置/個(gè)人訪問(wèn)令牌哮幢，配置權(quán)限部分生成令牌带膀，復(fù)制該值。
在“環(huán)境變量”下橙垢，輸入GH_TOKEN作為名稱垛叨，替換為上面保存的令牌填充的值插入，以添加為保存它柜某。
前面我們?cè)陧?xiàng)目根目錄下創(chuàng)建源文件夾嗽元，將應(yīng)用程序的靜態(tài)文件放入其中。
為了生成靜態(tài)文件喂击，Travis CI需要將公共文件夾的內(nèi)容復(fù)制到項(xiàng)目的根目錄剂癌，并將其提交。下面我們將創(chuàng)建一個(gè)腳本deploy.sh實(shí)現(xiàn)將靜態(tài)文件移動(dòng)到公用文件夾翰绊。
if [ ! -d "public" ]; then
mkdir public
fi
cp -fr source/* public/
if [ ! -d "public/js" ]; then
mkdir public/js
fi
sbt fastOptJS
cp target/scala-*/*.js public/js/
添加并提交deploy.sh文件到倉(cāng)庫(kù)佩谷，以在Travis CI上生成.travis.yml文件，放入其添加并提交到倉(cāng)庫(kù)庫(kù)中监嗜，以使用以下內(nèi)容配置Travis CI：
language: scala
jdk: openjdk8
scala:
- 2.12.10
branches:
only:
- master
script:
- bash deploy.sh
deploy:
provider: pages
skip-cleanup: true
github-token: $GH_TOKEN
keep-history: true
on:
branch: master
local-dir: public
Travis CI會(huì)自動(dòng)編譯谐檀，部署后，成功后：
現(xiàn)在裁奇，切換到倉(cāng)庫(kù)的gh-pages分支桐猬，就可發(fā)現(xiàn)Travis機(jī)器人自動(dòng)發(fā)布生成的頁(yè)面：
我們切換到項(xiàng)目對(duì)應(yīng)的頁(yè)面，F(xiàn)12刽肠，調(diào)試模式下查看頁(yè)面的控制臺(tái)輸出：
OK溃肪，如上圖免胃，我們的Scala.js應(yīng)用程序已部署在Github Pages上了！
請(qǐng)注意惫撰，此處我們?yōu)榱朔奖愀嵘常皇歉懔藗€(gè)簡(jiǎn)單的控制臺(tái)打印hello，ChongChong润绎，一直在html頁(yè)中顯示元素撬碟，所以直接瀏覽器打開(kāi)是空白頁(yè)面，大家可以在此基礎(chǔ)上在頁(yè)面添加內(nèi)容莉撇。 scala代碼為為：
object Main extends App {
println("Hello, ChongChong!")
}
Travis CI部署了Scala.js應(yīng)用
總結(jié)
本文我們以簡(jiǎn)單的scala.js示例說(shuō)明了呢蛤，通過(guò)Travis CI在Github頁(yè)面上實(shí)現(xiàn)持續(xù)集成和部署的實(shí)例。主要介紹了Travis CI配置以及和Github倉(cāng)庫(kù)的交互棍郎，持續(xù)集成一棧式迭代發(fā)布的流程其障。
