掘金 人工智能 06月22日
还在手动部署?Claude Code + Playwright MCP 3分钟上线你的项目
index_new5.html
../../../zaker_core/zaker_tpl_static/wap/tpl_guoji1.html

 

本文介绍了利用Claude Code和Playwright MCP组合,实现项目从本地到线上的快速部署。作者分享了如何通过简单的命令和AI的自动化操作,轻松完成服务器配置、环境安装、代码上传等繁琐步骤。整个过程仅需3分钟,极大地提高了部署效率。文章还强调了AI工具带来的工作方式转变,鼓励开发者将更多精力放在创新和价值创造上。

🚀 首先,通过在Claude Code上安装Playwright MCP,为自动化部署做好准备。

🛠️ 其次,准备好你的项目文件,无需修改任何配置,保持原有结构即可。

✨ 关键在于,只需在Claude Code中输入部署指令,AI便会自动完成EdgeOne项目的创建、文件上传、部署和验证等一系列操作。

🌐 重要的是,该方法支持多平台部署,不仅限于腾讯EdgeOne,还包括Cloudflare pages等,并且能够智能处理各种问题,如缺少配置文件、端口冲突等。

大家好,我是志辉,10 年大数据架构,现专注 AI 编程。

今天又在琢磨Claude Code各种骚技巧。

今天带来的就是一键部署项目,从本地到线上只用了3分钟

以前部署个项目要配服务器、装环境、传文件、改配置...现在只需要一句话:"帮我部署这个项目到线上",剩下的Claude全包了!

整个全程全是 Cladue Code 指挥干活,我就输入了提示词。从本地到线上只用了3分钟!以前部署个项目要配服务器、装环境、传文件、改配置...现在只需要一句话,剩下的Claude全包了!

其实可以看到上面的流程行云流水,我就喝了口水的功夫,项目就上线了!

这个组合牛在哪?

以前部署项目那叫一个麻烦呀:

    SSH连接服务器(密码又忘了...)

    安装Node、Nginx各种环境(版本还得对上)

    上传代码(网络慢传半天)

    修改配置文件(这个最容易出错)

    启动服务(各种报错等着你)

现在有了Claude Code + Playwright MCP,这些统统不是事儿!

第一步:安装 playwright MCP

地址:github.com/microsoft/p…

这个居然是微软出品,大厂,应该值得信赖。

那么在 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项目上传部署文件部署并验证应用验证页面测试功能(如果你的提示词加上验证功能,就会有此功能)

比如左边就是自动打开的浏览器,他会自动识别到页面上的元素,自动创建项目

然后就会自动到部署页面,并且还能自己填写项目名称。

自己上传打包好的文件

然后就是部署操作

并且部署好后,它会自动打开预览页

更牛的是这些,这些操作下来

    支持多平台部署
    智能处理各种问题

遇到问题Claude会自动解决:

    部署后自动测试

这个功能太赞了!部署完会自动:

总结

Claude Code + Playwright MCP这个组合真的是部署神器!特别适合:

最重要的是,配置超级简单,使用更简单。以前部署要半小时,现在3分钟搞定,这效率提升不是一点半点!

写在最后

其实今天分享的不仅仅是一个工具,更是一种工作方式的转变。

还记得10年前刚入行时,部署一个项目要熬夜到凌晨,各种配置、各种报错,那时候觉得能独立部署项目就是大神。而现在,AI已经把这些繁琐的工作简化到了一句话。

这让我想到一个问题:当AI帮我们解决了"怎么做"之后,我们是不是该把更多精力放在"做什么"上了?

技术在进步,工具在升级,但创造价值的永远是人的想法。Claude Code帮我们节省下来的时间,不是让我们变懒,而是让我们有更多时间去思考、去创新、去做真正有意义的事。

好了,今天的分享就到这里。如果你也被部署折磨过,赶紧试试这个神器组合!下期我们详细聊聊自动化测试!

安啦,盆友们!


送福利!!!

后台回复:claude ,领取 Claude Code 资料,精心整理,助你精通 Claude Code。

如果你觉得文章还不错,记得「点赞、转发、关注」,也可以动动你的手指点点「爱心」,你的爱心是我的持续输出的动力。我们一起在 AI 爆炸时代,充实自己,迎接 AGI 的到来。

Fish AI Reader

Fish AI Reader

AI辅助创作,多种专业模板,深度分析,高质量内容生成。从观点提取到深度思考,FishAI为您提供全方位的创作支持。新版本引入自定义参数,让您的创作更加个性化和精准。

FishAI

FishAI

鱼阅,AI 时代的下一个智能信息助手,助你摆脱信息焦虑

联系邮箱 441953276@qq.com

相关标签

Claude Code Playwright MCP AI编程 项目部署 自动化
相关文章