如何使用Express、Vue.js与Firebase部署客户端/服务端架构网站

1. 修正Axios请求配置（核心问题） #

你当前的baseURL硬编码为本地地址，部署后肯定会请求失败，需要根据运行环境动态切换：

export default () => {
    return axios.create({
        // 开发环境用本地服务端地址，生产环境用当前域名根路径
        baseURL: process.env.NODE_ENV === 'development' ? 'http://localhost:8085/' : '/'
    })
}

如果你的接口都统一带/api前缀，也可以把生产环境的baseURL设为/api，后续路由匹配更清晰。

2. 修正firebase.json配置冲突 #

你当前的rewrites规则同时配置了function和destination，二者互斥会导致路由逻辑混乱，按下面的方案调整：

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      // 所有请求转发到Cloud Functions，适配你把静态资源托管在Express的方案
      {
        "source": "**",
        "function":"app"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  }
}

如果你想让静态资源直接走Hosting获得更快的加载速度，可以拆分规则：

"rewrites": [
  // 接口请求走Functions，按需改成你的接口前缀，比如/api/**
  {
    "source": "/**",
    "function": "app"
  },
  // 其余所有请求返回前端入口，适配Vue前端路由
  {
    "source": "**",
    "destination": "/index.html"
  }
]

3. 补全Cloud Functions的导出逻辑 #

把Express代码复制到functions/index.js后，需要导出为Firebase可识别的HTTPS函数：

const functions = require('firebase-functions');
const express = require('express');
const app = express();

// 你原来的所有服务端逻辑，包括static托管、接口路由、Twitter API调用逻辑等
app.use(express.static("public"));
// 你的其他接口路由写在这里

// 导出函数，注意函数名要和firebase.json里的function配置一致，都是app
exports.app = functions.https.onRequest(app);

同时要确认express等服务端依赖已经安装到functions/package.json的dependencies中，不要放到项目根目录的依赖里。

4. 部署流程校验 #

按以下顺序执行部署即可：

1. 进入前端client目录，执行npm run build，把构建产物全部复制到服务端的public目录
2. 把public目录放到functions目录下（如果是全量走Functions托管的方案），或者放到Firebase项目根目录的public文件夹下
3. 执行firebase deploy完成部署

部署完成后直接访问Firebase分配的域名即可正常访问全站，接口会自动走Cloud Functions的逻辑，不会再请求本地地址。

内容的提问来源于stack exchange，提问作者TomPelletreauDuris