如何用vercel部署自己的网站

_geekris1
6,503 阅读3分钟

前文

本文包含三个部分

  • 如何将项目部署在vercel上(已有项目,新增项目)
  • 如何绑定自己的域名
  • 如何添加路由的解析

如何将项目部署在vercel上

首先我们进入vercel的网站(vercel.com/), 使用github登陆 登陆后，点击Add New... ，然后选择Project

1.jpg

已有项目

在左侧选择你要添加的项目，然后点击import即可

image.png

然后在跳转的页面里，可以修改其名称(不喜欢改的可以不改:)，再点击Deploy

image.png

然后就会开始构建我们的项目 ，我们可以点击左上角的logo，查看我们所有的项目，然后再点击进刚刚创建的项目

image.png

如果构建完成，这个url就是当前我们项目的url，点击即可查看页面

image.png

新增项目

还是先点击Add New... ，然后选择Project，然后在选择Browse All Templates ，再选择一个你熟悉的模板

image.png

这里我们就先选择Create React App

image.png

然后我们可以自己修改一个名字，再选择Create

image.png

接下来就是将代码推送到github，然后进行构建，我们也可以同上，点击左上角logo，点击刚创建的项目，查看页面的url。

同时我们github上也有刚创建的项目，我们可以拉到本地进行修改

image.png

如何绑定自己的域名

在这一步你需要一个域名。 以下列子以阿里云域名举例(其他的也可以，只是我在这买的...)

首先我们还是先点击左上角logo，选择自己要修改域名的项目
然后再选择Settings，再选择左边的Domains,然后再右边输入框输入你自己的域名

image.png

第一次因为没添加解析，所以肯定会失败，我们主要记住这个value值

image.png

接下来我们到阿里云域名控制台，找到自己的域名，点击解析

image.png

然后我们再选择添加记录

image.png

接下来右侧会出一个弹窗

如果刚刚的value是一个ip，你就选择第一个(也是默认的)，如果刚刚的value是一个域名，你就选择第二个CNAME

image.png

接下来是主机记录，如果你是访问www.geekris1.com，主机记录填www即可。

如果你还有很多网站需要部署，可以在主机记录填写*,这样所有前缀都可以解析。

image.png

在就是记录值，填写刚刚的value即可。

image.png

最后我们点击确认，域名解析就完成了。

如何添加路由的解析

域名配置完后，如果我们直接在浏览器内输入https://www.geekris1.com/links，这样页面会报404，这里我们需要在项目内根目录加一个vercel.json的配置。

  • source指向你要修改的路由名称，比如/links,也可以输入/(.*)匹配所有路由
  • destination指向对应路由加载的文件
{
  "rewrites": [
    {
      "source": "/(.*)",
      "destination": "/index.html"
    }
  ]
}

以上就是本文的全文了 (-:

avatar
文章
阅读
粉丝