如何使用 Express、Vue.js 和 firebase 部署客户端/服务器网站

Question

我使用 Vue.js（用于前端）开发了一个网站，并制作了一个服务器来将该网站连接到一个 API（这里是 Twitter）。服务器是用 Express.js 制作的。在 localhost 中，一切正常。我的服务器在 localhost:8085 上运行，我的网站在 localhost:8080 上。借助 Api，我可以通过例如 GET http://localhost:8085/TheNameOfTheApiFunction 访问数据。

因为我想轻松部署我的网站，所以我尝试使用 Heroku 和 Firebase。我用前端做“npm run build”，把结果放在我服务器的“public”目录下，firebase.json 很好（我认为）。

  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "function":"app",
        "destination": "/index.html"
      }
    ]
  },
  "functions": {
    "predeploy": [
      "npm --prefix \"$RESOURCE_DIR\" run lint"
    ]
  }
}

此时，当我启动网站时，前端正在工作，但无法访问任何 API 功能。似乎合乎逻辑，因为没有 localhost/8085 要求函数。 GET http://localhost:8085/NameOfTheApiFunction net::ERR_CONNECTION_REFUSED

因此，我决定探究原因，发现我应该使用本教程中的建议： https://firebase.google.com/docs/hosting/functions#use_a_web_framework。 因此，我将 app.js 文件中的内容复制并粘贴到了由 firebase 函数创建的 index.js 文件中（在函数目录中）。但它不起作用。

我应该怎么做才能进行良好的部署？我应该更改 API.js 中客户端的内容以使其具有适应性吗？

export default () => {
    return axios.create({
        baseURL: `http://localhost:8085/`
    })
}

编辑 说清楚。

1. 在文件夹“myapp”中，我有文件夹“client”，其中有我的 Vue.js 前端网站，我使用npm run serve 在本地启动它。

2. 在同一文件夹“myapp”中，我有文件夹“server”，这是连接到 Twitter Api 所必需的，因为从前端无法实现。我通过执行“npm run start”来启动它。

3. 我的前端使用 Axios 访问“服务器”。具有 get 或 post 的服务器 anwser 并能够向 twitter API 询问信息。

4. 在 localhost 上一切正常。我想部署网站，我跟着这个视频： https://www.youtube.com/watch?v=GJwHevf2wYE 这家伙建议在服务器部分创建一个名为“public”的文件夹，您将所有来自“客户端”的构建（npm run build）的文件放在其中。您在服务器中添加app.use(express.static("public"))，当我启动时，例如，localhost:8085（即服务器），我可以通过一个命令（而不是两个）访问整个网站。

5. 因为这行得通，我认为我可以通过部署“服务器”文件夹来启动该网站。但它不起作用，我认为这是因为“客户端”端被编码为请求“localhost:8085/ApiFunctions”。但我不明白我应该如何部署服务器。这就是我尝试使用firebase托管的原因，但我遇到了完全相同的问题：我不完全了解它是如何运行的，以知道问题是来自我的部署方法还是代码（axios 具有baseURL：localhost：8085）。

Answer 1

我明白：

1. 您的 Vue.js 应用通过 Firebase 托管服务提供服务。
2. 您将 Express 应用程序传递给 HTTP Cloud Function，如您参考的文档和 Cloud Functions 文档中的 here 中所述。

如果这种理解是正确的，您可以通过以下 URL 访问您的 Express JS 应用程序（即 Cloud Function），如 the bottom of the doc（要点 #2）中所述：

• 您的 Firebase 子域：<Firebase_project_ID>.web.app/<NameOfTheApiFunction> 和 <Firebase_project_ID>.firebaseapp.com/<NameOfTheApiFunction>

• 或者，任何连接的自定义域： <custom_domain>/<NameOfTheApiFunction>.

---

根据您的评论更新：

您似乎想在使用模拟器时访问 CF。您应该使用 Cloud Functions 的模拟器默认端口，即 5001，或者根据需要将其配置为另一个端口。请参阅模拟器doc。