如何将我的前端连接到公开部署而不是在本地主机上部署的 NodeJS 后端

Question

当我的NodeJS服务器部署在localhost PORT上时，我可以连接它们，例如

const PORT = 9000;
const app = express()
app.listen(PORT, () => console.log(`Server is running successfully on PORT ${PORT}`))
app.use(bodyParser.json({extended: true}))
app.use(cors())
app.use(bodyParser.urlencoded({extended: true}))
app.use('/', router)

在我的前端，我可以做以下事情：

const url = 'http://localhost:9000'
...
const res = await axios.get(`${url}/post/${path}`)

这只是一个例子。但是，如果我想将NodeJS服务器部署到heroku应用程序中，例如randomname.herokuapp.com，并且我想进行，该怎么办

const url = 'http://randomname.herokuapp.com:9000'
...
const res = await axios.get(`${url}/post/${path}`)

它显然不起作用。所以我非常感谢任何能帮我做这件事的人。

Answer 1

你好，首先，如果你在heroku上部署了一个应用程序，你将不得不更改端口，你应该将其添加到你的代码中

app.listen(process.env.PORT || 3000,function(){
console.log("Server started at ${PORT}");
});

因为heroku不会像在本地主机上那样部署在同一个端口上。此外，如果我理解你的问题，将前端和后端连接起来，在你的代码中，你应该开始构建类似的路径

app.get("/")
app.post("/")

以处理获取请求并将其发布到您的家庭根和任何其他根。此外，如果你想在表单中使用文本字段、复选框或其他内容，你需要在首页中获取用户输入，并在后台获取，例如在主页上。

app.post("/home",function(req,res){
const input=req.body.name;
}

我也在heroku上部署了应用程序，主要思想仍然不变，用这些命令处理get、post请求。您只需更改端口和Pocfile即可在heroku上运行您的应用程序。获取和发布路线仍然保持不变("/home，/info"(。

你的应用程序的链接将是："https://something_given_from_heroku.com"这将由heroku自动给出。然后你点击了其他路线，比如/home

我希望这能帮助你，但请查看其他帖子以确定。

Answer 2

我自己一直在做这件事，而不是从barebones开始一直到skelet，只需下载这个基本的web应用程序，您就可以立即将其部署到Heroku。。链接是https://github.com/hubspot/basewebapp

从那里，从该链接在github上启动回购，并通过部署部署在Heroku上，通过自动部署，在VSC或github上进行更改，更改适用于Heroku的网页/网络应用程序。

如果你需要任何其他帮助，请随时联系我。我已经在Heroku应用程序上冲浪几周了。

查看www.conid.dev了解到目前为止我发布的