首页 > 解决方案 > 在 netlify 渲染空白页上持续部署一个 React 应用

问题描述

我刚刚从 Github 在 netlify 上完成了一个持续部署。使用这些设置:

Build Command: npm build
Publish Directory: devit/public/

它部署没有任何错误,在访问该站点时它是空白的。完成部署日志:

4:10:30 AM: Build ready to start
4:10:32 AM: build-image version: ca811f47d4c1cbd1812d1eb6ecb0c977e86d1a1d
4:10:32 AM: build-image tag: v3.3.20
4:10:32 AM: buildbot version: 78b5536ab4f742c26705d3e953381b9cde6e22ef
4:10:32 AM: Fetching cached dependencies
4:10:32 AM: Starting to download cache of 88.5MB
4:10:33 AM: Finished downloading cache in 724.248229ms
4:10:33 AM: Starting to extract cache
4:10:35 AM: Finished extracting cache in 2.554192297s
4:10:35 AM: Finished fetching cache in 3.297079366s
4:10:35 AM: Starting to prepare the repo for build
4:10:36 AM: Preparing Git Reference refs/heads/master
4:10:37 AM: Different publish path detected, going to use the one specified in the Netlify configuration file: 'devit/public' versus 'devit/public/' in the Netlify UI
4:10:37 AM: Starting build script
4:10:37 AM: Installing dependencies
4:10:37 AM: Python version set to 2.7
4:10:38 AM: Started restoring cached node version
4:10:40 AM: Finished restoring cached node version
4:10:41 AM: v12.18.0 is already installed.
4:10:41 AM: Now using node v12.18.0 (npm v6.14.4)
4:10:41 AM: Started restoring cached build plugins
4:10:41 AM: Finished restoring cached build plugins
4:10:41 AM: Attempting ruby version 2.7.1, read from environment
4:10:42 AM: Using ruby version 2.7.1
4:10:43 AM: Using PHP version 5.6
4:10:43 AM: 5.2 is already installed.
4:10:43 AM: Using Swift version 5.2
4:10:43 AM: Started restoring cached go cache
4:10:43 AM: Finished restoring cached go cache
4:10:43 AM: go version go1.14.4 linux/amd64
4:10:43 AM: go version go1.14.4 linux/amd64
4:10:43 AM: Installing missing commands
4:10:43 AM: Verify run directory
4:10:44 AM: ​
4:10:44 AM: ┌─────────────────────────────┐
4:10:44 AM: │        Netlify Build        │
4:10:44 AM: └─────────────────────────────┘
4:10:44 AM: ​
4:10:44 AM: ❯ Version
4:10:44 AM:   @netlify/build 2.0.27
4:10:44 AM: ​
4:10:44 AM: ❯ Flags
4:10:44 AM:   deployId: 5f0547367d92cb55b46de080
4:10:44 AM:   mode: buildbot
4:10:44 AM: ​
4:10:44 AM: ❯ Current directory
4:10:44 AM:   /opt/build/repo
4:10:44 AM: ​
4:10:44 AM: ❯ Config file
4:10:44 AM:   No config file was defined: using default values.
4:10:44 AM: ​
4:10:44 AM: ❯ Context
4:10:44 AM:   production
4:10:44 AM: ​
4:10:44 AM: ┌───────────────────────────────────┐
4:10:44 AM: │ 1. Build command from Netlify app │
4:10:44 AM: └───────────────────────────────────┘
4:10:44 AM: ​
4:10:44 AM: $ npm build
4:10:44 AM: ​
4:10:44 AM: (build.command completed in 274ms)
4:10:44 AM: ​
4:10:44 AM: ┌─────────────────────────────┐
4:10:44 AM: │   Netlify Build Complete    │
4:10:44 AM: └─────────────────────────────┘
4:10:44 AM: ​
4:10:44 AM: (Netlify Build completed in 298ms)
4:10:44 AM: Caching artifacts
4:10:44 AM: Started saving build plugins
4:10:44 AM: Finished saving build plugins
4:10:44 AM: Started saving pip cache
4:10:44 AM: Finished saving pip cache
4:10:44 AM: Started saving emacs cask dependencies
4:10:44 AM: Finished saving emacs cask dependencies
4:10:44 AM: Started saving maven dependencies
4:10:44 AM: Finished saving maven dependencies
4:10:44 AM: Started saving boot dependencies
4:10:44 AM: Finished saving boot dependencies
4:10:44 AM: Started saving go dependencies
4:10:44 AM: Finished saving go dependencies
4:10:44 AM: Build script success
4:10:44 AM: Starting to deploy site from 'devit/public'
4:10:44 AM: Creating deploy tree 
4:10:45 AM: Creating deploy upload records
4:10:45 AM: 0 new files to upload
4:10:45 AM: 0 new functions to upload
4:10:45 AM: Starting post processing
4:10:45 AM: Post processing - HTML
4:10:46 AM: Post processing - redirect rules
4:10:46 AM: Post processing - header rules
4:10:46 AM: Post processing done
4:10:46 AM: Site is live
4:10:56 AM: Finished processing build request in 24.126985051s

我还检查了浏览器控制台,发现: https ://i.stack.imgur.com/1nqt1.png

GitHub存储库:https ://github.com/kelvinyelyen/dev.it_blog

标签: node.jsreactjsnetlify

解决方案


npm build不运行你的build脚本,它构建一个 npm 包,它对网站没有任何用处。您还必须使用该devit目录。

将构建命令设置为npm run build --prefix devit应该可以解决问题。


推荐阅读