比肩vercel的nuxt自动化部署，nuxthub+github+cloudflare

堪比vercel的自动化nuxt部署，是github+cloudflare+nuxthub的组合。

代码是托管到github上，web服务器是cloudflare提供，对照的就是vercel，项目对接管理的是nuxt出品的nuxthub。nuxthub通过安装本地的管理软件，对本地项目进行打包上传到github，再通过cloudflare提供的app_key管理权限，操作cloudflare进行部署工作，这个操作只需操作一次。之后每次只需要将更改的代码提交到github后，cloudflare会进行自动化的部署，应该是nuxthub在初次部署的时候，对cloudflare与github进行了hook钩子绑定了，就像vercel那样，github刚更新，vercel就会自动拉取github的更新版本，然后进行打包部署更新。

具体操作步骤如下：

1.建立空白nuxt项目，使用官方ui，代码：

Nuxt Starter template makes it easy to get started with Nuxt UI

TypeScript 复制代码

npx nuxi@latest init -t ui

然后执行命令，并启动，测试项目建立是否成功。

TypeScript 复制代码

pnpm install    # 安装依赖包
pnpm dev        # 启动项目

TypeScript 复制代码

Nuxt 3.13.2 with Nitro 2.9.7                                                                                   11:08:28        
                                                                                                               11:08:29        
  ➜ Local:    http://localhost:3000/
  ➜ Network:  use --host to expose

ℹ Using default Tailwind CSS file                                                            nuxt:tailwindcss 11:08:31
ℹ Using local storage from .data/hub                                                                 nuxt:hub 11:08:31
  ➜ DevTools: press Shift + Alt + D in the browser (v1.6.0)                                                    11:08:32        

ℹ Nuxt Icon server bundle mode is set to local                                                                11:08:32
✔ Nuxt Icon discovered local-installed 1 collections: heroicons                                               11:08:34
ℹ Tailwind Viewer: http://localhost:3000/_tailwind/                                          nuxt:tailwindcss 11:08:34
✔ Vite client built in 35ms                                                                                   11:08:35
✔ Vite server built in 2217ms                                                                                 11:08:37
✔ Nuxt Nitro server built in 1247 ms                                                                    nitro 11:08:39
ℹ Vite client warmed up in 2817ms                                                                             11:08:42
ℹ Vite server warmed up in 3577ms

nuxt默认启动端口是3000，用浏览器打开查看 http://localhost:3000/

http://localhost:3000/_tailwind/ 这个链接打开的是tailwindcss的参考样例。

然后就是安装nuxthub包：

TypeScript 复制代码

npx nuxi module add hub

然后是安装 wrangler 包，这个包是操作cloudflare的包，

TypeScript 复制代码

pnpm add -D wrangler

详见：https://hub.nuxt.com/docs/getting-started/installation

部署到nuxthub上，使用这个命令：

TypeScript 复制代码

npx nuxthub deploy

部署的时候，可能跟第三步是相互联系的，这一步应该是在上传代码到github之后执行，过程中还需要下载一个Windows版本的软件，保障这个命令的顺利执行。这个命令多多次执行，也可以只执行一次就可以了，之后只需要将代码上传到github后，nuxthub和cloudflare会自动更新项目，因为nuxthub和cloudflare会有hook与github通信，自动同步。

2.建立空白github项目，并将本地代码上传到github：

TypeScript 复制代码

git commit -m "first commit"
git branch -M main
git remote add origin https://github.com/andux/andux.git
git push -u origin main

使用github推荐的命令，发现不成功，

git: error: src refspec main does not match any

Google了一遍，终于找到解决办法：

The solution was to git commit -am "initial commit"

然后再 git push -u origin main 就可以了。

最后就是执行nuxthub的部署命令：

3.注册登录nuxthub，建立项目关联cloudflare和github

打开hub.nuxt.com，点击右上角的按钮建立项目，我选择已有的git repository项目：

因为是用github帐号登录的nuxthub，会自动关联github项目，选择好github项目后，选择main分支，就是之前上传的分支。填好后，点击下面左边的按钮创建，

选择地区的时候，记得选亚洲区，

关联cloudflare，点击cloudflare创建权限app key的链接后，会自动跳转到cloudflare并创建需要的账户api令牌，权限列表：

记住，要点击nuxthub上面的那个链接，跳转到cloudflare后会自动创建权限选项，有好多权限，有读取的，有编辑的，只有新建链接cloudflare的时候才有，我现在找不到那个链接了。

4.绑定自己的域名

可以在nuxthub上绑定自己在cloudflare上已经托管的域名，就是使用cloudflare的dns托管的域名。

nuxthub会默认绑定2个它自带的域名，后缀是.nuxt.dev和.pages.dev，用来测试还是可以的，不过，我感觉使用自己绑定的域名访问会更快一点，是不是cloudflare的解析速度比nuxt的更快？托管在cloudflare上，会自动带有ssl加密，就是https加密链接，这样就不需要自己去申请免费的ssl证书了，还是非常方便的。

除了default的 .pages.dev的默认域名不能删除，.nuxt.dev的域名可以删除掉，再将自己绑定的域名设置为默认域名primary即可。

至此，github的自动化部署就完成了。之后的所有更新，只需要将代码提交到github后，cloudflare和nuxthub会自动同步。