如何自动部署React应用程序到Firebase许多平台为React和其他JavaScript框架提供免费托管服务。这些

本教程包括

构建一个React应用样本

在Firebase上设置和配置该应用

创建一个持续部署管道

许多平台为React和其他JavaScript框架提供免费托管服务。这些框架可用于构建单页应用程序，当你需要推出最小可行产品或快速概念验证时，这很方便。你的开发者同伴正在利用这些工具，你也可以。为了缩小选择范围，我将在本教程中重点介绍Firebase。

Firebase是一个由谷歌开发的开发平台，提供文件存储、托管、数据库、认证和分析。Firebase是免费的，默认提供一个SSL证书，并在多个地区提供令人印象深刻的速度。

在本教程中，你将学习如何通过使用CircleCI设置持续部署管道来在Firebase上托管你的React应用。

前提条件

在本教程中，你将需要

在你的系统上安装Node.js。Firebase CLI需要版本^14.18.0 || >=16.4.0 。
一个CircleCI账户。
一个GitHub账户。
一个Firebase账户。
熟悉使用React构建Web应用程序。

克隆演示项目

首先，在GitHub上克隆本教程的演示项目。使用Git发出以下命令。

git clone https://github.com/yemiwebby/react-app-firebase.git

这个演示程序从一个免费的Rest API中获取假用户列表用于测试。

接下来，进入新克隆的应用程序，安装其依赖性并运行应用程序。

// change directory
cd react-app-firebase
    
// install dependencies
npm install
    
// Run the application
npm run start

转到http://localhost:3000 ，在本地查看主页。

现在你知道演示应用程序正在工作，你准备在Firebase上建立一个项目。

在Firebase上建立一个项目

你需要一个免费的账户来访问Firebase所能提供的所有功能，所以打开一个Firebase账户，进入Firebase控制台页面。

接下来，使用下面的步骤。

点击添加项目按钮。
为你的项目输入一个名称。我把我的命名为react-app-firebase 。请记住，项目ID在Firebase中是唯一的。
点击继续。
禁用Google Analytics；这个项目不需要它。
再次点击继续。

你已经成功地在Firebase上创建了一个项目。

配置Firebase主机

要在Firebase上成功托管你的应用程序，你需要安装它的工具并在你的项目中初始化它。

打开一个新的终端。运行这个命令来全局安装Firebase工具。

npm install -g firebase-tools

一旦安装完成，你现在可以在全局范围内访问Firebase命令行界面工具。你可以用它们来部署代码和资产到你新创建的Firebase项目。

将React连接到Firebase

从终端，登录到你的Firebase账户。

firebase login

这个命令会打开一个浏览器并提示你选择一个账户。

接下来，确保你在react-app-firebase 项目的根目录下，发出这个命令来初始化它。

firebase init

你会被提示回答一些问题。

选择主机。为Firebase主机配置文件，（可选择）设置GitHub Action部署。
使用一个现有的项目。选择你之前创建的Firebase项目(react-app-firebase)。
输入build 作为公共目录。
配置成一个单页的应用程序。Yes.
用GitHub设置自动构建和部署。No.在本教程中，我们使用CircleCI来运行测试和处理部署。

下面是终端的输出。


     ######## #### ########  ######## ########     ###     ######  ########
     ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
     ######    ##  ########  ######   ########  #########  ######  ######
     ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
     ##       #### ##     ## ######## ########  ##     ##  ######  ########
    
You are about to initialize a Firebase project in this directory:
    
  /Users/yemiwebby/tutorial/circleci/react-app-firebase
    
? Which Firebase features do you want to set up for this directory? Press Space to select features, th
en Enter to confirm your choices. Hosting: Configure files for Firebase Hosting and (optionally) set u
p GitHub Action deploys, Hosting: Set up GitHub Action deploys
    
=== Project Setup
    
First, lets associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we will just set up a default project.
    
? Please select an option: Use an existing project
? Select a default Firebase project for this directory: react-app-firebase-52972 (react-app-firebase)
i  Using project react-app-firebase-52972 (react-app-firebase)
    
=== 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 builds 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
? Set up automatic builds and deploys with GitHub? No
✔  Wrote build/index.html
    
i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...
    
✔  Firebase initialization complete!

项目的初始化过程还在你的项目根部生成了两个独特的文件。这些文件是成功部署的必要条件，必须检查到源控制中。

firebase.json 包含你的项目的主机配置。它指示Firebase CLI在你的项目目录中上传和部署的文件。
.firebaserc 指定项目在你成功部署到Firebase后连接到上传的代码。

配置CircleCI

配置文件已经存在于克隆的项目中。转到.circleci/config.yml 。打开它并确保它与此相符。

version: 2.1
jobs:
  build:
    working_directory: ~/project
    docker:
      - image: cimg/node:17.4.0
    steps:
      - checkout
      - run:
          name: Update NPM
          command: "sudo npm install -g npm"
      - restore_cache:
          key: dependency-cache-{{ checksum "package-lock.json" }}
      - run:
          name: Install Dependencies
          command: npm install
      - run: npm install --save-dev firebase-tools    
      - save_cache:
          key: dependency-cache-{{ checksum "package-lock.json" }}
          paths:
            - ./node_modules
      - run:
          name: Build application for production
          command: npm run build 
      - run:
          name: Deploy app to Firebase
          command: ./node_modules/.bin/firebase deploy --token=$FIREBASE_TOKEN  
workflows:
  build-and-deploy:
    jobs:
      - build