时间戳

首页 > 解决方案 > 如何在一个项目下创建多个 Vue 应用

firebase - 如何在一个项目下创建多个 Vue 应用

问题描述

我是 Vue js 的新手，我正在使用 firebase 开发一个电子商务项目。我在 firebase 中看到有多种托管功能，可以帮助我在两个不同的域中托管客户端和管理端。我不知道如何在一个项目文件夹中创建两个应用程序，如 Angular 中的这个示例。如果有知道的请分享你的想法

标签： firebasevue.jshosting

解决方案

按照这个

第 0 步 - Firebase 设置

在本教程中my-app是我的 Firebase 项目 id
my-app-public Web App 关联到my-app托管站点（默认托管站点以项目 id 作为名称）
my-app-admin Web App 关联到my-app -admin托管站点

步骤1

将您的公共和管理应用程序移动到新目录中

my-app/
├── public-site/
└── admin-site/

第2步

从my-app/使用 firebase 初始化，当然选择 Hosting 功能进行设置

firebase init

不要注意firebase要求公共名称文件夹

第 3 步

将应用的构建路径设置为目标 public 和 admin。
编辑firebase.json文件并添加您的应用程序。

{
    "hosting": [
        {
          "target": "public",
          "public": "public-site/dist",
          "ignore": [
            "**/.*",
            "**/node_modules/**"
          ]
        },
        {
          "target": "admin",
          "public": "admin-site/dist",
          "ignore": [
            "**/.*",
            "**/node_modules/**"
          ]
        }
    ],
}

第4步

将目标链接到您的 Firebase 托管站点。（托管站点！= Web App）
编辑.firebaserc，如果它不存在，则在 my-app/ 的根目录下创建它

{
  "projects": {
    "default": "my-app", # firebase project id
  },
  "targets": {
    "my-app": { # firebase project id
      "hosting": {
        "public": [
          "my-app" # public hosting site id
        ],
        "admin": [
          "my-app-admin" # admin hosting site id
        ]
      }
    },
  }
}

现在如果你输入

firebase target

你应该得到

[ hosting ]
public (my-app)
admin (my-app-admin)

第 5 步

构建你的两个应用程序

cd public-site/
npm run build

确保您的应用程序构建在 dist/ 文件夹中

第 6 步

部署这两个应用程序

firebase deploy --only hosting

或仅部署公共应用程序

firebase deploy --only hosting:public

您的应用程序应部署到

奖金 - 在 master 上合并构建和部署您的应用程序（Github）

首次使用

firebase init hosting:github

并按照 CLI 说明进行操作，它应该询问您的 repo
完成检查您的 repo 是否具有 firebase 服务帐户密钥

  • 继续你的github 仓库 > 设置 > 安全
  • 您应该会看到一个名为FIREBASE_SERVICE_ACCOUNT_MY_APP的秘密环境变量

让我们在您的项目中设置您的 github 工作流，删除由上一个命令生成的.github/workflows中的 .yml 文件并创建您自己的工作流（文件名无关紧要）：

name: Deploy on PROD to Firebase Hosting
'on':
  push:
    branches:
      - master # branch to target
jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install dependencies & build public-site
        run: npm ci && npm run build
        working-directory: public-site
      - name: Install dependencies & build admin-site
        run: npm ci && npm run build
        working-directory: admin-site
      - name: Deploy websites
        uses: FirebaseExtended/action-hosting-deploy@v0
        with:
          repoToken: '${{ secrets.GITHUB_TOKEN }}'
          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_MY_APP }}' # edit here
          projectId: my-app # edit here
          channelId: live

因此，master 上的每次推送/合并都将构建每个应用程序并将它们部署在 Firebase 托管上

推荐阅读