温馨提示:本文翻译自stackoverflow.com,查看原文请点击:node.js - Cannot deploy React app at Node JS server

node.js - 无法在Node JS服务器上部署React应用

发布于 2020-04-12 12:04:55

我在React中做了一个相当简单的应用,其中包括注册系统和几页。我使用MongoDB作为数据库,创建了一个具有两个端点的Node JS服务器来为该应用程序提供服务。当我在端口3000上运行react app和在端口5000上运行Node服务器时,系统运行良好。

现在,我尝试使用编译React应用程序,npm run-scripts build然后将捆绑结果放入Node服务器的静态文件夹(捆绑文件夹)中。但是,当我运行服务器时,它显示了一个空白屏幕(应用程序的标题带有应有的选项卡名称),并且在控制台中出现以下错误。

2.058014f9.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
ain.1b5da964.chunk.js:1 Uncaught SyntaxError: Unexpected token '<'
Manifest: Line: 1, column: 1, Syntax error.

我访问了这些文件,但在这些代码块中什么也没得到

这是我第一次尝试这样做,而且我想这里缺少一个概念。

查找错误来源的工具也很有用,因为在捆绑的代码中导航是一场噩梦。

这是index.html

<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Web site created using create-react-app"/><link rel="apple-touch-icon" href="/logo192.png"/><link rel="manifest" href="/manifest.json"/><title>R & M Gallery</title><link href="/static/css/2.018ed993.chunk.css" rel="stylesheet"><link href="/static/css/main.c8e6a1a9.chunk.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],p=0,i=[];p<n.length;p++)t=n[p],Object.prototype.hasOwnProperty.call(f,t)&&f[t]&&i.push(f[t][0]),f[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==f[u]&&(n=!1)}n&&(c.splice(r--,1),e=p(p.s=t[0]))}return e}var t={},f={1:0},c=[];function p(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,p),r.l=!0,r.exports}p.m=l,p.c=t,p.d=function(e,r,t){p.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},p.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},p.t=function(r,e){if(1&e&&(r=p(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(p.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)p.d(t,n,function(e){return r[e]}.bind(null,n));return t},p.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return p.d(r,"a",r),r},p.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},p.p="/";var r=this.webpackJsonprickmortyapp=this.webpackJsonprickmortyapp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/2.058014f9.chunk.js"></script><script src="/static/js/main.1b5da964.chunk.js"></script></body></html>

这是2.058014f9.chunk.js(的一部分)

    /*! For license information please see 2.058014f9.chunk.js.LICENSE */
(this.webpackJsonprickmortyapp=this.webpackJsonprickmortyapp||[]).push([[2],[function(e,t,n){"use strict";e.exports=n(210)},function(e,t,n){e.exports=n(220)()},function(e,t,n){"use strict";n.d(t,"l",(function(){return a})),n.d(t,"g",(function(){return u})),n.d(t,"e",(function(){return c})),n.d(t,"i",(function(){return l})),n.d(t,"j",(function(){return s})),n.d(t,"k",(function(){return f})),n.d(t,"n",(function(){return d})),n.d(t,"m",(function(){return y})),n.d(t,"c",(function(){return v})),n.d(t,"a",(function(){return m})),n.d(t,"b",(function(){return g})),n.d(t,"d",(function(){return b})),n.d(t,"h",(function(){return x})),n.d(t,"f",(function(){return w}));var r,o=n(1),i=n.n(o);function a(e){document.body.style.paddingRight=e>0?e+"px":null}function u(){var e=window.getComputedStyle(document.body,null);return parseInt(e&&e.getPropertyValue("padding-right")||0,10)}function c(){var e=function(){var e=document.createElement("div");e.style.position="absolute",e.style.top="-9999px",e.style.width="50px",e.style.height="50px",e.style.overflow="scroll",document.body.appendChild(e);var t=e.offsetWidth-e.clientWidth;return document.body.removeChild(e),t}(),t=document.querySelectorAll(".fixed-top, .fixed-bottom, .is-fixed, .sticky-top")[0],n=t?parseInt(t.style.paddingRight||0,10):0;document.body.clientWidth<window.innerWidth&&a(n+e)}function l(e,t){return void 0===e&&(e=""),void 0===t&&(t=r),t?e.split(" ").map((function(e){return t[e]||e})).join(" "):e}function s(e,t){var n={};return Object.keys(e).forEach((function(r){-1===t.indexOf(r)&&(n[r]=e[r])})),n}function f(e,t){for(var n,r=Array.isArray(t)?t:[t],o=r.length,i={};o>0;)i[n=r[o-=1]]=e[n];return i}var p={};function d(e){p[e]||("undefined"!==typeof console&&console.error(e),p[e]=!0)}var h="object"===typeof window&&window.Element||function(){};i.a.oneOfType([i.a.string,i.a.func,function(e,t,n){if(!(e[t]instanceof h))return new Error("Invalid prop `"+t+"` supplied to `"+n+"`. Expected prop to be an instance of Element. Validation failed.")},i.a.shape({current:i.a.any})]);var y=i.a.oneOfType([i.a.func,i.a.string,i.a.shape({$$typeof:i.a.symbol,render:i.a.func}),i.a.arrayOf(i.a.oneOfType([i.a.func,i.a.string,i.a.shape({$$typeof:i.a.symbol,render:i.a.func})]))]),v={Fade:150,Collapse:350,Modal:300,Carousel:600},m=["in","mountOnEnter","unmountOnExit","appear","enter","exit","timeout","onEnter","onEntering","onEntered","onExit","onExiting","onExited"],g={ENTERING:"entering",ENTERED:"entered",EXITING:"exiting",EXITED:"exited"},b=!("undefined"===typeof window||!window.document||!window.document.createElement);function x(e){var t=typeof e;return null!=e&&("object"===t||"function"===t)}var w=["a[href]","area[href]","input:not([disabled]):not([type=hidden])","select:not([disabled])","textarea:not([disabled])","button:not([disabled])","object","embed","[tabindex]:not(.modal)","audio[controls]","video[controls]",'[contenteditable]:not([contenteditable="false"])']},function(e,t,n){var r;!function(){"use strict";var n={}.hasOwnProperty;function o(){for(var e=[],t=0;t<arguments.length;t++){var r=arguments[t];if(r){var i=typeof r;if("string"===i||"number"===i)e.push(r);else if(Array.isArray(r)&&r.length){var a=o.apply(null,r);a&&e.push(a)}else if("object"===i)for(var u in r)n.call(r,u)&&r[u]&&e.push(u)}}return e.join(" ")}e.exports?(o.default=o,e.exports=o):void 0===(r=function(){return o}.apply(t,[]))||(e.exports=r)}()},function(e,t,n){var r=n(34),o=n(13),i="[object AsyncFunction]",a="[object Function]",u="[object GeneratorFunction]",c="[object Proxy]";e.exports=function(e){if(!o(e))return!1;var t=r(e);return t==a||t==u||t==i||t==c}},function(e,t){e.exports=function(e){return null==e}},function(e,t,n){"use strict";function r(){return(r=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";function r(e,t){if(null==e)return{};var n,r,o={},i=Object.keys(e);for(r=0;r<i.length;r++)n=i[r],t.indexOf(n)>=0||(o[n]=e[n]);return o}n.d(t,"a",(function(){return r}))},function(e,t){var n=Array.isArray;e.exports=n},function(e,t,n){var r=n(14),o=n(78).f,i=n(60),a=n(122),u=n(83),c=n(236),l=n(131);e.exports=function(e,t){var n,s,f,p,d,h=e.target,y=e.global,v=e.stat;if(n=y?r:v?r[h]||u(h,{}):(r[h]||{}).prototype)for(s in t){if(p=t[s],f=e.noTargetGet?(d=o(n,s))&&d.value:n[s],!l(y?s:h+(v?".":"#")+s,e.forced)&&void 0!==f){if(typeof p===typeof f)continue;c(p,f)}(e.sham||f&&f.sham)&&i(p,"sham",!0),a(n,s,p,e)}}},function(e,t,n){"use strict";function r(e,t){return function(e){if(Array.isArray(e))return e}(e)||function(e,t){if(Symbol.iterator in Object(e)||"[object Arguments]"===Object.prototype.toString.call(e)){var n=[],r=!0,o=!1,i=void 0;try{for(var a,u=e[Symbol.iterator]();!(r=(a=u.next()).done)&&(n.push(a.value),!t||n.length!==t);r=!0);}catch(c){o=!0,i=c}finally{try{r||null==u.return||u.return()}finally{if(o)throw i}}return n}}(e,t)||function(){throw new TypeError("Invalid attempt to destructure non-iterable instance")}()}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";function r(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}n.d(t,"a",(function(){return r}))},function(e,t,n){"use strict";function r(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}n.d(t,"a",(function(){return r}))},function(e,t){e.exports=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},function(e,t,n){(function(t){var n=function(e){return e&&e.Math==Math&&e};e.exports=n("object"==typeof globalThis&&globalThis)||n("object"==typeof window&&window)||n("object"==typeof self&&self)||n("object"==typeof t&&t)||Function("return this")()}).call(this,n(39))},function(e,t,n){var r=n(150);e.exports=function(e,t,n){var o=null==e?void 0:r(e,t);return void 0===o?n:o}},function(e,t,n){"use strict";var r=!0,o="Invariant failed";t.a=function(e,t){if(!e)throw r?new Error(o):new Error(o+": "+(t||""))}},function(e,t,n){"use strict";var r=n(6);function o(e){return"/"===e.charAt(0)}function i(e,t){for(var n=t,r=n+1,o=e.length;r<o;n+=1,r+=1)e[n]=e[r];e.pop()}var a=function(e,t){void 0===t&&(t="");var n,r=e&&e.split("/")||[],a=t&&t.split("/")||[],u=e&&o(e),c=t&&o(t),l=u||c;if(e&&o(e)?a=r:r.length&&(a.pop(),a=a.concat(r)),!a.length)return"/";if(a.length){var s=a[a.length-1];n="."===s||".."===s||""===s}else n=!1;for(var f=0,p=a.length;p>=0;p--){var d=a[p];"."===d?i(a,p):".."===d?(i(a,p),f++):f&&(i(a,p),f--)}if(!l)for(;f--;f)a.unshift("..");!l||""===a[0]||a[0]&&o(a[0])||a.unshift("");var h=a.join("/");return n&&"/"!==h.substr(-1)&&(h+="/"),h};function u(e){return e.valueOf?e.valueOf():Object.prototype.valueOf.call(e)}var c=function e(t,n){if(t===n)return!0;if(null==t||null==n)return!1;if(Array.isArray(t))return Array.isArray(n)&&t.length===n.length&&t.every((function(t,r){return e(t,n[r])}));if("object"===typeof t||"object"===typeof n){var r=u(t),o=u(n);return r!==t||o!==n?e(r,o):Object.keys(Object.assign({},t,n)).every((function(r){return e(t[r],n[r])}))}return!1},l=n(16);function s(e){return"/"===e.charAt(0)?e:"/"+e}function f(e){return"/"===e.charAt(0)?e.substr(1):e}function p(e,t){return function(e,t){return 0===e.toLowerCase().indexOf(t.toLowerCase())&&-1!=="/?#".indexOf(e.charAt(t.length))}(e,t)?e.substr(t.length):e}function d(e){return"/"===e.charAt(e.length-1)?e.slice(0,-1):e}function h(e){var t=e.pathname,n=e.search,r=e.hash,o=t||"/";return n&&"?"!==n&&(o+="?"===n.charAt(0)?n:"?"+n),r&&"#"!==r&&(o+="#"===r.charAt(0)?r:"#"+r),o}function y(e,t,n,o){var i;"string"===typeof e?(i=function(e){var t=e||"/",n="",r="",o=t.indexOf("#");-1!==o&&(r=t.substr(o),t=t.substr(0,o));var i=t.indexOf("?");return-1!==i&&(n=t.substr(i),t=t.substr(0,i)),{pathname:t,search:"?"===n?"":n,hash:"#"===r?"":r}}(e)).state=t:(void 0===(i=Object(r.a)({},e)).pathname&&(i.pathname=""),i.search?"?"!==i.search.charAt(0)&&(i.search="?"+i.search):i.search="",i.hash?"#"!==i.hash.charAt(0)&&(i.hash="#"+i.hash):i.hash="",void 0!==t&&void 0===i.state&&(i.state=t));try{i.pathname=decodeURI(i.pathname)}catch(u){throw u instanceof URIError?new URIError('Pathname "'+i.pathname+'" could not be decoded. This is likely caused by an invalid percent-encoding.'):u}return n&&(i.key=n),o?i.pathname?"/"!==i.pathname.charAt(0)&&(i.pathname=a(i.pathname,o.pathname)):i.pathname=o.pathname:i.pathname||(i.pathname="/"),i}function v(e,t){return e.pathname===t.pathname&&e.search===t.search&&e.hash===t.hash&&e.key===t.key&&c(e.state,t.state)}function m(){var e=null;var t=[];return{setPrompt:function(t){return e=t,function(){e===t&&(e=null)}},confirmTransitionTo:function(t,n,r,o){if(null!=e){var i="function"===typeof e?e(t,n):e;"string"===typeof i?"function"===typeof r?r(i,o):o(!0):o(!1!==i)}else o(!0)},appendListener:function(e){var n=!0;function r(){n&&e.apply(void 0,arguments)}return t.push(r),function(){n=!1,t=t.filter((function(e){return e!==r}))}},notifyListeners:function(){for(var e=arguments.length,n=new Array(e),r=0;r<e;r++)n[r]=arguments[r];t.forEach((function(e){return e.apply(void 0,n)}))}}}n.d(t,"a",(function(){return E})),n.d(t,"b",(function(){return P})),n.d(t,"d",(function(){return M})),n.d(t,"c",(function(){return y})),n.d(t,"f",(function(){return v})),n.d(t,"e",(function(){return h}));var g=!("undefined"===typeof window||!window.document||!window.document.createElement);function b(e,t){t(window.confirm(e))}var x="popstate",w="hashchange";function O(){try{return window.history.state||{}}catch(e){return{}}}function E(e){void 0===e&&(e={}),g||Object(l.a)(!1);var t=window.history,n=function(){var e=window.navigator.userAgent;return(-1===e.indexOf("Android 2.")&&-1===e.indexOf("Android 4.0")||-1===e.indexOf("Mobile Safari")||-1!==e.indexOf("Chrome")||-1!==e.indexOf("Windows Phone"))&&(window.history&&"pushState"in window.history)}(),o=!(-1===window.navigator.userAgent.indexOf("Trident")),i=e,a=i.forceRefresh,u=void 0!==a&&a,c=i.getUserConfirmation,f=void 0===c?b:c,v=i.keyLength,E=void 0===v?6:v,k=e.basename?d(s(e.basename)):"";function S(e){var t=e||{},n=t.key,r=t.state,o=window.location,i=o.pathname+o.search+o.hash;return k&&(i=p(i,k)),y(i,r,n)}function _(){return Math.random().toString(36).substr(2,E)}var T=m();function j(e){Object(r.a)(U,e),U.length=t.length,T.notifyListeners(U.location,U.action)}function P(e){(function(e){return void 0===e.state&&-1===navigator.userAgent.indexOf("CriOS")})(e)||A(S(e.state))}function C(){A(S(O()))}var M=!1;function A(e){if(M)M=!1,j();else{T.confirmTransitionTo(e,"POP",f,(function(t){t?j({action:"POP",location:e}):function(e){var t=U.location,n=I.indexOf(t.key);-1===n&&(n=0);var r=I.indexOf(e.key);-1===r&&(r=0);var o=n-r;o&&(M=!0,L(o))}(e)}))}}var N=S(O()),I=[N.key];function D(e){return k+h(e)}function L(e){t.go(e)}var R=0;function z(e){1===(R+=e)&&1===e?(window.addEventListener(x,P),o&&window.addEventListener(w,C)):0===R&&(window.removeEventListener(x,P),o&&window.removeEventListener(w,C))}var F=!1;var U={length:t.length,action:"POP",location:N,createHref:D,push:function(e,r){var o=y(e,r,_(),U.location);T.confirmTransitionTo(o,"PUSH",f,(function(e){if(e){var r=D(o),i=o.key,a=o.state;if(n)if(t.pushState({key:i,state:a},null,r),u)window.location.href=r;else{var c=I.indexOf(U.location.key),l=I.slice(0,c+1);l.push(o.key),I=l,j({action:"PUSH",location:o})}else window.location.href=r}}))},replace:function(e,r){var o=y(e,r,_(),U.location);T.confirmTransitionTo(o,"REPLACE",f,(function(e){if(e){var r=D(o),i=o.key,a=o.state;if(n)if(t.replaceState({key:i,state:a},null,r),u)window.location.replace(r);else{var c=I.indexOf(U.location.key);-1!==c&&(I[c]=o.key),j({action:"REPLACE",location:o})}else window.location.replace(r)}}))},go:L,goBack:function(){L(-1)},goForward:function(){L(1)},block:function(e){void 0===e&&(e=!1);var t=T.setPrompt(e);return F||(z(1),F=!0),function(){return F&&(F=!1,z(-1)),t()}},listen:function(e){var t=T.appendListener(e);return z(1),function(){z(-1),t()}}};return U}var k="hashchange",S={hashbang:{encodePath:function(e){return"!"===e.charAt(0)?e:"!/"+f(e)},decodePath:function(e){return"!"===e.charAt(0)?e.substr(1):e}},noslash:{encodePath:f,decodePath:s},slash:{encodePath:s,decodePath:s}};function _(e){var t=e.indexOf("#");return-1===t?e:e.slice(0,t)}function T(){var e=window.location.href,t=e.indexOf("#");return-1===t?"":e.substring(t+1)}function j(e){window.location.replace(_(window.location.href)+"#"+e)}function P(e){void 0===e&&(e={}),g||Object(l.a)(!1);var t=window.history,n=(window.navigator.userAgent.indexOf("Firefox"),e),o=n.getUserConfirmation,i=void 0===o?b:o,a=n.hashType,u=void 0===a?"slash":a,c=e.basename?d(s(e.basename)):"",f=S[u],v=f.encodePath,x=f.decodePath;function w(){var e=x(T());return c&&(e=p(e,c)),y(e)}var O=m();function E(e){Object(r.a)(U,e),U.length=t.length,O.notifyListeners(U.location,U.action)}var P=!1,C=null;function M(){var e,t,n=T(),r=v(n);if(n!==r)j(r);else{var o=w(),a=U.location;if(!P&&(t=o

另外,最后一个问题:我对这个过程感到困惑。如果我编译Node JS服务器的代码,在这种情况下该工作流程应该如何工作?

查看更多

提问者
Alonso Rodriguez
被浏览
76
Joseph Glynn 2020-02-05 00:23

它使用React项目对我有用,并保持目录导入与构建后相同

文件夹目录

-server.js
-views
   -index.html
   -logo.png
   -favicon.ico
   ect
   -static
      -js
         2.af19ebe2.chunk.js
         main.3b705ccd.chunk.js
         runtime-main.5e46ebaf.js
      -css
         main.477083db.chunk.css


如果您使用快递,请尝试此操作。

var express = require('express');
var app = express();
var path = require('path');
app.use('/', express.static(path.join(__dirname, 'views')))
app.listen(8080, () => console.log(`Example app listening on port 3000!`));