使用Angular、TravisCI和Firebase托管进行持续部署

Angular 允许我们构建可以部署到移动、Web 和桌面的高性能 Web 应用程序。 Firebase Hosting 是一种流行的服务，可以通过 CLI 工具轻松使用。在本文中，我们将使用 Travis CI 自动执行此部署。

新的 Angular 应用程序

使用 Angular CLI 创建一个新的 Angular 项目以建立一个公共基础：

# Install the Angular CLI
$ npm i @angular/cli -g

# Create a new Angular project with the name of your choosing && change directory
$ ng new AngularFirebaseCI

> N
> SCSS

$ cd AngularFirebaseCI

# Open this up in VS Code and Serve
$ code . && ng serve

我们现在可以创建一个基本的 Angular 项目。前往 app.component.html 并创建以下模板：

<section>
  <article>
    <h1>Angular, Travis CI & Firebase Hosting</h1>
    <p>🔥🔥🔥</p>
  </article>
</section>

我们还可以在 app.component.scss 内部添加一些 CSS 样式以使其更加神奇：

section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background: #8a2387;
  background: -webkit-linear-gradient(to right, #f27121, #e94057, #8a2387); 
  background: linear-gradient(
    to right,
    #f27121,
    #e94057,
    #8a2387
  );
}

article {
  text-align: center;
  color: white;
  padding: 40px;
  box-shadow: 1px 1px 200px rgba(0, 0, 0, 0.8);
}

最后，在全局 styles.scss 内部，让我们默认 html 和 body 样式：

html,
body {
  padding: 0px;
  margin: 0px;
}

Firebase 托管

我们流程的第一步是启动并运行 Firebase 托管。前往 Firebase Hosting 并创建一个新项目：

Firebase 工具命令行界面

我们可以通过在终端中运行以下命令来全局安装 firebase-tools CLI：

$ npm install -g firebase-tools

安装后，运行以下命令登录到 CLI：

$ firebase login

现在我们已通过身份验证，我们可以在项目内部初始化 Firebase。

$ firebase init

> Hosting

? Select a default Firebase project for this directory
your-firebase-id

? What do you want to use as your public directory? 
dist/

? Configure as a single-page app (rewrite all urls to /index.html)?
Yes

甜的。我们现在已准备好将我们的应用程序部署到 Firebase！让我们使用 Angular CLI 为生产环境构建它：

$ ng build --prod

这会生成一个 dist 文件夹，其中包含我们所有的文件。将其部署到firebase：

$ firebase deploy

如果您收到类似于以下的消息，则一切顺利：

✔  Deploy complete!

Project Console: https://console.firebase.google.com/project/your-app/overview
Hosting URL: https://your-app.firebaseapp.com

Travis CI 自动化

每次都必须手动执行此操作并不好。当然，这只有两个命令，但是如果我们有多个团队成员怎么办？另外，我不想考虑部署，我想写更多的代码！

首先，前往 https://travis-ci.com/ 并使用您的 GitHub 帐户登录。允许 Travis 访问您的所有存储库。

这将向我们展示我们可以自动化的存储库列表，但我们的不存在……因为它不存在！

新存储库

在 https://github.com/new 创建一个新的 GitHub 存储库

然后我们可以使用以下命令将其推送到 GitHub：

git remote add origin https://github.com/YourUser/YourRepoName.git
git push -u origin master

部署

我们快到了。我们现在需要创建一个包含自动部署步骤的 .travis.yml 文件：

language: node_js
node_js:
  - "11.0"
branches:
  only:
    - master
before_script:
  - npm install -g @angular/cli
script:
  - npm install
  - npm run build
deploy:
  skip_cleanup: true
  provider: firebase
  token:
    secure: ""

Travis CI 自动化步骤内置在 yml 中，并提供一组易于理解的指令。

有些东西看起来不对劲。 token 为空白。这是因为我们需要使用 firebase CLI 生成它：

$ firebase login:ci

您应该取回一个长令牌，该令牌可以用来代替上面的空 token。

使用以下内容将此 .travis.yml 文件推送到 GitHub：

$ git add .
$ git commit -m "Added Travis CI automation!"
$ git push

现在，前往 https://travis-ci.com 并查看构建！

=== Deploying to 'app-5c310'...
i  deploying hosting
i  hosting[app-5c310]: beginning deploy...
i  hosting[app-5c310]: found 14 files in dist/AngularFirebaseCI
i  hosting: uploading new files [0/14] (0%)
i  hosting: uploading new files [12/14] (85%)
✔  hosting[app-5c310]: file upload complete
i  hosting[app-5c310]: finalizing version...
✔  hosting[app-5c310]: version finalized
i  hosting[app-5c310]: releasing new version...
✔  hosting[app-5c310]: release complete
✔  Deploy complete!

概括

在本文中，我们了解了如何使用 Angular 创建应用程序并将其部署到 Firebase 托管。

然后我们研究了如何使用 Travis CI 自动化这个过程。每当 master 分支更新时，此构建过程将运行并发布到 Firebase 托管。