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



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

因为我想轻松部署我的网站,我尝试了Heroku和Firebase。npm run build"对于前端,将结果放入"public"我的服务器目录,firebase。(我认为).

"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文件中(在functions目录中)。但是它不工作。

我应该怎么做才能有一个好的部署?我应该在API.js中更改客户端中的内容以使其具有适应性吗?


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

编辑要清楚。

  1. 在"myapp&quot文件夹中,我有"client&quot文件夹,里面有我的Vue.js前端网站,我用npm run serve在本地启动它。

  2. 在同一个文件夹"myapp"中,我有文件夹"server",这是连接到Twitter Api所必需的,因为从前端是不可能的。我通过"npm run start"启动它。

  3. 我的前端访问"服务器";Axios。服务器使用get或post进行应答,并且能够向twitter API请求信息。

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

  5. 因为这是工作,我想我可以通过部署"服务器"来启动网站。文件夹中。但这不起作用,我认为这是因为"客户"side被编码为请求"localhost:8085/apfunctions"。但我不明白应该如何部署服务器。这就是为什么我尝试使用firebase主机,但我有完全相同的问题:我不完全理解这是如何运行的,以知道问题是来自我的部署方法还是代码(axios有baseURL: localhost:8085)。

我明白了:

  1. 你的Vue.js应用是通过Firebase Hosting服务提供的。
  2. 你把你的Express应用传递给一个HTTP云函数,正如你所参考的文档和这里的云函数文档中所解释的那样。

如果这种理解是正确的,你可以通过以下url访问你的Express JS应用程序(即云函数),正如文档底部(项目符号#2)所解释的:

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

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


更新您的评论:

似乎您想在使用模拟器时访问CF。您应该使用Cloud Functions的模拟器默认端口,即5001,或者根据需要使用另一个端口配置它。查看模拟器文档。

相关内容

  • 没有找到相关文章

最新更新