符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
小编给大家分享一下如何使用CircleCI对Firebase托管进行角度连续部署,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
我们提供的服务有:成都做网站、成都网站设计、微信公众号开发、网站优化、网站认证、连城ssl等。为近1000家企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务,是有科学管理、有技术的连城网站制作公司
您是否正在使用Angular,React,Vue等前端应用程序。进行生产部署是最无聊的部分。因为我们需要执行许多手动步骤来执行npm install,ng test,build等。这篇文章将解释如何使用CircleCI管道自动执行所有这些步骤。只需将您的更改推送到GitHub存储库,CircleCi就会注意一切。
创建一个Angular Application使用最新的nodeJS全局
安装@ angular / cli。
$ ng new angular-circleci-firebase
选择以下选项
?您想添加Angular路由吗? 对
吗?您想使用哪种样式表格式?
CSS
❯SCSS [http://sass-lang.com]
SASS [http://sass-lang.com]
LESS [http://lesscss.org]
的Stylus [http://stylus-lang.com]
视频教程
目前与GIT合作 GitHub和Bitbucket正在为免费帐户提供私人存储库。使用以下步骤创建新存储库。
创建一个新的存储库
回到代码
$ 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
提交您的项目文件
GitHub漏洞通知
Git将显示package.json漏洞的通知。
NPM Audit Fix
这将使用最新版本更新项目包文件。
$ npm audit fix
modified:package-lock.json
modified:package.json
提交审核更改
$ git add。
$ git commit -m“ Audit Fix Change ”
$ git push
部署到Firebase
首先,您需要在Google Firebase中创建项目,转到Google Firebase控制台并设置项目。
安装Firebase
工具全局安装Firebase工具。
$ sudo npm install -g firebase-tools
配置Firebase
现在使用您的Google帐户登录Firebase。此命令将重定向到Google帐户登录页面。
$ firebase登录
?允许Firebase收集匿名CLI使用信息?否请
在任何设备上访问此网址以登录:
https:
//accounts.google.com/o/oauth3/auth?
client_id = xxxxxxxxxxxxxx等待身份验证... ✔成功!以youremail@gmail.com 登录
初始化Firebase
转到angular2项目文件夹并执行以下命令。
$ firebase init
单击向下箭头选择您的firebase项目。如果不是只选择选择默认项目。
选择主机
设置分发文件夹
默认发布目录为“public”,将其替换为“dist”
?你想用什么作为你的公共目录?分散
?配置为单页应用程序(重写所有URL到/index.html)?是的
✔写DIST / index.html的
我写的配置信息,以firebase.json ...
我写的项目信息.firebaserc ...
✔火力地堡初始化完成!
此过程将创建.firebaserc初始化文件。
修改项目代码。您可以在Firbase控制台中找到它。
Production Build
angular.json
转到项目并将outputPath值修改为dist。
“ outputPath ”:“ dist / your-project-name ”
改为
“ outputPath ”:“ dist ”,
使用此命令构建最终构建,这将生成包含所有必需包的dist文件夹。
$ ng build -prod
Firebase Push
$ firebase 部署
让我们配置CircleCI
Circle登录
使用GitHub或BitBucket帐户创建一个免费帐户。
添加项目
CircleCI将导入所有GitHub / Bitbucket项目。单击“ 设置项目”按钮。
选择Enviroment
选择Linux作为使用Node语言的操作系统。
管道配置说明
您必须使用config.yml管道阶段文件创建.circleci文件夹。
创建config.yml
创建一个文件夹
Angular项目的CircleCI config.yml
您可以使用-run添加多个阶段。这里npm install和npm run build是重要的命令,忽略了这个演示的单元测试。
版本:2
工作:
构建:
码头工人:
- 图像: ' circleci / node:8 '
working_directory : 〜/ repo
步骤:
- 结账
- restore_cache :
钥匙:
- ' v1-dependencies - {{checksum“package.json”}} '
- v1-dependencies-
- 运行: ' npm install '
- save_cache :
路径:
- node_modules
key : ' v1-dependencies - {{checksum“package.json”}} '
- 运行:
名称: ' 建设项目'
命令: ' npm run build '
- 运行:
名称: ' 部署到Firebase托管'
命令:' 。/ node_modules / .bin / firebase deploy --token = $ FIREBASE_TOKEN
点击“ 开始构建”按钮时失败的管道失败。因为访问firebase的步骤很少。
生成Firebase令牌
转到项目文件夹并执行firbase login:ci。这会将您带到浏览器进行Google身份验证,并重定向回使用Firebase令牌。
CircleCI环境变量
选择项目并单击右上角的设置(齿轮)图标。您将找到Enviroment Variable的选项。
添加环境变量的Firbase
创建的名称的变量FIREBASE_TOKEN,这是在config.yml命令用于火力地堡部署。这是Firbase外部访问所必需的。
将Firebase工具添加为Dev Dependency
转到项目文件夹并执行以下命令以更新package.json。CircleCI将使用此firebase工具库进行部署。
$ npm install -save-dev firebase-tools
提交您的更改
$ git add。
$ git commit -m“CircleCi yml文件”
$ git push
构建成功
一旦GitHub推送发生,管道会自动开始在Firebase托管上部署更改的步骤。现在您将找到成功的构建。
为Master Branch构建
如果您正在使用多个分支。尽量忽略开发分支。
config.yml
包含分支并仅使用master分支来构建部署管道。
版本:2
工作:
构建:
分支:
只:
- 主人
忽略:
- 开发
码头工人:
- 图像: ' circleci / node:8 '
working_directory : 〜/ repo
步骤:
- 结账
- restore_cache :
钥匙:
- ' v1-dependencies - {{checksum“package.json”}} '
- v1-dependencies-
- 运行: ' npm install '
- save_cache :
路径:
- node_modules
key : ' v1-dependencies - {{checksum“package.json”}} '
- 运行:
名称: ' 建设项目'
命令: ' npm run build '
- 运行:
名称: ' 部署到Firebase托管'
命令: ' 。/ node_modules / .bin / firebase deploy --token = $ FIREBASE_TOKEN '
Firbase Custom Domain
Start Hosting
转到Firbase控制台并导航Develop - > Hosting
连接域
添加域并继续。
修改A记录
在域DNS设置中使用这些A记录值。
以上是“如何使用CircleCI对Firebase托管进行角度连续部署”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!