如何在GitHub和Heroku上部署MERN栈app？
MERN栈是一种用于构建现代Web应用程序的技术栈，它包括MongoDB作为数据库，Express作为后端框架，React作为前端框架，以及Node.js作为运行环境。在GitHub和Heroku上部署MERN栈应用程序的步骤如下：
- 在GitHub上创建一个新的代码仓库，用于存储你的MERN栈应用程序的源代码。将你的本地代码推送到GitHub仓库中。
- 在Heroku上创建一个新的应用程序。登录到Heroku账户，点击"New"按钮，选择"Create new app"。为你的应用程序选择一个唯一的名称，并选择一个服务器位置。
- 在Heroku上设置环境变量。在你的Heroku应用程序的设置页面中，找到"Config Vars"部分。添加你的应用程序所需的环境变量，例如数据库连接字符串、API密钥等。
- 在Heroku上部署后端。在你的MERN栈应用程序的根目录中，创建一个名为"Procfile"的文件，并添加以下内容：
web: node server.js这将告诉Heroku使用Node.js运行你的后端服务器。将你的代码推送到Heroku仓库中。
- 在Heroku上部署前端。在你的MERN栈应用程序的根目录中，进入前端代码所在的目录。运行以下命令安装依赖项：
npm install然后，运行以下命令构建前端应用程序：
npm run build将构建后的前端代码推送到Heroku仓库中。
- 连接MongoDB数据库。在Heroku的应用程序设置页面中，找到"Add-ons"部分，搜索并添加MongoDB数据库插件。配置数据库连接，并将连接字符串添加到你的环境变量中。
- 启动应用程序。在Heroku的应用程序页面中，点击"Deploy"选项卡，选择"Manual deploy"，然后点击"Deploy Branch"按钮。Heroku将自动构建和部署你的MERN栈应用程序。
完成以上步骤后，你的MERN栈应用程序将成功部署在GitHub和Heroku上。你可以通过访问Heroku应用程序的URL来访问你的应用程序。
相关·内容
1回答
我使用ReactJS进行前端开发已经有一段时间了，现在我决定将我的技能提升到MERN (MongoDB - Express - React - Node)的全栈。我已经成功地开发了我的MERN应用程序，但部署过程失败。 我尝试使用“从GitHub到Heroku”的方法，您首先将所有内容上传到GitHub，然后在Heroku上使用它。我甚至无法将我的文件结构上传到GitHub，所以我需要一些帮助。 我在想，也许我的文件
浏览 13提问于2020-12-28得票数 0
回答已采纳
2回答
我计划将一个MERN栈应用部署到heroku (youtube上跟踪Traversy Media )，我想知道在客户端隐藏api密钥(google地图)的最佳实践是什么？我知道如何在heroku中将env变量添加到MERN的服务器端，但是可以将env变量添加到MERN的客户端吗？
浏览 1提问于2019-11-21得票数 3
我已经创建了一个应用程序，其中包含了一个GraphQL API和一个React客户端。我想把整个应用程序部署到Heroku，但我不太清楚该如何做。在我的本地机器上，我让我的服务器运行在localhost:4000上，我的客户机运行在localhost:3000上，我的客户端使用@apollo/client向我的服务器发出请求。我是否需要将两个不同的应用程序部署到Heroku，还是有方法将这两个应用部署为一个应用程序？
浏览 6提问于2022-04-19得票数 1
我正在尝试将本地MERN应用程序部署到Heroku。应用程序脱机工作。在部署之后，当单击"Open“时，我看到的只是后端的数据。而不是前端。这里的部署：。Github回购："scripts": { "server": "nodemonbuild -
浏览 1提问于2019-05-10得票数 3
我的MERN项目在本地运行得很好，但当我部署它时，我在获取用户时遇到了401错误。Heroku没有设置客户端cookie。然后我在google firstı上搜索，把我的cookie-session改成express-session和其他一些配置，仍然不能在Heroku上工作。https://github.com/olcaykaplan/passport_google cors： app.use(
cors(
浏览 11提问于2021-10-08得票数 0
回答已采纳
我遵循这个指南来部署MERN堆栈应用程序，使用heroku和github pages -https://github.com/juliojgarciaperez/deploy-mern Q1。我是否需要创建两个不同的存储库，一个用于后端，一个用于前端以连接到heroku？( heroku管道的t.ex后端存储库)我最初在同一个存储库下开发了后端和前端。 Q2。我设法获得了指南中
浏览 22提问于2020-10-05得票数 0
我对开发和Heroku都是新手，但我正在尝试部署一个react应用程序。当我在本地运行应用程序时，我可以很好地运行它，但是当我尝试部署到Heroku时，我总是遇到问题。它看起来构建成功了，但是我总是出现一个应用程序错误，当我检查heroku日志时，我得到了以下信息：
当我搜索这个语法错误时，它似乎相当流行，看起来可能与我的index.js文件被埋在client ->但我不明白的是，为什么这个导入错误不会在本地给我带来任何麻烦，只有当我尝试推送到Heroku时才会
浏览 1提问于2020-01-16得票数 1
2回答
在提出我的问题之前，我想让您知道，我刚刚开始开发web应用程序，并且只部署了几个项目在Netlify上.Besides英语并不是我的母语sure.As为主题，我开发了一个mern应用程序，主要激励 .Our我无法将它部署到netlify，因为我已经在主文件夹上获得了用于MUI服务器端呈现的template.js，而不是index.html.When我在搜索这个主题，我遇到了使用docker和nginx的解决方案，但是我几乎不了解它们，也不知道在没有youtube tutorials.For结论的情况下学习
浏览 5提问于2021-11-06得票数 0
回答已采纳
我就是这样做的：我的应用程序是一个现有的项目我怎么才能从Heroku那里拉出来？我应该使用哪个分支的名称？编辑heroku https://git.heroku.com/myapp.git (fetch)
heroku https:&#x
浏览 0提问于2016-10-24得票数 1
回答已采纳
我已经将这个pdftk构建包添加到我在Heroku上的免费应用程序：。我无法将我的应用程序部署到Heroku：-----> Checking for additional extensions to install...cp: cannot stat 'binaries-heroku-18&#x
浏览 2提问于2019-04-20得票数 1
我正在尝试学习GitHub操作中的部署。在我在GitHub存储库中的GitHub文件中，我通过从复制和修改将以下任务添加到Heroku中进行部署 runs-on: ubuntu-latestheroku_api_key: ${{secrets.HEROKU_API_KEY}}
heroku_app_name: &q
浏览 18提问于2022-06-27得票数 -3
2回答
我有Nodejs，ReactJS和ReactJS本地应用程序，MERN应用程序部署在Heroku上，使用免费dynos。会话会在一段时间后自动超时。我希望永远保持会期不变。在初始化会话时，我没有设置任何expiry time或MaxAge： secret: 'thesecret', resave: false
app.use(passport
浏览 0提问于2019-04-03得票数 1
回答已采纳
1回答
我有一个在Heroku上运行的节点应用程序。我正在使用python中的selenium抓取一个网站，并在需要的时候从我的节点应用程序中调用python脚本。我在mac上安装了PhantomJS，当我在本地运行应用程序(node index.js)时，一切都运行得很好。-2.1.1-然而，在Heroku上</em
浏览 2提问于2017-07-07得票数 2
我安装了巨机器人，heroku和hipchat。我将Hubot部署到Heroku，并在hipchat上进行了测试，我输入了一些命令行示例：@hubot help，@hubot映像me“hubot”.而且效果很好。但是在我的项目中，我需要使用hipchat将我的项目部署到heroku。例如，当我在hipchat上输入是：@hubot部署应用程序时，我的项目将被部署到heroku (而不是在终端上绑定："git
浏览 4提问于2015-02-10得票数 0
回答已采纳
我有一个MERN应用程序，我想部署到render.com。我有两个简单的问题：
在我看过的所有教程中，都有单独的github repos --1用于前端，1用于后端。因此，在render.com上，当他们想要部署时，他们可以简单地选择前端或后端回购。但是，我的文件夹结构不是这样的-我的文件夹是一个主要的github回购，在这个回购，有一个前端文件夹和一个后端文件夹。我该如何解决这个问题？当我给(或heroku，netlify等)时访问我的git
浏览 4提问于2022-10-14得票数 1
1回答
为了获得部署在Heroku上的MERN，我在Heroku上的Config Vars中添加了MONGOBD_URI作为密钥，并添加了MongoDB Atlas值。Heroku直接连接到Github回购系统，而不是通过Heroku CLI连接。我把它设置为自动部署，但最近手动重新部署了它。这是Heroku构建日志：
-----> Node.js app dete
浏览 2提问于2020-12-19得票数 0
我做了一个全栈的mern应用程序，并在heroku中托管了nodejs后端，前端运行在netlify上。所有的.env变量都是为heroku和netlify设置的，我还设置了cors()。这是我的heroku服务器(后端应用编程接口) 的链接import React, { useEffect, useState, useRefhttps://ural-shop.herokuapp.com
浏览 16提问于2021-06-07得票数 0
我是一个前端开发人员，并试图进入全栈。我做了一个简单的应用程序来理解MERN堆栈的工作原理。我使用这个(https://github.com/mars/heroku-cra-node)作为构建它的基础。该应用程序在localhost中运行良好，但当我将其部署到Heroku时，我收到了一个Cannot get / error。错误 错误:无法加载资源:服务器响应状态为404 (未找到) Loading heroku <em
浏览 29提问于2020-10-16得票数 0
回答已采纳
1回答
我已经完成了一个项目，并试图部署到heroku。我使用的是Reactjs前端和表达式Nodejs，后端是mongoose和mongodb。它在本地主机上工作，但是当我运行、构建它并尝试将它部署到heroku上时，它会给出一个应用程序错误。是否需要在Heroku 20堆栈上使用mongoClient，我也会收到升级到新Heroku版本的警告，我尝试使用npm升级heroku升级<em
浏览 12提问于2022-07-31得票数 1
我正试着在heroku上设置selenium。我一直在向寻求帮助。在此基础上，我安装了列出的2个buildbacks。我使用的是cedar-14，因为不支持16堆栈。当我运行时：=== Buildpack URLs2. https://github.com/heroku/heroku-buildpack-c
浏览 3提问于2018-02-11得票数 6
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
