部署到heroku的React / Node应用程序显示空白屏幕

Question

我第一次尝试将我的应用程序部署到Heroku。我在后端使用create-react-app，redux和node / mongodb。当我通过- (void)captureOutput:(AVCaptureOutput *)output didOutputSampleBuffer:(CMSampleBufferRef)sampleBuffer fromConnection:(AVCaptureConnection *)connection {     CVImageBufferRef imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);     CVPixelBufferLockBaseAddress(imageBuffer,0);     uint8_t *baseAddress = (uint8_t *)CVPixelBufferGetBaseAddress(imageBuffer);     size_t bytesPerRow = CVPixelBufferGetBytesPerRow(imageBuffer);     size_t width = CVPixelBufferGetWidth(imageBuffer);     size_t height = CVPixelBufferGetHeight(imageBuffer);     CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();     CGContextRef newContext = CGBitmapContextCreate(baseAddress, width, height, 8, bytesPerRow, colorSpace, kCGBitmapByteOrder32Little | kCGImageAlphaPremultipliedFirst);     CGImageRef newImage = CGBitmapContextCreateImage(newContext);     CGContextRelease(newContext);     CGColorSpaceRelease(colorSpace);     UIImage *image = [[UIImage alloc] initWithCGImage:newImage scale:1 orientation:UIImageOrientationUp];     CGImageRelease(newImage);     CVPixelBufferUnlockBaseAddress(imageBuffer,0);          NSData *data = [NSData dataWithData:UIImageJPEGRepresentation(image, 0.25)];          __block BOOL baseCaseCondition = NO; // obviously this should be data driven, not hardcoded     __block NSInteger _len = DATA_LENGTH;     __block NSInteger _byteIndex = 0;     typedef void (^RecursiveBlock)(void (^)());     RecursiveBlock aRecursiveBlock;          aRecursiveBlock = ^(RecursiveBlock block) {         NSLog(@"Block called...");         baseCaseCondition = (data.length > 0 && _byteIndex < data.length) ? TRUE : FALSE;         if ((baseCaseCondition) && block)         {             _len = (data.length - _byteIndex) == 0 ? 1 : (data.length - _byteIndex) < DATA_LENGTH ? (data.length - _byteIndex) : DATA_LENGTH;             //             NSLog(@"START | byteIndex: %lu/%lu  writing len: %lu", _byteIndex, data.length, _len);             //             uint8_t * bytes[_len];             [data getBytes:&bytes range:NSMakeRange(_byteIndex, _len)];             _byteIndex += [self.outputStream write:(const uint8_t *)bytes maxLength:_len];             //             NSLog(@"END | byteIndex: %lu/%lu wrote len: %lu", _byteIndex, data.length, _len);             //             dispatch_barrier_async(dispatch_get_main_queue(), ^{                 block(block);             });         }     };          if (self.outputStream.hasSpaceAvailable)             aRecursiveBlock(aRecursiveBlock); }   访问我的应用时，我会看到一个空白屏幕。当我查看源我的反应index.html模板到位时，但是当我单击manifest.json或main.js文件之类的任何资产时，它们都是完全空白的。我的所有后端API都正常工作（我进入了我的谷歌oauth路线，并在谷歌登录屏幕上得到了适当的欢迎），但没有一个视图正在渲染。

我检查了我的构建目录，所有构建看起来都像我的新手眼睛看到的那样正常工作。我检查了我的Heroku日志，没有任何错误。

我知道这很模糊，但有什么我应该检查的吗？我可以在这里分享一些有助于获得方向的东西吗？我很抱歉没有在我的第一稿中分享更多内容，但老实说我不知道​​要分享什么来澄清。我很乐意编辑和添加代码。这是我的第一个“fullstack”部署，所以我完全是全新的，3小时的故障排除和谷歌搜索没有帮助我解决这个问题。该应用程序在我的笔记本电脑上运行得很好，所以我猜它与我的create-react-app构建有关。

这是我在Heroku上的应用程序的链接。 https://desolate-stream-86031.herokuapp.com/

编辑解决方案

感谢伊恩的指导，尽管我的帖子很糟糕。问题是我是如何尝试在生产中提供静态资产的。

我使用的是：

heroku open

我需要使用的是：

app.use(express.static('client/build'));

我对这些差异知之甚少，所以我将对此进行调查。如果有人能够启发我，我会很感激！

不确定这是不是很糟糕的形式，但我将他的答案标记为正确的答案，即使他的回答是以他对答案的评论的形式。

Answer 1

JS文件并不是空的，只是服务器无论你要求什么都返回index.html。我不知道你正在使用什么服务器，但似乎它被配置为提供单页应用程序（总是index.html），但不是静态资产（JS，CSS等）。

编辑：我可以从您的JS文件请求中的X-Powered-By标头告诉您，您正在使用Express框架来提供静态资产。您可以在https://expressjs.com/en/starter/static-files.html查看文档，了解如何配置Express以正确提供静态资产。您需要指定静态资产的投放位置路径，例如/ static是yourdomain.com/static，以及静态文件在系统上实际存在的路径。我假设create-react-app默认在/ static处查找静态资产。

Answer 2

打开应用时，请查看控制台。

您的javascript中出现语法错误，导致无法在屏幕上呈现任何内容。