最近有不少朋友私聊问我代码写好了,本地页测试完了,但是域名上哪买,买完域名后怎么把代码部署到服务器上。我相信这些基建问题成了不少出海新朋友的拦路石,所以今天这篇文章我手把手带着大家,过一遍流程,希望大家能突破这第一关。
原文地址:
mp.weixin.qq.com(图文搭配,效果更佳)
1.域名购买
市面上有很多域名购买商,比如Godaddy,Namecheap,Prokbun,Namesilo,还有好多好多,我用的比较多的是Porkbun,基本上不会有什么特别大的区别,随便选一个注册就好
(小Tips:我到目前为止买了95个域名,我对比过很多家价格,Porkbun是我认为相对来说最便宜的,所以我用的最多,几乎所有域名都在这购买)
2.绑定域名到Cloudflare
买完域名之后,我们需要把域名绑定到Cloudflare上,你也可以选择不绑定,但是绑定的好处是:
网站更快 🚀Cloudflare 有全球服务器,会帮你的用户自动连接到最近的服务器,打开网页更快。
还能缓存(存储)你的网站内容,减少服务器的压力,提高访问速度。
网站更安全 🔒Cloudflare 自带防火墙,可以拦截恶意攻击(比如DDoS攻击),防止网站被黑。提供免费的 SSL 证书(小锁头🔒),让你的网站支持 HTTPS,提高安全性。
省钱省资源 💰Cloudflare 缓存你的网站内容,减少服务器的流量消耗,降低成本。你的网站即使被大量访问,也不会轻易崩溃。
管理更方便 🎛️你可以在 Cloudflare 后台直接修改域名解析,不用去服务器端折腾。提供防止域名被劫持的保护,防止别人偷偷改你的域名解析。
这里我以Porkbun为例,实操一下如何绑定域名到Cloudflare,如果你是在别的域名交易平台购买的域名,这里步骤可能会有一点点不一样,但大体是一致的。
打开Cloudflare,注册登录后进入到后台界面,然后点击添加域
接着填入你刚才在Porkbun上购买的域名(不带https,比如网址是
baidu.com,那么域名就是baidu.com)接着下面不需要任何操作,直接点继续
接下来Cloudflare会让你选择计划,我们直接选择最底下的Free就好,不需要支付任何费用
接着你会进入到一个查看DNS记录的页面,这个不用管,直接拉到最下面,点击继续前往激活在下一个页面,你会看到我有两个可以复制的部分,我们需要把这两个网址复制进去Porkbun中在Porkbun中,找到你刚才买的域名,鼠标放上去,底下会显示DNS和NS,我们点开NS,把原本存在的NS记录删除,把从Cloudflare获取到的两个ns网址复制进去,然后点击保存
到这一步域名就绑定好了,等个10分钟左右Cloudflare就会发邮件给你提醒你已经绑定好了接下来我们回到最初进入到Cloudflare的后台,状态这里显示活动,就是绑定好了。如果还没绑定好,就等个10-20分钟,之后再去查看就好了
3. 服务器部署
现在建站基本上不需要自建服务器,有很多无服务器部署的方案,会节省很多开发的时间,让我们把更多时间花在找流量上。
目前用的最多的就是Cloudflare(人称出海赛博菩萨)和Vercel
我简单说一下这两个的区别:
首先两个都是按量收费,用多少收多少钱,而且每个月有免费额度,对于新手练习来说完全足够,等你真要给钱了,也代表你已经成长了,准备起飞了,在这里Truman祝大家早日收到Vercel和Cloudflare的账单
Cloudflare分为Pages和 Worker
Pages只能部署静态网站,而且代码文件最大不能超过25mb
Worker主要负责动态网站(最流行的Next.js就是部署在这)
(对静态和动态网站的定义自行问ai,这里不做解释)
优点:收费比Vercel便宜很多
缺点:对于最常用的Next.js支持方面不是很友好,相对Vercel来说部署方面要花稍微多一些时间
Vercel:
Next.js就是Vercel团队开发出来的,所以对Next.js的支持很好。Vercel静态动态网站都能部署,我的Next.js项目一般都是先部署在Vercel,因为比部署在Cloudflare Worker省事很多,等流量高了,每个月的额度不够用了,再转过去。前期不要花这么多时间在开发上,重点还是找流量,找到流量了什么都好说
好,我们继续,我先讲一下Cloudflare Pages,静态网站首选
无论你是用Cloudflare还是Vercel来部署你的代码,你都需要用到Github,因为Cloudflare和Vercel他们可以直接获取你Github库中的代码,然后一件部署,十分方便。
首先我们先下载一个Github Desktop,然后登录你自己的Github账号(
github.com)
如果你还没开始写代码,那你就直接新建一个Repository,这会在你的电脑里面创建一个文件夹,直接在里面写代码就好,然后未来可以直接把这个文件夹上传到Github云端,和Cloudflare,Vercel连接,
如果你之前已经在本地电脑中自己创建了文件夹,并且写了代码,但是还没用到Github Desktop,那你可以这样子
点开Add,找到Add Existing Repository,然后把你代码文件夹的路径放进去,接着和上面做的一样,Push就好
接下来我们打开Cloudflare,点击左侧dashboard,找到pages,然后点击创建
选中pages,然后点击连接到git,会跳转页面让你登陆你的Github
登陆成功后会自动返回这个页面,获取到你Github目前现有的库,找到我们刚才写好的那份文件,右下角开始设置,然后什么都不用点,就点击开始部署就好,过一会部署好了页面会提示
部署成功后我们回到最开始的Pages创建的页面,点击刚才部署成功的网站。Cloudflare会自动分配一个子域名给你,这个域名是有效的,而且别人也可以访问,但还是建议买一个域名,然后绑定
点击进去后,选择自定义域,然后输入我们刚才绑定到Cloudflare的域名(这里必须要域名和cloudflare绑定成功后才能操作),然后一直点确定就好。最后Cloudflare会自动帮你设置dns那些,不用手动。
最后刷新页面显示active就是成功了
接着我们需要回到我们的账户主页,点击进去刚才绑定的域名
点击进去后在左侧dashboard选中ssl,然后第一个overview中点击configure
选择Full,默认是Flexible,但是我们要选择Full,然后保存
接下来还是SSL部分,鼠标点击Edge Certificats,然后往下滑,找到Always use Https,把它勾上,默认是不勾的,这样我们就完整的部署成功,并且绑定了我们的自定义域名了,现在你可以分享你的网址给你的朋友让他们看看你新做的网站。
接下来是Vercel,部署方法和Cloudflare类似,同样是先把代码上传到Github Desktop中,方法前面已经讲过了,这里就不重复了。
接着打开Vercel(
vercel.com),进入的主页面
选择Add New Project
接着在左侧面板登录你的Github账号,选中你刚才新建的仓库,点击import
然后点击Deploy就好
如果你的项目有环境变量(比如Api Key之类的),就需要点击Enviroment Varibles把它放进去,再点击Deploy。
感谢你看到这。
希望你不要被一开始的基建所难到,因为要相信,通往成功的路上总是孤独的,因为很多人已经被挫折打败在了半路上。