(一)Docker + Nginx + Jenkins 部署 React

Jenkins 持續(xù)集成

另一篇文章介紹了 如何使用 Jenkins 部署 SpringBoot Jar

https://github.com/luokaiii/luokaiii.jenkins

一、下載并啟動Jenkins

Jenkins 官網(wǎng)下載所需的版本刹悴,這里使用 Docker 容器部署 Jenkins war(你也可以直接使用 java -jar jenkins.war -httpPort=8080 來啟動行楞,這樣的話直接進(jìn)入 [填寫密碼(錨點)](#1. 填寫密碼) 即可。)土匀。

注意:我們并沒有使用 hub.docker.com 中提供的 jenkins/jenkins 這個鏡像子房。因為我試了一下沒裝成功,哈哈就轧。

在 war 包的同級目錄下证杭,編寫 Dockerfile,如下:

FROM openjdk:8
VOLUME /tmp
COPY jenkins.war app.war
ENTRYPOINT ["java","-jar","app.war","--httpPort=8080"]

構(gòu)建 jenkins 鏡像

#使用Dockerfile構(gòu)建jenkins鏡像
docker build -t luokaiii.jenkins .

編寫 jenkins 啟動腳本妒御, start.sh:

docker run \
  --name luokaiii.jenkins \
  -p 8080:8080 \
  -p 50000:50000 \
  -v jenkins_home:/var/jenkins_home \
  -d luokaiii.jenkins

注意:1. 需要給 start.sh 文件授權(quán)解愤,否則無法執(zhí)行;2. 通過 -v 命令將jenkins文件掛載到本地乎莉;

二送讲、環(huán)境初始化

1. 填寫密碼

運行上面寫的 start.sh 啟動腳本,并打開 localhost:8080梦鉴,稍等片刻就會提示我們輸入初始密碼李茫。

進(jìn)入 jenkins 容器,docker exec -it luokaiii.jenkins bash (如果提示有誤肥橙,則可以使用 container 的 id 來進(jìn)入)魄宏,找到位于 /root/.jenkins/secrets/initialAdminPassword 的密碼并填寫進(jìn)入。

2. 安裝插件

密碼輸入成功后存筏,會提示我們選擇需要安裝的插件宠互,這里我選擇的是社區(qū)推薦插件味榛。對于新入門的用戶來說,推薦的往往夠用了予跌。

[站外圖片上傳中...(image-c1bb9c-1564998203331)]

在插件安裝完成之后搏色,我們需要加入以下額外的插件:

  1. Publish Over SSH // 向服務(wù)器發(fā)送文件
  2. SSH // 需要 SSH 來連接服務(wù)器
  3. Config File Provider
  4. NodeJS // 因為我們的測試項目是使用 react 寫的一個模擬項目,因此需要NodeJS 與 npm 進(jìn)行編譯

添加插件的目錄為:Manage Jenkins > Manage Plugins > 可選插件

3. 新建一個管理員賬戶

創(chuàng)建賬戶

ok券册,安裝成功频轿,進(jìn)入我們的正題。

歡迎來到 Jenkins

三烁焙、使用 SSH 登錄服務(wù)器

配置 SSH Key 有兩種方式航邢,一種是在本地生成,然后將公鑰發(fā)送至服務(wù)器骄蝇;另一種是在服務(wù)器生成膳殷,將私鑰拷貝至本地。(好像沒啥區(qū)別啊)

1. 在本地電腦生成 SSH

  1. 打開命令行九火,生成ssh-key:ssh-keygen -t rsa
  2. 將ssh-key 發(fā)送至服務(wù)器:ssh-copy-id -i ~/.ssh/id_rsa.pub root@xxx.xxx.xxx.xxx
  3. 輸入服務(wù)器密碼赚窃,即可上傳成功
  4. 驗證登錄:ssh root@xxx.xxx.xxx.xxx -i id_rsa
  5. 輸入私鑰的 password 即可

2. 服務(wù)器端生成 SSH

  1. 使用密碼登錄遠(yuǎn)程服務(wù)器
  2. 執(zhí)行命令 ssh-keygen ,輸入文件地址岔激、密碼等信息勒极,如名為 ssh_rsa
  3. 將 生成的私鑰拷貝出來,放到需要連接的電腦上(可以新建文件鹦倚,把 ssh_rsa 的內(nèi)容拷貝進(jìn)去)
  4. 重設(shè)本地文件的權(quán)限 chmod 0600 ssh_rsa
  5. 開啟 SSH Key 登錄
    1. 在遠(yuǎn)程服務(wù)器中找到 /etc/ssh/sshd_config
    2. 將以下兩個參數(shù)設(shè)置為 on(默認(rèn)為on)
      1. RSAAuthentication on
      2. PubkeyAuthentication on
  6. 關(guān)閉 密碼 登錄(可選河质,前提是你要確保之前的私鑰備份好了冀惭,不然可就無法登陸了)
    1. 將 PasswordAuthentication 改為 no
  7. 測試使用 SSH Key 登錄服務(wù)器
    1. ssh root@xxx.xxx.xxx.xxx -p port -i ~/.ssh/id_rsa
    2. xxx.xxx.xxx.xxx 為服務(wù)器 ip 地址
    3. port 為服務(wù)器登錄端口
    4. ~/.ssh/id_rsa 為本地私鑰地址

四震叙、配置SSH

進(jìn)入 Manage Jenkins > Configure System,并作出以下兩個修改:

1. SSH remote hosts

配置遠(yuǎn)程服務(wù)器

[站外圖片上傳中...(image-97835c-1564998203331)]

2.Publish over SSH

配置推送文件時的服務(wù)器配置散休,使用 ssh key

[圖片上傳失敗...(image-f6b23c-1564998203331)]

五媒楼、配置完整的任務(wù)

新建一個 Freestyle project

手動狗頭

設(shè)置源碼倉庫地址,并添加用戶名密碼戚丸、或 SSHKey 的憑證

[圖片上傳失敗...(image-1bb05d-1564998203331)]

構(gòu)建前的環(huán)境配置划址,指定服務(wù)器地址、#NodeJS版本

構(gòu)建環(huán)境

執(zhí)行構(gòu)建限府,并打印 Node 與 NPM 的版本夺颤,來確定是否安裝成功;指定 npm 倉庫為taobao鏡像胁勺,并進(jìn)行編譯(react 編譯后的文件放在 /build 下世澜,其他語言參照各自特性而定)

構(gòu)建

構(gòu)建完成后,就是把生成的 build 目錄發(fā)送至服務(wù)器指定目錄了署穗。如果您使用了 nginx 作了靜態(tài)代理寥裂,則只需將 build 后的文件發(fā)送至該目錄即可嵌洼。

[圖片上傳失敗...(image-147d76-1564998203331)]

六、測試是否正確安裝及配置

1. 隨便修改點文件封恰,提交至github上

2. 點擊立即構(gòu)建

立即構(gòu)建

3. 打開控制臺輸出麻养,查看日志

不出意外的話,控制臺中會依次打印出一下日志(日志太長诺舔,這里就不貼了鳖昌,仔細(xì)看一下應(yīng)該都很好理解,也不是什么比較難的單詞)

  1. git fetch --tags .... // 從遠(yuǎn)程拉取代碼
  2. node -v 低飒; npm -v // 打印的node版本
  3. npm install --registry... // 修改npm 鏡像源
  4. npm run build // 開始構(gòu)建
  5. [SSH] executing post build script // 連接并上傳build目錄

4. 重新訪問項目地址

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末遗遵,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子逸嘀,更是在濱河造成了極大的恐慌车要,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,311評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件崭倘,死亡現(xiàn)場離奇詭異翼岁,居然都是意外死亡,警方通過查閱死者的電腦和手機司光,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,339評論 2 382
  • 文/潘曉璐 我一進(jìn)店門琅坡,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人残家,你說我怎么就攤上這事榆俺。” “怎么了坞淮?”我有些...
    開封第一講書人閱讀 152,671評論 0 342
  • 文/不壞的土叔 我叫張陵茴晋,是天一觀的道長。 經(jīng)常有香客問我回窘,道長诺擅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,252評論 1 279
  • 正文 為了忘掉前任啡直,我火速辦了婚禮烁涌,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘酒觅。我一直安慰自己撮执,他們只是感情好舷丹,可當(dāng)我...
    茶點故事閱讀 64,253評論 5 371
  • 文/花漫 我一把揭開白布抒钱。 她就那樣靜靜地躺著,像睡著了一般继效。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上瑞信,一...
    開封第一講書人閱讀 49,031評論 1 285
  • 那天厉颤,我揣著相機與錄音,去河邊找鬼凡简。 笑死,一個胖子當(dāng)著我的面吹牛秤涩,可吹牛的內(nèi)容都是我干的帜乞。 我是一名探鬼主播筐眷,決...
    沈念sama閱讀 38,340評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼黎烈,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了匀谣?” 一聲冷哼從身側(cè)響起照棋,我...
    開封第一講書人閱讀 36,973評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎烈炭,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體符隙,經(jīng)...
    沈念sama閱讀 43,466評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,937評論 2 323
  • 正文 我和宋清朗相戀三年霹疫,在試婚紗的時候發(fā)現(xiàn)自己被綠了露久。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片更米。...
    茶點故事閱讀 38,039評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡毫痕,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出消请,到底是詐尸還是另有隱情,我是刑警寧澤臊泰,帶...
    沈念sama閱讀 33,701評論 4 323
  • 正文 年R本政府宣布蚜枢,位于F島的核電站缸逃,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏需频。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,254評論 3 307
  • 文/蒙蒙 一昭殉、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧挪丢,春花似錦、人聲如沸乾蓬。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,259評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至族奢,卻和暖如春姥闭,著一層夾襖步出監(jiān)牢的瞬間越走,已是汗流浹背棚品。 一陣腳步聲響...
    開封第一講書人閱讀 31,485評論 1 262
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留廊敌,地道東北人铜跑。 一個月前我還...
    沈念sama閱讀 45,497評論 2 354
  • 正文 我出身青樓,卻偏偏與公主長得像骡澈,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子肋殴,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,786評論 2 345