我使用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/`
})
}
编辑要清楚。
在"myapp"文件夹中,我有"client"文件夹,里面有我的Vue.js前端网站,我用
npm run serve
在本地启动它。在同一个文件夹"myapp"中,我有文件夹"server",这是连接到Twitter Api所必需的,因为从前端是不可能的。我通过"npm run start"启动它。
我的前端访问"服务器";Axios。服务器使用get或post进行应答,并且能够向twitter API请求信息。
在本地主机上一切正常。我想部署这个网站,我看了这个视频:https://www.youtube.com/watch?v=GJwHevf2wYE这家伙建议创建一个名为"public"的文件夹。在服务器部分,您可以在其中放置来自"客户端"构建(npm run build)的所有文件。你在服务器中添加
app.use(express.static("public"))
,当我启动时,例如,localhost:8085(即服务器),我可以在一个命令(而不是两个)中访问整个网站。因为这是工作,我想我可以通过部署"服务器"来启动网站。文件夹中。但这不起作用,我认为这是因为"客户"side被编码为请求"localhost:8085/apfunctions"。但我不明白应该如何部署服务器。这就是为什么我尝试使用firebase主机,但我有完全相同的问题:我不完全理解这是如何运行的,以知道问题是来自我的部署方法还是代码(axios有baseURL: localhost:8085)。
我明白了:
- 你的Vue.js应用是通过Firebase Hosting服务提供的。
- 你把你的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,或者根据需要使用另一个端口配置它。查看模拟器文档。