基于Netlify + Localtunnel 实现本地项目“无服务器”部署上线

基于Netlify + Localtunnel 实现本地项目"无服务器"部署上线

  • [1. 先看效果图](#1. 先看效果图)
  • [2. 实现步骤](#2. 实现步骤)
    • [2.1 分两步走](#2.1 分两步走)
    • [2.2 netlify 部署前端资源](#2.2 netlify 部署前端资源)
    • [2.3 Localtunnel 映射 localhost 服务](#2.3 Localtunnel 映射 localhost 服务)
  • [3. 其它工具内网穿透工具对比](#3. 其它工具内网穿透工具对比)
  • [4. 总结](#4. 总结)
  • [5. 参考资料](#5. 参考资料)

1. 先看效果图

2. 实现步骤

2.1 分两步走

  • 前端资源部署:使用 netlify 实现
  • 本地服务器映射到互联网:使用 Localtunnel 实现

2.2 netlify 部署前端资源

  • Netlify官网注册账号

  • 创建站点

    • 登录成功后sites页面点击 Add new site,选择 Import an existing project
    • 可从 githubgitlabBitbucket 等选择项目源码
  • Netlify默认会为你的站点启用HTTPS,无需进行任何配置

  • 自定义域名

  • 部署完成

  • 更新部署

2.3 Localtunnel 映射 localhost 服务

  • Localtunnel 为 npm 模块,使用 npm 命令全局安装依赖 npm install -g localtunnel
  • 映射本地服务指定端口(8000)到 https地址 lt -p 8000
  • 映射成功截图如下,即可通过 https://rude-swans-refuse.loca.lt 地址访问 localhost:8000 服务

3. 其它工具内网穿透工具对比

工具 优点 缺点 适用场景
Ngrok 文档丰富、易用性强 免费版域名随机、稳定性一般 临时测试、快速部署
localhost.run 无需安装客户端 仅限Linux/Mac、功能单一 极简临时需求
FRP 完全免费、高度自定义 公网服务器、配置复杂 长期稳定项目
Cpolar 界面友好、配置直观 免费额度有限 个人开发者轻量级需求
Chisel 开源、高性能 依赖命令行操作;需公网服务器 技术向用户、数据传输
  • 推荐场景‌:
    • 临时调试‌:优先选 Ngrok 或 localhost.run‌
    • 长期项目‌:推荐 FRP 自建服务或 Cpolar‌
    • 技术探索‌:尝试 Chisel 或开源方案‌

4. 总结

  • 使用 netlify 部署前端静态资源(html/js/css/images等)
  • 使用 Localtunnel将localhost服务映射到https

5. 参考资料

相关推荐
佳腾_3 小时前
【分布式系统中的“瑞士军刀”_ Zookeeper】三、Zookeeper 在实际项目中的应用场景与案例分析
分布式·zookeeper·云原生
工业甲酰苯胺5 小时前
K8s新手系列之K8s中的资源
云原生·容器·kubernetes
weisian1515 小时前
云原生--核心组件-容器篇-6-Docker核心之-镜像仓库(公共仓库,私有仓库,第三方仓库)
docker·云原生·容器
冼紫菜6 小时前
[特殊字符] Docker 从入门到实战:全流程教程 + 项目部署指南(含镜像加速)
运维·分布式·后端·docker·云原生·容器
BLEACH-heiqiyihu7 小时前
k8s-Pod生命周期
云原生·容器·kubernetes
AKAMAI13 小时前
迎难而上驾驭Kubernetes
云原生·kubernetes·云计算
玄明Hanko13 小时前
从厨房到云端:从预制菜到云原生
云原生
阿里云云原生13 小时前
利用通义灵码和魔搭 Notebook 环境快速搭建一个 AIGC 应用 | 视频课
云原生·通义灵码
东风微鸣14 小时前
向商界大佬一样管理技术工作 - 以团队换将+技术重构为例
docker·云原生·kubernetes·可观察性
孔令飞15 小时前
如何在 Go 中实现各种类型的链表?
人工智能·云原生·go