Question

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

Answer 1

关注这个

第 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 初始化，当然选择要设置的托管功能

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 应用程序）
编辑 .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
完成检查您的存储库是否具有 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 托管上

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

1 个答案: