如何在Vue项目中利用Firebase主机和Github动作设置CI/CD

大部分的软件开发工作流程包括手动运行、测试、构建和部署项目。每次有任何改动或更新，我们都会将代码推送到我们的版本控制系统，并手动部署。在任何开发阶段，手动修复错误和更新新功能都是非常低效的，因为它消耗了大量的时间和精力。

解决这个问题的办法是将整个部署过程自动化。这可以通过在项目中应用CI/CD来实现。在这里，我们将使用Vue、Firebase Hosting和GitHub工作流程来实现。

整个过程使软件开发和管理过程自动化，并使测试和部署最终结果变得容易。主要目的是在每个拉动请求或更改被合并到我们GitHub仓库的主分支后，自动构建和部署更新到主服务器。

整个过程包括。

• 设置Vue项目。
• 将Vue项目推送到GitHub仓库。
• 建立Firebase项目。
• 使用最新的Firebase-tools在Vue项目中设置Firebase主机。
• 通过应用GitHub工作流程配置Firebase主机和GitHub之间的连接。

将会发生什么结果。

• 我们将把代码推送到主分支，或者创建一个拉动请求来合并分支。
• 触发GitHub动作的工作流脚本。
• 合并行动成功后，这些变化将自动部署到实时网站，而无需进行任何手动配置。
• 我们还可以在工作流脚本中加入测试脚本，以便在合并前进行自动测试。

第1步：Vue模板

第一步是准备好我们的Vue项目。对于Vue模板项目，我们将使用Vue CLI。首先，我们需要在我们的系统中全面安装最新版本的Vue CLI。

它允许我们根据不同的配置下载启动版的Vue模板。所需的包都是预装的。它也使我们能够管理Vue项目。

要安装它，我们需要在我们的系统终端运行以下命令。

npm install @vue/cli -g

Vue CLI安装完毕后，我们现在可以启动一个新的Vue项目。为此，我们需要在我们要下载项目的目录中运行以下命令。

vue create vue_cicd

运行该命令后，而不是执行功能的自动设置，我们需要选择手动配置。在手动配置选项中，我们需要指定要包括哪些Vue功能。

所需的功能被标记出来，如下图所示。

所有的功能对于本教程来说都是不必要的，但对于一个实际的Vue项目来说，所选的功能可能是一个先决条件。我们还选择了单元测试和E2E测试，这些测试也可以通过GitHub的工作流动作实现自动化。

选择完成后，我们可以点击 "Enter"，进入下一个流程，如下图所示。

在这里，我们选择了其他额外的要求，如Vue版本3，启用路由器的历史模式，Prettier作为代码格式，Jest用于单元测试，Cypress用于E2E测试，等等。所有的配置将被保存到它们的默认配置文件中。

项目安装成功后，我们需要使用以下命令进入项目目录。

cd vue_cicd

接下来，我们需要执行以下命令，在localhost中运行该项目。

npm run serve

我们将在浏览器中得到以下结果。

第2步：推送项目到GitHub

现在，我们要用Git将我们的代码上传到GitHub。GitHub是一个在线云平台，每次上传后都会储存我们编码项目的准确版本。它是一个项目管理系统，旨在促进Git的版本控制。

Git是一个版本控制工具，用于在每次推送或上传后为我们的编码项目提供一个正确的版本。它提供的另一个主要功能是GitHub动作，将用于自动化工作流程。它有助于缓解构建和部署过程。

接下来，我们需要登录到GitHub账户，并按照下面的截图指示创建一个仓库。

提到仓库名称后，我们可以简单地点击 "创建仓库 "来创建一个仓库。现在，这个仓库是我们可以推送我们的Vue项目的地方。

在这里，我们将使用Git命令来推送项目文件。在项目根目录下，我们需要打开终端或Git Bash，按顺序执行以下命令。

git init
git add .
git commit -m "<your comment or message>"
git remote add origin <git repo origin link>
git push -u origin master

这将把我们的项目推送到GitHub仓库 "vue_cicd_example "的主分支。

更新成功后，你可以检查你的GitHub仓库，在那里你会发现项目文件就像在你的vue项目文件夹中一样。

至此，我们完成了GitHub repo的设置，并将项目推送到GitHub repo中。

第3步：将Firebase主机与GitHub工作流程结合起来

这一步是本教程的一个重要步骤，我们要把Firebase主机和GitHub工作流行动联系起来。这个过程就是把Firebase主机和GitHub动作连接起来，以便在每次推送和合并后自动进行部署。

但首先，我们需要创建一个Firebase项目，以便将Firebase与我们的Vue项目联系起来。

3.1 创建一个Firebase项目

为了创建一个Firebase项目，我们需要登录到Firebase，并导航到Firebase控制台。在那里，我们可以简单地点击 "添加项目 "来启动我们的项目。

一开始，会出现一个窗口要求输入项目名称。在这里，我们将保持项目名称为 **vue-cicd**如下面的截图所示。

当项目创建完成后，我们可以继续进行下一步。在项目建立之后，我们会得到一个项目控制台，如下图所示。

现在我们的Firebase项目设置已经完成。我们现在可以在我们的Vue项目中配置Firebase主机了。

3.2 配置Firebase主机

现在我们在GitHub上有了我们的Repo和Firebase项目，让我们为这个项目初始化Firebase主机。

为此，我们需要在本地机器上安装Firebase CLI。我们需要在终端执行以下命令来全局安装Firebase-tools包。

npm install -g firebase-tools

请注意。我们需要安装最新版本的firebase-tools，以获得通过firebase命令自动连接到GitHub项目库的配置。

现在，我们需要确保我们是在项目根目录下，然后执行以下命令。

firebase init

这条命令将为我们提供配置，以便在我们的Vue项目目录下初始化Firebase项目。

首先，它将询问我们要在项目文件夹中设置的Firebase CLI功能，如下面的屏幕截图所示。

由于我们要链接Firebase主机，我们至少需要选择主机功能。

之后，我们会被要求选择Firebase项目。为此，我们需要从Firebase控制台的现有项目列表中选择Firebase项目。

由于我们已经有一个Firebase项目 **vue-cicd**我们需要选择那一个。

在选择了Firebase项目之后，我们会被要求配置托管设置。我们需要应用的配置在下面的截图中展示。

在这里，我们选择了我们的公共目录为**"dist"，**它将包含在Firebase部署过程中要上传的托管资产。

然后，我们要把我们的项目配置成一个单页的应用程序，将我们所有的编码文件链接到index.html。

这里，最后一个配置问题要求我们**'用GitHub设置自动构建和部署'**，这是最重要的问题。我们需要确保给 "是 "作为答案。这将使我们的Firebase主机设置连接到GitHub，并自动进行构建和部署。

在这个阶段，它将连接到我们的GitHub，在一个简单的授权过程后获得仓库信息，在浏览器中打开。

3.3 将GitHub的工作流动作整合到主机上

授权成功后，我们将与GitHub账户相连，这样我们就可以将我们的仓库与Firebase主机相连。

然后，我们将选择GitHub账户中的现有仓库，这样我们就可以设置GitHub工作流，如下图所示。

在这里，我们需要输入我们的**[GitHub用户名/GitHub项目仓库名称**（之前创建的）]。

然后，我们会被问到是否愿意在每次部署前运行构建脚本，我们需要把 "是 "作为答案。

接下来的配置会自动给出要运行的脚本和命令，所以我们只需要按下'Enter'按钮。下面是配置的截图。

这将在我们的项目目录下的.github/workflows文件夹中创建一个名为firebase-hosting-pull-request.yml的工作流程文件。

然后，自动部署到我们的网站以及部署哪个GitHub分支的额外配置步骤如下截图所示。

在这里，我们将选择在GitHub repo中的主分支的每个拉动请求被合并时，实时自动部署到我们的网站。

这将在我们的项目目录下的.github/workflows文件夹中创建一个名为firebase-hosting-merge.yml的工作流文件。

在这些成功的配置之后，启用了托管功能的Firebase项目将被创建，然后将Firebase项目连接到Github中的仓库。

因此，工作流文件夹和文件将被创建，如下面的截图所示。

这两个工作流的主要目的是构建应用程序，并将其自动部署到Firebase主机。

第一个工作流文件firebase-hosting-merge.yml将在每次合并到主分支时执行。它将把合并后的程序部署到我们的生产环境或实时网站环境。

第二个工作流文件firebase-hosting-pull-request.yml将只在从任意分支到主分支的拉取请求创建时执行。它将把推送部署到一个单独的URL，这将使我们能够在执行合并到拉动请求之前测试出结果。

现在，有了这两个工作流脚本的运行，我们就不必在每次对代码进行修改并推送到GitHub repo时处理部署问题了。

我们只需要把改动推送并合并到主分支。剩下的构建和部署过程将由Firebase自动处理，GitHub会自动执行部署。

第4步：测试GitHub动作是否有效

现在我们把一切都设置好了，让我们来测试一下。由于我们的Vue项目目录中已经有了两个工作流文件，所以我们已经有了一些需要推送的变化。

现在，我们需要在根项目中创建一个新的Git分支，并将该分支推送到GitHub repo中。

现在，我们可以从GitHub控制台导航到该分支，并在GitHub中创建一个从创建的分支到主分支的拉取请求，这将自动触发Github动作的工作流程，如下图所示。

这证明我们的配置是正常工作的。现在，在接受了拉动请求并合并了分支之后，主分支也会自动触发部署。

回顾总结

这篇文章的总体目标是帮助我们熟悉Vue.js项目的CI/CD、Firebase和GitHub动作工作流程。这篇教程文章提供了如何配置CI/CD流程的详细（分步骤）概念。主要步骤是围绕着Firebase主机与GitHub工作流程的配置。

这些步骤很简单，易于理解和应用。迭代构建和部署到实时服务器的所有手工工作都被这个过程简化了。

我们唯一要做的工作就是推送我们的修改，并将修改合并到主分支。其余的操作都由Firebase和GitHub的动作脚本自动处理。

关于GitHub动作的工作流程，还有很多东西我们可以探讨。请记住，我们在一开始的Vue项目设置中也包含了测试配置。

我们还可以在部署前合并时，使用工作流脚本触发自动单元和E2E测试。这将很容易自动识别变化中的任何错误或bug，而不需要进行手动测试。

因此，这在整个软件开发周期的情况下是非常有利的。