大家好,我是志辉,10 年大数据架构,现专注 AI 编程。
今天又在琢磨Claude Code各种骚技巧。
今天带来的就是一键部署项目,从本地到线上只用了3分钟!
以前部署个项目要配服务器、装环境、传文件、改配置...现在只需要一句话:"帮我部署这个项目到线上",剩下的Claude全包了!
整个全程全是 Cladue Code 指挥干活,我就输入了提示词。从本地到线上只用了3分钟!以前部署个项目要配服务器、装环境、传文件、改配置...现在只需要一句话,剩下的Claude全包了!
其实可以看到上面的流程行云流水,我就喝了口水的功夫,项目就上线了!
这个组合牛在哪?
以前部署项目那叫一个麻烦呀:
SSH连接服务器(密码又忘了...)
安装Node、Nginx各种环境(版本还得对上)
上传代码(网络慢传半天)
修改配置文件(这个最容易出错)
启动服务(各种报错等着你)
现在有了Claude Code + Playwright MCP,这些统统不是事儿!
第一步:安装 playwright MCP
这个居然是微软出品,大厂,应该值得信赖。
那么在 Claude Code 上安装很简单,直接就在命令行输入如下命令就可以。
claude mcp add playwright -s user -- npx @playwright/mcp@latest验证
启动 claude 后,直接就在命令行输入 /mcp 就可以看到当前 mcp 的状态。
如果看不到绿色的「connected」状态,那么看看上面的 mcp 添加语法是否准确,或者退出 Cladue Code 的命令行,重新进入。
第二步:准备你的项目
这个项目也是我之前做的 TodoList 的应用,超级炫酷的应用。结构大概如下:
├── index.html├── package-lock.json├── package.json├── playwright.config.js├── postcss.config.js├── scripts│ ├── deploy-edgeone.js│ ├── deploy.js│ ├── prepare-deploy.js│ ├── prepare-edgeone.js│ └── simple-edgeone-deploy.js├── src│ ├── App.tsx│ ├── components│ │ ├── FilterBar.tsx│ │ ├── KeyboardHelp.tsx│ │ ├── LoadingSpinner.tsx│ │ ├── ParticleBackground.tsx│ │ ├── StatsPanel.tsx│ │ ├── TodoForm.tsx│ │ ├── TodoItem.tsx│ │ └── TodoList.tsx│ ├── hooks│ │ ├── useKeyboard.ts│ │ ├── useTheme.ts│ │ └── useTodos.ts│ ├── index.css│ ├── main.tsx│ ├── types│ │ └── index.ts│ └── utils│ └── index.ts├── tailwind.config.js├── tests│ └── app.spec.js├── tsconfig.json├── tsconfig.node.json└── vite.config.ts什么都不用改,保持原样就行。
第三步:一键部署(重头戏来了)
在Claude Code中直接输入:
使用 playwright mcp 工具帮我部署到腾讯的 EdgeOne 上,部署好后并进行页面功能完整测试。对于 Claude Code 🐂🍺之处就在于,它会生成 Todos,然后依次完成这些任务列表。
然后就看Claude开始表演了!它会自动:
- 准备EdgeOne部署包导航到EdgeOne控制台创建新的EdgeOne项目上传部署文件部署并验证应用验证页面测试功能(如果你的提示词加上验证功能,就会有此功能)
比如左边就是自动打开的浏览器,他会自动识别到页面上的元素,自动创建项目
然后就会自动到部署页面,并且还能自己填写项目名称。
自己上传打包好的文件
然后就是部署操作
并且部署好后,它会自动打开预览页
更牛的是这些,这些操作下来
- 支持多平台部署
- 不只是腾讯 EdgeOnes,还支持:Cloudflare pages(自测通过)只需要换个平台名就行,就可以部署其他平台,如果你有用其他平台也可以加入测试来
- 智能处理各种问题
遇到问题Claude会自动解决:
- 缺少配置文件?自动生成端口冲突?自动更换依赖版本不对?自动修复
- 部署后自动测试
这个功能太赞了!部署完会自动:
- 检查页面是否正常访问测试主要功能是否可用生成部署报告
总结
Claude Code + Playwright MCP这个组合真的是部署神器!特别适合:
- 不想折腾服务器的开发者需要快速上线的项目想提高部署效率的团队
最重要的是,配置超级简单,使用更简单。以前部署要半小时,现在3分钟搞定,这效率提升不是一点半点!
写在最后
其实今天分享的不仅仅是一个工具,更是一种工作方式的转变。
还记得10年前刚入行时,部署一个项目要熬夜到凌晨,各种配置、各种报错,那时候觉得能独立部署项目就是大神。而现在,AI已经把这些繁琐的工作简化到了一句话。
这让我想到一个问题:当AI帮我们解决了"怎么做"之后,我们是不是该把更多精力放在"做什么"上了?
技术在进步,工具在升级,但创造价值的永远是人的想法。Claude Code帮我们节省下来的时间,不是让我们变懒,而是让我们有更多时间去思考、去创新、去做真正有意义的事。
好了,今天的分享就到这里。如果你也被部署折磨过,赶紧试试这个神器组合!下期我们详细聊聊自动化测试!
安啦,盆友们!
送福利!!!
后台回复:claude ,领取 Claude Code 资料,精心整理,助你精通 Claude Code。
如果你觉得文章还不错,记得「点赞、转发、关注」,也可以动动你的手指点点「爱心」,你的爱心是我的持续输出的动力。我们一起在 AI 爆炸时代,充实自己,迎接 AGI 的到来。
