github codespace进行npm start运行开发服的时候无法显示页面(白屏)

news2024/9/20 9:28:31

github codespace进行npm start运行开发服的时候无法显示页面解决方案

先说答案

必须要指定host为0.0.0.0,因为一般前端开发的时候都是本地访问的,所以npm start 默认启动一个开发服,监听127.0.0.1的请求,也就是localhost。但是在github的codespace,我们开发者使用过一个临时的url来访问的,这个url可能通过github的 gateway网关,映射到服务器,所以我们启动这个npm的开发服的时候,必须要允许监听所有ip来源的http请求。

# 解决方案
npm start -- --port 3000 --host 0.0.0.0

背景介绍

先说背景,最近心血来潮,想玩多库龙Docusaurus,为什么呢,一方面觉得这个网站做出来的文档都非常好看,甚至著名的一个国内:grasscutter中文wiki教程 域名有点神奇也是用的多库龙。当然,很多软件的开发者文档、教程都是用这个编写的,于是乎我也搭建了一个自己的overleaf-doc文档教程。

github不久前(也不知道是多久前)推出了他的codespace,非常香,在仓库的页面轻轻的一点,一个vscode环境就出来了(当然是带一个后台的云主机服务器,难怪有人说github送服务器了),而且重要的是基本的nodejs环境、docker啊之类的都是附带好了的,这就香喷喷了,直接开始开发。而且我作为学生开发者享有一个月180小时的免费额度,这个额度基本上用不完,180小时的概念一天算下来一天6小时的额度,而且我也不可能是天天用。这种就是临时用一下,让ipad免得吃灰的大好策略。
在这里插入图片描述
于是乎,把自己的一个多库龙项目传到github,想试一下在codespace上面开发的快感,npm start国际惯例,结果!服务器开发服也是启动了,说localhost:3000也显示了(你看下图是不是根正常启动一样),甚至vscode弹出来提示我有app在3000端口运行,结果点开链接,发现没什么反应。全部白屏,500,或者Gateway error。
在这里插入图片描述
网页错误的截图,就是error
在这里插入图片描述

当时还以为github坏了,毕竟一些上网工具也开了,怎么可能打不开呢。于是乎研究vcscode的端口配置,专门配置了3000转发,结果还是毫无作用。我甚至把端口直接暴露公网上,不需要github认证就能public的端口,结果还是徒劳,一点作用都没有。打开的网站依然是空白,转圈圈直接卡死。
在这里插入图片描述

第二天脑子突然才转过来,不对啊启动的开发服的时候,一般来说局域网的别的设备是访问不来的啊!好多时候都是这种绑定bind-ip的策略导致访问错误的,一般如果为了安全肯定是只允许本地访问的,但是在codespace这种远程的访问。

找了一通资料,只找到npm start的时候怎么让手机能够访问,告诉我host要改,但是多库龙没有这个配置文件啊,所以我就干脆一不做二不休,加上启动参数,诶瞬间就好了!

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/181329.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

《Spring揭秘》读书笔记 3:Spring MVC

22 迈向Spring MVC的旅程 【参考】Java Web开发历程。 1) Servlet独行天下的时代。 一个Servlet对应处理一个Web请求。Servlet什么都做。 2) 繁盛一时的JSP时代。 将Servlet中的视图渲染逻辑以独立的单元抽取出来,JSP成为Java Web应用程序事实上的模板化视图标准…

Golang 使用Gin创建Restful API

Golang 使用Gin创建Restful API 今天学习下Go语言如何集成Gin框架编写Restful Web API的基本操作。Gin框架简化了Go原生语言构建Web应用程序的复杂度,在今天的学习中,将学会使用Gin构建路由请求、数据检索、JSON响应封装等最简单的Web服务。 基本要求 …

将本地txt文件上传至mysql

文章目录单个文件导入1.创建数据库和数据表2.使用cmd各种情况说明如果报错方案一方案二方案三mysql重启命令重启:图形页面重启当txt文件中的数据量太多时,不再适合用sql语句插入,这里介绍讲本地txt文件导入到mysql中 单个文件导入 如图所示…

【Maven】私服

目录 1. 私服介绍 问题导入 1.1 介绍 1.2 Nexus安装与启动 1.3 私服资源操作流程分析 2. 私服仓库分类 问题导入 3. 资源上传与下载 问题导入 3.1 从私服中下载依赖 3.2 上传依赖到私服中 1. 私服介绍 问题导入 这里的私服和平时我们听的国服、体验服、欧服等等有…

《深入浅出计算机组成原理》学习笔记 Day12

数据通路(上)1. 指令周期(Instruction Cycle)2. 建立数据通路3. CPU 所需要的硬件电路4. 总结参考1. 指令周期(Instruction Cycle) 计算机每执行一条指令的过程,可以分为这几个步骤&#xff1a…

MySQL三大日志

MySQL三大日志包括:undolog,redo log,binlog,它们分别有以下作用: undolog:是Innodb存储引擎生成的日志。用于事务的回滚和MVCC,保证了事务的原子性。 redo log:是Innodb存储引擎生…

【汇编】深入浅出地讲解使用六条汇编指令解决大部分汇编代码

开发环境说明 本文采用的IDE为keil5,核心板为STM32F103ZE。 在keil中添加以下两条语句即可生成汇编代码: 在上图界面中添加下述两句代码即可生成汇编代码:fromelf --bin --outputtest.bin Objects\test.axffromelf --text -a -c --outputtest…

使用Facebook分析跟踪SEO进展

Facebook是一个强大的社交平台,在这里你可以获取关于你的业务或客户的各种信息。它为你提供了一个巨大的渠道来展示你在过去一年中对行业或公司做出的贡献,以及你如何改进和优化我们所做的事情。如果不知道如何利用 Facebook来获得更多关于 SEO工作的信息…

高级数据结构:线段树入门(c++实现 + 详解)

文章目录线段树概念区间最值问题辅助函数创建线段树查询更新懒惰修改(查询)问题tag标记设计改进的更新函数关于本节的全部源代码线段树概念 线段树是一种高级数据结构,与树状数组一样,被用来处理区间查询,修改问题&am…

DDOS渗透与攻防(一)之拒绝服务攻击概念介绍

DDOS渗透与攻防 前言 DOS(Denial of Service,拒绝服务攻击),它的原理很简单,就是用我们手里的机器去给服务器发请求,如果我们手头的服务器各方面性能都比服务器的主机的性能好,那么当我们发送大量请求给服务器&#…

Day871.行锁 -MySQL实战

行锁 Hi,我是阿昌,今天学习记录的是关于行锁的内容。 MySQL 的 行锁 是在引擎层由各个引擎自己实现的。 但并不是所有的引擎都支持行锁,比如 MyISAM 引擎就不支持行锁。 不支持行锁意味着并发控制只能使用表锁,对于这种引擎的…

普通话学习

一、认识韵母是有四个声调的发错的字和音总结R:日、热、肉L:漏、乐参考:https://zhuanlan.zhihu.com/p/34571271身体(shen-1)森(sen-1) 生日(sheng-1)琴(qin-…

k8s对接smb/cifs存储

之前文章提到,k8s官方是支持nfs存储的,那么在windows常见的文件共享协议是否也支持呢。答案是肯定的。不过支持的方式是通过CSI接口进行支持的。官方提供的项目是csi-driver-smb官网:https://github.com/kubernetes-csi/csi-driver-smb安装cu…

《MFC编程》:MFC程序的分类

《MFC编程》:MFC程序的分类《MFC编程》:MFC程序的分类MFC的控制台程序MFC的库程序使用MFC库制作自己的静态库程序使用MFC库制作自己的动态库程序使用MFC库制作自己的拓展库程序MFC的窗口程序单文档视图架构程序多文档视图架构程序对话框架构程序《MFC编程…

Windows server——部署DNS服务(2)

作者简介:一名云计算网络运维人员、每天分享网络与运维的技术与干货。 座右铭:低头赶路,敬事如仪 个人主页:网络豆的主页​​​​​​ 目录 前言 一.配置DNS服务 1.安装步骤教程 (1)安装必要条件 &a…

【链表】链表内指定区间反转

BM2链表内指定区间反转 描述 将一个节点数为 size 链表 m 位置到 n 位置之间的区间反转,要求时间复杂度 O(n)O(n),空间复杂度 O(1)O(1)。 例如: 给出的链表为1→2→3→4→5→NULL, m2,n4m2,n4, 返回1→4→3→2→5→NULL. 数据范围&#xf…

初识 Canvas(使用 Canvas 绘制直线图形)

初识 Canvas(使用 Canvas 绘制直线图形)参考描述CanvasCanvas 与 SVGCanvas 元素替补元素使用检测绘制直线图形直线同时绘制多条直线指定起点首尾相接多彩的直线矩形描边矩形填充矩形结合体清除矩形区域多边形参考 描述 Canvas 你可以使用 JavaScript…

3 梯度下降算法

文章目录问题方法穷举法分治法梯度下降算法梯度梯度下降算法课程代码随机梯度下降算法批量梯度下降(mini-batch)课程来源: 链接其他觉得别人总结的比自己好,采用之的: 链接以及 BirandaのBlog!问题方法 穷…

飞速的网格【Steema】:TeeGrid for .NET 2023.1.23 Crack

TeeGrid for .NET 的数据网格控件为您的 Visual Studio 项目提供了一个非常快速的网格。 快速浏览 功能齐全的数据网格控件 适用于 WinForms、ASP.NET Core MVC 的易于使用的数据网格 TeeGrid for .NET 是一个原生的 c# 网格控件,目前可用于 WinForms 项目和 NET …

优先级队列(堆)

1.优先级队列1.1概念前面介绍过队列,队列是一种先进先出(FIFO)的数据结构,但是有些情况下,操作的数据可能带有优先级时,可能需要优先级高的元素先入队列,该场景中,使用队列显然不合适…