如何使用CircleCI對(duì)Firebase托管進(jìn)行角度連續(xù)部署

小編給大家分享一下如何使用CircleCI對(duì)Firebase托管進(jìn)行角度連續(xù)部署，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

您是否正在使用Angular，React，Vue等前端應(yīng)用程序。進(jìn)行生產(chǎn)部署是最無(wú)聊的部分。因?yàn)槲覀冃枰獔?zhí)行許多手動(dòng)步驟來(lái)執(zhí)行npm install，ng test，build等。這篇文章將解釋如何使用CircleCI管道自動(dòng)執(zhí)行所有這些步驟。只需將您的更改推送到GitHub存儲(chǔ)庫(kù)，CircleCi就會(huì)注意一切。

創(chuàng)建一個(gè)Angular Application使用最新的nodeJS全局

安裝@ angular / cli。

$ ng new angular-circleci-firebase

選擇以下選項(xiàng)

？您想添加Angular路由嗎？ 對(duì)
嗎？您想使用哪種樣式表格式？
CSS 
?SCSS [http://sass-lang.com]
SASS [http://sass-lang.com] 
LESS [http://lesscss.org] 
的Stylus [http://stylus-lang.com]

視頻教程
目前與GIT合作 GitHub和Bitbucket正在為免費(fèi)帳戶提供私人存儲(chǔ)庫(kù)。使用以下步驟創(chuàng)建新存儲(chǔ)庫(kù)。

創(chuàng)建一個(gè)新的存儲(chǔ)庫(kù)

回到代碼

$ cd your-project-folder 
$ git init
$ git  add。
$ git  commit -m“ first commit ” 
$ git  remote add origin https://github.com/username/your-repository-name.git 
$ git  push -u origin master

提交您的項(xiàng)目文件

GitHub漏洞通知
Git將顯示package.json漏洞的通知。

NPM Audit Fix
這將使用最新版本更新項(xiàng)目包文件。

$ npm audit fix 

modified：package-lock.json 
modified：package.json

提交審核更改

$ git add。
$ git  commit -m“ Audit Fix Change ” 
$ git  push

部署到Firebase
首先，您需要在Google Firebase中創(chuàng)建項(xiàng)目，轉(zhuǎn)到Google Firebase控制臺(tái)并設(shè)置項(xiàng)目。

安裝Firebase
工具全局安裝Firebase工具。

$ sudo npm install -g firebase-tools

配置Firebase
現(xiàn)在使用您的Google帳戶登錄Firebase。此命令將重定向到Google帳戶登錄頁(yè)面。

$ firebase登錄

？允許Firebase收集匿名CLI使用信息？否請(qǐng)

在任何設(shè)備上訪問(wèn)此網(wǎng)址以登錄：
https：

//accounts.google.com/o/oauth3/auth？

client_id = xxxxxxxxxxxxxx等待身份驗(yàn)證... ?成功！以youremail@gmail.com 登錄

初始化Firebase
轉(zhuǎn)到angular2項(xiàng)目文件夾并執(zhí)行以下命令。

$  firebase  init

單擊向下箭頭選擇您的firebase項(xiàng)目。如果不是只選擇選擇默認(rèn)項(xiàng)目。

選擇主機(jī)

設(shè)置分發(fā)文件夾
默認(rèn)發(fā)布目錄為“public”，將其替換為“dist”

？你想用什么作為你的公共目錄？分散
？配置為單頁(yè)應(yīng)用程序（重寫所有URL到/index.html）？是的
?寫DIST / index.html的

我寫的配置信息，以firebase.json ... 
我寫的項(xiàng)目信息.firebaserc ... 

?火力地堡初始化完成！

此過(guò)程將創(chuàng)建.firebaserc初始化文件。

修改項(xiàng)目代碼。您可以在Firbase控制臺(tái)中找到它。

Production Build 

angular.json
轉(zhuǎn)到項(xiàng)目并將outputPath值修改為dist。

“ outputPath ”：“ dist / your-project-name ” 

改為

“ outputPath ”：“ dist ”，

使用此命令構(gòu)建最終構(gòu)建，這將生成包含所有必需包的dist文件夾。

$ ng build -prod

Firebase Push

$ firebase 部署

讓我們配置CircleCI 

Circle登錄
使用GitHub或BitBucket帳戶創(chuàng)建一個(gè)免費(fèi)帳戶。

添加項(xiàng)目
CircleCI將導(dǎo)入所有GitHub / Bitbucket項(xiàng)目。單擊“ 設(shè)置項(xiàng)目”按鈕。

選擇Enviroment
選擇Linux作為使用Node語(yǔ)言的操作系統(tǒng)。

管道配置說(shuō)明
您必須使用config.yml管道階段文件創(chuàng)建.circleci文件夾。

創(chuàng)建config.yml
創(chuàng)建一個(gè)文件夾

Angular項(xiàng)目的CircleCI config.yml
您可以使用-run添加多個(gè)階段。這里npm install和npm run build是重要的命令，忽略了這個(gè)演示的單元測(cè)試。

版本：2

工作：

構(gòu)建：

碼頭工人：

- 圖像： ' circleci / node：8 '

working_directory ： ?/ repo

步驟：

- 結(jié)賬

- restore_cache ：

鑰匙：

- ' v1-dependencies - {{checksum“package.json”}} '

- v1-dependencies-

- 運(yùn)行： ' npm install '

- save_cache ：

路徑：

- node_modules

key ： ' v1-dependencies - {{checksum“package.json”}} '

- 運(yùn)行：

名稱： ' 建設(shè)項(xiàng)目'

命令： ' npm run build '

- 運(yùn)行：

名稱： ' 部署到Firebase托管'

命令：' 。/ node_modules / .bin / firebase deploy --token = $ FIREBASE_TOKEN

點(diǎn)擊“ 開(kāi)始構(gòu)建”按鈕時(shí)失敗的管道失敗。因?yàn)樵L問(wèn)firebase的步驟很少。

生成Firebase令牌
轉(zhuǎn)到項(xiàng)目文件夾并執(zhí)行firbase login：ci。這會(huì)將您帶到瀏覽器進(jìn)行Google身份驗(yàn)證，并重定向回使用Firebase令牌。

CircleCI環(huán)境變量
選擇項(xiàng)目并單擊右上角的設(shè)置（齒輪）圖標(biāo)。您將找到Enviroment Variable的選項(xiàng)。

添加環(huán)境變量的Firbase
創(chuàng)建的名稱的變量FIREBASE_TOKEN，這是在config.yml命令用于火力地堡部署。這是Firbase外部訪問(wèn)所必需的。

將Firebase工具添加為Dev Dependency
轉(zhuǎn)到項(xiàng)目文件夾并執(zhí)行以下命令以更新package.json。CircleCI將使用此firebase工具庫(kù)進(jìn)行部署。

$ npm install -save-dev firebase-tools

提交您的更改

$ git add。
$ git commit -m“CircleCi yml文件” 
$ git push

構(gòu)建成功
一旦GitHub推送發(fā)生，管道會(huì)自動(dòng)開(kāi)始在Firebase托管上部署更改的步驟?，F(xiàn)在您將找到成功的構(gòu)建。

為Master Branch構(gòu)建
如果您正在使用多個(gè)分支。盡量忽略開(kāi)發(fā)分支。

config.yml
包含分支并僅使用master分支來(lái)構(gòu)建部署管道。

版本：2

工作：

構(gòu)建：

分支：

只：

- 主人

忽略：

- 開(kāi)發(fā)

碼頭工人：

- 圖像： ' circleci / node：8 '

working_directory ： ?/ repo

步驟：

- 結(jié)賬

- restore_cache ：

鑰匙：

- ' v1-dependencies - {{checksum“package.json”}} '

- v1-dependencies-

- 運(yùn)行： ' npm install '

- save_cache ：

路徑：

- node_modules

key ： ' v1-dependencies - {{checksum“package.json”}} '

- 運(yùn)行：

名稱： ' 建設(shè)項(xiàng)目'

命令： ' npm run build '

- 運(yùn)行：

名稱： ' 部署到Firebase托管'

命令： ' 。/ node_modules / .bin / firebase deploy --token = $ FIREBASE_TOKEN '

Firbase Custom Domain 

Start Hosting
轉(zhuǎn)到Firbase控制臺(tái)并導(dǎo)航Develop - > Hosting

連接域
添加域并繼續(xù)。

修改A記錄
在域DNS設(shè)置中使用這些A記錄值。

以上是“如何使用CircleCI對(duì)Firebase托管進(jìn)行角度連續(xù)部署”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！