求助vercel部署-墙外贴吧

没在vercel上部署过前后端，整个过程大概要多少时间

部署 (Deployment)

[TOC]

注意 (Note)

你需要将你的前端部署到 Vercel，后端是可选的。如果你成功修改了后端并将其部署，你将获得额外加分。
整个过程有几个步骤，请耐心完成每一步。

背景 (Background)

理念 (Rationale)

部署、部署、部署 🚀！虽然让我们的 Airbrb 在本地运行很有趣，但如果你不能把它展示给其他人看，那就没什么意义了 😎！

语境 (Context)

通常情况下，我们需要在终端上运行前端和后端。然而，Vercel 可以帮我们处理这些！我们需要做的就是配置前端的 HTTP 请求，使其指向 部署后的 URL，而不是 localhost URL。

开始 (Getting Started)

确保你位于 Airbrb 仓库中。

任务 (Task)

下面的一些说明提供了图片指南。你可以点击相应的文本来切换它们的可见性——例如：

<details close>
<summary>点击此行文本以切换图片可见性</summary>

</details>

请确保在操作过程中阅读 Vercel 给出的提示。不要盲目照搬给出的指令，因为你需要根据自己的需求修改相应的输入内容。

0. 创建账户

一个私有的 GitHub 账户： Vercel 需要你关联仓库才能进行部署。如果你目前没有账户，请通过以下链接创建一个：https://github.com/signup
一个 Vercel 账户： Vercel 为我们提供了一种无服务器（serverless）的方式来部署后端仓库。设置完全免费，注册时不需要任何支付方式。创建一个账户并选择 Continue with GitHub，以便关联你的账户：https://vercel.com/signup。

为什么要这么做？

<details close>
<summary>我们试图做什么的视觉解释</summary>
我们正在尝试将我们的代码链接到 Vercel。为此，我们将使用 Github 账户作为中介。

</details>

1. 将仓库复制到 GitHub

在一个单独的窗口中，登录你的 GitHub 账户并选择 New repository（新建仓库）。
<details close>
<summary>左上角 > 下拉菜单 > New Repository</summary>
</details>
命名你的仓库，例如 "airbrb-deploy"，并确保选择 Private（私有）。然后点击 Create Repository（创建仓库）。
<details close>
<summary>创建仓库表单 - 详细信息示例</summary>
</details>
万一你错过了，请再次确认 Github 仓库是 私有的 (private)。
页面应该会自动跳转到你创建的仓库。回到你的终端，使用以下代码更新你的 GitHub 仓库。

# 将 <SSH_URL> 替换为你的 Github 仓库的 SSH URL。# SSH URL 可以在你刚刚创建的空 Github 仓库中找到。# 例如：[email protected]:USERNAME/airbrb-deploy.git$ git remote add deploy <SSH_URL>$ git push deploy

运行该命令后，你的 GitHub 仓库应该会填充来自你后端的代码。

注意：每当你想要更新 Github 仓库（从而更新 Vercel）时，请在添加（add）并提交（commit）更改后运行 git push deploy。如果你只运行 git push，这会将更改发送到 Gitlab，而不是 Github。

遇到 "[email protected]: Permission denied (publickey) 或类似的权限错误？你需要将 SSH-Key 添加到 Github！就像我们在 git-intro 中为 Gitlab 做的那样。请参阅下面的说明，然后尝试再次推送。

生成新的 SSH 密钥（可选）：https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent
将 SSH 密钥添加到 Github：https://docs.github.com/en/authentication/connecting-to-github-with-ssh/adding-a-new-ssh-key-to-your-github-account

2. 使用 Vercel 部署前端

Vercel 是一家云平台服务公司。Vercel 的架构建立在可组合性 (Composability)之上。

添加并提交所有更改，然后将它们推送到仓库：
```
$ git push deploy
```
如果你忘记 add、commit 和 push deploy，稍后可能会遇到 404 not_found 错误。
在 Vercel 主页上，登录 Vercel，然后选择 Add New... 按钮和 Project 选项。
<details close>
<summary>左上角 > Add New > 下拉菜单 > Project </summary>
</details>
在 GitHub 创建的仓库上选择 Import（导入）。
<details close>
<summary>选择 Github 作为提供商 (Provider)</summary>
</details>
<details close>
<summary>Import Git Repository > Import </summary>
</details>
看不到你的 github 仓库？点击 Adjust GitHub App Permissions → 链接并按照说明操作。
选择 Deploy（部署）来部署你的仓库，稍等片刻等待构建完成。确保选择正确的部署目录，例如 backend 或 frontend，或者你可以分别为前端和后端创建独立的 github 仓库。
<details close>
<summary> Configure Project > Deploy </summary>
</details>
如果成功，你应该会看到 "Congratulations"，并在 Dashboard（仪表盘）上看到你的部署状态为绿色的 "Ready"。
首先，点击页面底部的 Inspect Deployment。你应该会进入 Deployment Details 页面。
如果构建日志提到 npm ERR! code 1，请回到你的项目并点击 Settings 标签。向下滚动将 Node 版本更改为 16。之后，回到 Deployments 标签，点击你最新部署的省略号按钮。然后点击 Redeploy。
让你的部署 URL 包含你的 zID。进入 Project Settings > Domains > Edit，修改你的域名以包含你的 zID，例如 z1234444-bigbrain-fe-deploy.vercel.app。
<details close>
<summary> Homepage > Project Menu > Settings </summary>
</details>
<details close>
<summary> Project Settings > Domain > Edit </summary>
</details>
恭喜！你现在已经把前端部署到网上了……算是吧。如果你访问你的部署 URL，你应该能看到你的前端在运行！
然而，一旦你尝试向后端发起 API 调用，就会开始遇到服务器错误。这没关系，因为后端部署是可选的，如果你成功修改并部署了后端，将获得加分。

5. 部署你的后端

与前端不同，配置后端部署可能比较困难。你需要弄清楚如何将 Vercel 与 Upstash 结合使用进行 key-value（键值）存储，并修改后端处理数据库操作的方式以使用 Upstash。可能还需要在后端仓库中添加 vercel.json 文件来配置部署。

你会发现这些资源很有帮助：

测试并提交你的 DEPLOYED_URL

打开 progress.csv 并将 FE_DEPLOYED_URL 修改为你新部署的站点，例如 https://z1234444-anything-you-want.vercel.app。
提醒：FE_DEPLOYED_URL 必须且只能包含一次你的 zID。 你可能需要去 Settings > Domains > 编辑你的部署 URL 以包含你的 zID。
你不需要在 progress.csv 中添加 BE_DEPLOYED_URL，但如果你部署了后端，你需要将部署好的前端与部署好的后端连接起来。

常见问题

<details close>
<summary> 1. Vercel 没有部署你期望的代码 </summary>

记得执行 git add，git commit 和 git push deploy。这将确保 Github 以及 Vercel 收到你更新的代码。
将代码推送到 GitHub 后，确保 GitHub 上的 commit hash 与 Vercel 上的一致。
你也可以通过点击 Your project > Source 来检查 Vercel 是否有正确的文件。确保每个文件都符合预期。例如检查 DEPLOYED_URL 是否已更新。

</details>
<details close>
<summary> 2. 部署 URL 格式不正确 </summary>
确保 URL 以 http 或 https 开头。同时检查不要以 / 结尾。
</details>
<details close>
<summary> 3. 你在某个时候切换了分支 </summary>
进入 Settings > Git。向下滚动到 Production Branch 并更改分支名称。
此外，如果你进入 Deployments 标签页，你可能会看到它显示 Preview（预览），如下图所示。对于最新的部署，点击最右侧的省略号图标（三个水平点），然后点击 'Promote to production'（提升为生产环境）。

</details>

调试技巧

Your project > Deployment > 点击最新的 deployment > Log
console.log 不会输出到终端，而是输出到这里。
你的服务器或函数实现中的任何 console.log 语句也会显示在这里。

</details>
<details close>
<summary> 2. 一般技巧和额外资源 </summary>
调试可能需要频繁运行 git push deploy。请记住，每当这样做时，都会重新部署你的项目。Vercel 每天只允许 100 次部署。
如果在设置过程中部署失败，请通过 Your project > Deployment > 点击最新的 deployment > Read the deployment details 来阅读错误信息。
Vercel 错误代码
Upstash RESTful API
</details>

提交

在你的 master 分支上使用 git 进行 add、commit 和 push。这次，不要使用 git push deploy，因为那只会更新 Vercel 和 Github，而不会更新 Gitlab。你的 GitLab 流水线（pipeline）也应该通过。
在该网站上检查你的代码是否已上传到 Gitlab 仓库（你可能需要刷新页面）。

如果你已经将最新的更改推送到 Gitlab 的 master 分支，就不需要采取进一步行动了！在截止日期和时间，我们会自动从 Gitlab 的 master 分支收集你的作业。

求助vercel部署