使用Circle CI将ReactJS持续部署到Firebase托管

做同样的事情很无聊。 在这个主题上，无聊的部分是将我们的Web应用程序部署到Firebase Hosting。 我们要做的步骤是：

• 测试您的React应用， yarn test
• 推送到git
• 建立您的React应用程式， yarn build
• 做部署到firebase托管， firebase deploy

上面的步骤很无聊，在本文中，我尝试分享我的经验，以将上面的四个工作总结为一个。 因此，我们要做的就是将更改推送到git存储库，CircleCI将做所有事情。

要求

在开始之前，您必须具有以下五个要求：

1. React App。
2. Firebase项目，转到此处 。
3. Git存储库。 我的本教程资料库， 位于 。
4. Firebase命令行工具，请转到此处 。
5. CircleCI帐户，转到此处 。

开始吧！

1.配置Firebase

创建一个React项目，在本教程中，我将使用create-react-app

$ create-react-app learn-cd- react-firebase
 $ cd  learn-cd- react-firebase
 $ yarn  install
 $ yarn  build

我们需要配置项目以与Firebase连接，进行Firebase firebase login

$ firebase login

? Allow Firebase to collect anonymous CLI usage and error reporting information? No
Visit this URL on any device to log in :
https: //accounts.google.com/o/oauth2/auth?client_id=563584335869-xxxxxxx
Waiting for authentication...
✔  Success! Logged in as arryanggaputra@gmail.com

执行firebase init ，这将在当前目录中设置一个新的Firebase项目。 此命令将在您当前的目录中创建一个firebase.json配置文件。

使用空格进行选择，选择Hosting

You're about to initialize a Firebase project in this directory:
/Users/arryanggaalievpratamaputra/sites/learn-cd-react-firebase
? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices.
 ◯ Database : Deploy Firebase Realtime Database Rules
 ◯ Firestore: Deploy rules and create indexes for Firestore
 ◯ Functions: Configure and deploy Cloud Functions
❯◉ Hosting: Configure and deploy Firebase Hosting sites
 ◯ Storage : Deploy Cloud Storage security rules

选择您的Firebase项目

First, let's associate this project directory with a Firebase project. You can create multiple project aliases by running firebase use --add, but for now we'll just set up a default project.
? Select a default Firebase project for this directory :
  [don 't setup a default project]
  mws-surabaya (mws-surabaya)
❯ learn-cd-react-firebase (learn-cd-react-firebase)
  [create a new project]

配置公共目录，输入build ， create-react-app项目将生成您的构建到build文件夹。 配置为单页应用程序 ，键入Yes

=== Hosting Setup
Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build 's output directory.
? What do you want to use as your public directory? build
? Configure as a single -page app (rewrite all urls to /index.html)? Yes
? File build/index.html already exists. Overwrite? No
i  Skipping write of build/index.html
i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
✔  Firebase initialization complete!

2.手动部署到Firebase

为了确保是否可以使用Firebase托管，我们将尝试手动进行部署。

我们使用命令yarn build

yarn run v1 . 10 . 1
$ react-scripts build
 Creating an optimized production build...
 Compiled successfully.
File sizes after gzip:
34 . 71 KB  build/static/js/1.fa92c112.chunk.js
  763 B     build/static/js/runtime~main.229c360f.js
  713 B     build/static/js/main.b50be446.chunk.js
  511 B     build/static/css/main.3a30845b.chunk.css
 The project was built  assuming it  is hosted at the server root.
You can control this with the homepage field in your package.json.
For example, add  this to build  it  for GitHub Pages:
"homepage" : "https://learn-cd-react-firebase.firebaseapp.com" ,
The build  folder is ready to be  deployed.
You may serve it  with a static server:
yarn global add  serve
  serve -s build
 Find out more about deployment here:
http :// bit.ly/CRA-deploy
 ✨  Done in 13 . 14 s.

构建成功后，我们使用命令firebase deploy部署到Firebase

=== Deploying to 'learn-cd-react-firebase' ...
i  deploying hosting
i  hosting[learn- cd -react-firebase]: beginning deploy...
i  hosting[learn- cd -react-firebase]: found 15 files in build
✔  hosting[learn- cd -react-firebase]: file upload complete
i  hosting[learn- cd -react-firebase]: finalizing version ...
✔  hosting[learn- cd -react-firebase]: version finalized
i  hosting[learn- cd -react-firebase]: releasing new version ...
✔  hosting[learn- cd -react-firebase]: release complete
✔  Deploy complete!
Project Console: http s: //console.firebase.google. com /project/learn- cd -react-firebase/overview
Hosting URL: http s: //learn- cd -react-firebase.firebaseapp. com

work🔥😎https : //learn-cd-react-firebase.firebaseapp.com

3.在我们的项目中配置CircleCI

转到circleci.com并ADD PROJECT

（按设置项目按钮）

选择Linux作为操作系统，选择Node作为我们的语言。

返回我们的项目，并创建CircleCI配置

• 创建一个名为.circleci的文件夹
• 添加文件config.yml （以使文件路径位于.circleci/config.yml ）。
• 填充config.yml与样品中的内容config.yml
• 将此样本复制到我们的存储库

version: 2
jobs:
  build:
    docker:
      - image: 'circleci/node:8'
    working_directory: ~/repo
    steps:
      - checkout
      - restore_cache:
          keys:
            - 'v1-dependencies- {{ checksum "package.json" }} '
            - v1-dependencies-
      - run: 'yarn install'
      - save_cache:
          paths:
            - node_modules
          key: 'v1-dependencies- {{ checksum "package.json" }} '
      - run: 'yarn test'

将此更改推送到GitHub，然后开始构建！ 您需要按标记为Start building蓝色按钮！

（如果建立成功，您将看到此信息）

4.从CircleCI部署到Firebase托管

此步骤将使我们能够将项目自动部署到Firebase Hosting。 生成Firebase CI令牌。

$ firebase login: ci
Visit this URL on any device to log in :
https: //accounts.google.com/o/oauth2/auth?client_id=563584335869-fgrhgmd
Waiting for authentication...
✔  Success! Use this token to login on a CI server:
1/qV80aq1eE06WJkIkwEmkkoU12iIKq2DYOV2gNiTmg
Example: firebase deploy -- token "$FIREBASE_TOKEN"

转到项目设置

（项目设置）

转到环境变量

（CircleCI的“环境变量”菜单）

添加变量FIREBASE_TOKEN ，填充我们之前获得的令牌值。

打开.circleci/config.yml 。 将此行添加到config.yml的底部

- run:
    name: 'Build Project'
    command: 'yarn build'
- run:
    name: 'Deploy to Firebase Hosting'
    command: './node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN'

• 将Firebase工具添加为dev依赖项yarn add firebase-tools --dev
• 将更改推送到github。
• 每当您在github上进行更改时，CircleCI都会进行部署
• 和成功
• 

现在，我们已经设置了连续部署，以将您的项目部署到Firebase Hosting。

如果您在以上各节中遇到任何问题，或者我在某个地方犯了错误或错过了要点，请在评论中让我知道。

From: https://hackernoon.com/reactjs-continuous-deployment-to-firebase-hosting-using-circle-ci-ed31c0aee2ca