從零開始持續集成交付:Travis CI部署Scala.js Web應用

我們知道持續集成和發布(CI / CD)是時下開發運維界的香餑餑。每一個團地都是使用CI / CD來極大的提高開發效率,加速項目的轉化和部署上線。然而還有很多開發者還因為CI / CD的初始比較繁瑣而望而卻步。這里蟲蟲給實例大家介紹一個最簡單的CI / CD流程,實現代碼編寫編譯部署一棧式流程,該流程涉及免費版的Travis CI ,Github頁面,和Scala.js,實現Scala.js應用程序到Github頁面的持續部署。

概述

Scala.js

Scala.js是一種具有良好生態系統,功能齊全,支持豐富的Scala To JS代碼編譯器。Scala.js支持全部Scala語言特性,通過Scala.js,可以實現從前端到完全的Scala全棧Web開發。

特拉維斯CI

Travis CI是一種開源的持續集成CI系統,和其他CI系統比較,Travis CI提供在SaaS云版本和GitHub項目可以無縫集成,構建和測試GitHub上托管的項目。對Github公開項目可免費使用,直接通過Github賬號登陸和配置使用。我們只需要接收自己的GitHub帳戶,提供相關權限并根據項目的實際要求更新travis.yaml文件即可。

環境安裝

所有環境需要Node.js和sbt,需要安預先安裝Node.js和sbt,另外需要Github帳戶。

centos下一個可以可以先將khara-nodejs-epel-7.repo和bintray-sbt-rpm.repo添加到/etc/yum.repos.d,然后通過yum安裝

百勝安裝nodejs nodejs-npm sbt

項目實戰

創建項目

運行以下命令:

sbt new scala/hello-Chongchong.g8

該命令將以“ hello-world”模板創建一個創建一個Scala項目。

我們也可以從頭開始手動創建Scala.js項目,可以執行下面的步驟:

創建文件project / plugins.sbt,并通過添加以下代碼,添加Scala.js sbt插件:

addSbtPlugin("org.scala-js" % "sbt-scalajs" % "0.6.29")

我們要設置基本項目,并在sbt生成文件中啟用此插件。在build.sbt中添加以下行(在項目根目錄中):

enablePlugins(ScalaJSPlugin)
scalaJSUseMainModuleInitializer := true

運行項目

要運行該項目,立即啟動sbt并調用運行任務:

sbt run 

結果如下:

HTML集成

為了加載和啟動創建的JS,我們需要一個HTML文件來調用JS。我們在項目的根目錄中創建文件夾source。將所有源文件(html,圖像,腳本,樣式)放在此文件夾中,同時我們也手動創建一個index.html文件,內容如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Scala.js CI實例</title>
</head>
<body>
    <!-- Include Scala.js compiled code -->
    <script type="text/javascript" src="js/hello-world-fastopt.js"></script>
</body></html>

創建Github倉庫

在項目的根文件夾中添加.gitignore文件,排除以下這些文件:

*.class
*.log
.cache/
.history/
.lib/
dist/*
target/
lib_managed/
src_managed/
project/boot/
project/plugins/project/

生成倉庫,并推送到github

git init 
git add . & git commit -m init
git push 

配置Travis CI

使用github賬號授權并登陸Travis CI,選擇需要集成的一個公共倉庫,并激活:

github倉庫設置頁,給其選擇pages源,此處我們選擇gh-pages分支,開啟pages

在github個人設置開發人員設置/個人訪問令牌,配置權限部分生成令牌,復制該值。

在“環境變量”下,輸入GH_TOKEN作為名稱,替換為上面保存的令牌填充的值插入,以添加為保存它。

前面我們在項目根目錄下創建源文件夾,將應用程序的靜態文件放入其中。

為了生成靜態文件,Travis CI需要將公共文件夾的內容復制到項目的根目錄,并將其提交。下面我們將創建一個腳本deploy.sh實現將靜態文件移動到公用文件夾。

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文件到倉庫,以在Travis CI上生成.travis.yml文件,放入其添加并提交到倉庫庫中,以使用以下內容配置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會自動編譯,部署后,成功后:

現在,切換到倉庫的gh-pages分支,就可發現Travis機器人自動發布生成的頁面:

我們切換到項目對應的頁面,F12,調試模式下查看頁面的控制臺輸出:

OK,如上圖,我們的Scala.js應用程序已部署在Github Pages上了!

請注意,此處我們為了方便,只是搞了個簡單的控制臺打印hello,ChongChong,一直在html頁中顯示元素,所以直接瀏覽器打開是空白頁面,大家可以在此基礎上在頁面添加內容。 scala代碼為為:

object Main extends App {
  println("Hello, ChongChong!")
}

Travis CI部署了Scala.js應用

總結

本文我們以簡單的scala.js示例說明了,通過Travis CI在Github頁面上實現持續集成和部署的實例。主要介紹了Travis CI配置以及和Github倉庫的交互,持續集成一棧式迭代發布的流程。

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容