使用 Vercel 和 Heroku 部署您的第一个全栈应用程序

部署全栈应用程序可能会让人感到不知所措，特别是如果您是这个过程的新手。然而，像 Vercel 和 Heroku 这样的平台可以让独立部署和管理前端和后端变得简单。本指南将引导您部署基本的全栈应用程序，前端托管在 Vercel 上，后端托管在 Heroku 上。

为什么使用 Vercel 和 Heroku？

维塞尔：

• 针对 Next.js、React 和 Angular 等前端框架进行了优化。
• 通过 Git 集成提供无缝持续部署。
• 提供全局边缘缓存以提高性能。

Heroku：

• 用于部署后端服务和 API 的多功能平台。
• 易于设置环境变量和数据库集成。
• 为初学者提供免费套餐选项，可很好地扩展。

先决条件
在开始之前，请确保您拥有：

1. 已安装 Git 并对版本控制有基本了解。
2. 前端项目（React、Next.js 等）和后端项目（Node.js、Express 等）。
3. Vercel 和 Heroku 上的帐户。
4. Node.js 和 npm 安装在本地计算机上。

第 1 步：准备您的前端代码

1.1 初始化前端存储库
如果您还没有这样做，请将您的前端项目推送到 Git 存储库（GitHub、GitLab 等）：

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  
</your-repo-url>

1.2 优化前端部署
确保您的前端项目已做好生产准备：

• 为 Next.js 或 React 等框架运行 npm run build 以创建优化的生产版本。
• 确保在 .env.local 中或直接在 Vercel 仪表板中设置环境变量（例如 API URL）。

第 2 步：将前端部署到 Vercel

2.1 连接到 Vercel

• 登录 Vercel。
• 单击“新建项目”并导入您的 Git 存储库。

2.2 配置部署设置

• 选择正确的框架预设（例如 Next.js、React）。
• 添加任何必要的环境变量（例如，REACT_APP_API_URL）。

2.3 部署前端
单击“部署”，Vercel 将处理剩下的事情！

• 部署后，您将收到前端的实时 URL。
• 示例：https://your-project.vercel.app。

第 3 步：准备后端代码

3.1 初始化后端存储库
将您的后端项目推送到单独的 Git 存储库：

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  
</your-repo-url>

3.2 添加 Procfile
Heroku 使用 Procfile 来定义如何运行应用程序。在项目的根目录中创建一个 Procfile：

git init  
git add .  
git commit -m "Initial commit"  
git remote add origin <your-repo-url>  
git push -u origin main  
</your-repo-url>

将 index.js 替换为您的入口点文件。

3.3 设置环境变量
确保所有必需的环境变量（例如数据库 URL、API 密钥）都存储在 .env 中。 Heroku 允许您稍后在仪表板中配置这些。

第 4 步：将后端部署到 Heroku

4.1 创建 Heroku 应用程序

1. 登录 Heroku。
2. 点击“新建”→“创建新应用”。
3. 为您的应用选择一个唯一的名称和区域。

4.2 部署后端

1. 导航到“部署”选项卡。
2. 连接您的 GitHub 存储库。
3. 启用自动部署或通过单击“部署分支”手动部署。

4.3 配置环境变量
在“设置”选项卡中，添加环境变量：

• 示例：DATABASE_URL、SECRET_KEY。

第 5 步：将前端连接到后端
更新您的前端项目以指向 Heroku 后端：

• 将后端 URL 设置为环境变量：z

web: node index.js  

• 在前端代码中，将硬编码的 API URL 替换为 process.env.REACT_APP_API_URL：

REACT_APP_API_URL=https://your-backend-app.herokuapp.com  

第 6 步：测试和调试

1. 从 Vercel 访问您的前端 URL 并确保所有功能正常运行，包括 API 调用。
2. 使用 Heroku 的日志来调试后端问题：

const response = await fetch(`${process.env.REACT_APP_API_URL}/api/endpoint`); 

1. 监控 Vercel 的构建日志以了解任何与部署相关的问题。

最佳实践

1. 版本控制：使用 Git 分支进行开发，仅在测试后合并更改。
2. 错误处理：在后端实现正确的错误响应以帮助调试。
3. HTTPS：确保 Vercel 和 Heroku URL 使用 HTTPS 进行安全通信。
4. CORS：在后端配置 CORS 策略以允许来自前端 URL 的请求。

结论
使用 Vercel 和 Heroku 部署全栈应用程序非常简单且适合初学者。通过 Vercel 处理前端，Heroku 为后端提供支持，您可以专注于构建功能，而不用担心基础设施。

立即开始部​​署，让您的项目变为现实！ ？

以上是使用 Vercel 和 Heroku 部署您的第一个全栈应用程序的详细内容。更多信息请关注PHP中文网其他相关文章！