首页
学习
活动
专区
圈层
工具
发布

Netlify 结合 ZeroNews,实现本地静态网站公网访问

在静态网站开发过程中,开发者常常面临一个需求:如何快速地将本地正在开发中的网站共享给客户、团队成员或进行线上测试?传统的解决方案是购买服务器、配置复杂的网络环境,但这对于敏捷开发和即时演示来说过于繁琐。

我们推荐一款好用的工具,通过 ZeroNews 结合 Netlify 这一现代化的部署平台与内网穿透技术,可以打造一个高效无缝的工作流,它既能保留本地开发的灵活性,又能轻松实现公网访问,从而进行实时演示、测试或协作。本文将详细介绍这一组合方案的实现。

Netlify 是一个现代化的一站式网页应用托管与自动化平台,专为简化现代网络开发工作流而设计,尤其擅长托管由静态站点生成器(如 React, Vue, Svelte)或框架(如 Next.js, Nuxt.js)构建的网站和应用。

Netlify 的核心理念是让前端开发者能够无需关心复杂的服务器运维、扩展性和网络优化,只需专注于编写代码。它通过将许多最佳实践(如持续部署、全球内容分发、HTTPS 等)自动化,极大地提高了开发效率和网站性能。

一、 准备本地 Netlify 项目与环境

安装 Netlify CLI:Netlify 提供了强大的命令行工具,允许你在本地运行一个功能丰富的开发服务器。通过 npm 全局安装。

1、 我们打开CMD命令窗口,并执行如下命令

2、 整体等待一段时间,则会出现安装完成的提示

3、 安装完成后,可以通过版本查询命令验证是否安装成功

4、如果成功展示版本信息,则表示已经安装成功了

二、 创建并启动本地项目

1、 首先,我们找到我们web项目的文件夹,例如 D:\Netlify

2、 然后我们通过命令行,进入到该文件夹

3、 这时候,可以看到我们命令窗口已经进入到该文件夹了

4、 现在我们通过 Netlify 命令启动本地服务器

5、 可以看到命令启动成功,并且提示我们本地服务已经运行成功,以及提供本地站点的访问路径"http://localhost:8888"。

6、 我们通过提供的本地访问路径"http://localhost:8888"就能够在浏览器访问我们的本地站点了。

三、 创建 ZeroNews 映射服务

1、 首先,打开 ZeroNews 网站,然后选择您的系统,并按照对应的步骤和命令安装运行 Agent 服务。

2、 运行完成之后,您可以在 Agent 页面看到已经在线的 Agent 服务。

3、 接着,我们在域名端口页面,创建一个可用的公网域名,并勾选TCP 协议端口和选择TCP 端口。

4、 域名创建完成之后,我们继续打开映射页面,并按下面的步骤添加映射

a) Agent:选择第一步运行的 Agent

b) 映射协议:选择 TCP 协议

c) 域名:选择刚创建好的域名

d) 带宽:根据需要选择带宽大小

e) 内网IP:我们是本地部署,直接使用 127.0.0.1 即可

f) 内网端口:输入本地服务的端口 8888 即可

5、 按照上述步骤创建完成之后,我们就可以得到一条可公网访问的映射域名

四、 公网访问您的Web项目

1、我们在任意有网络访问电脑的浏览器上,复制上面的链接 ****.**.***.**:15566 并打开访问。(需要注意不能复制前面的 tcp://)

2、 当然,如果您对于Netlify 有更多更好的使用建议,也可以同步给到我们。

  • 发表于:
  • 原文链接https://page.om.qq.com/page/ONK-Ia99IZjBF-lTRJt2Ri8A0
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。
领券