Question

我遇到一个非常有趣的问题，经过整整两天的上网搜索，我想我会来找你的。

我有一个前端React应用，该应用托管在cPanel上，并且运行良好。然后，我在Node + Express中为其构建了后端，作为一个单独的项目，并将其部署在DigitalOcean上。我之所以将Digitalocean用作后端，是因为我的cPanel服务器不允许我进行ssh访问，并且它们的支持无法访问，因此我不得不选择其他选项。

API也是实时的，我为自己的Droplet选择了与我的React App相同的域，比如example.com。这是一个RESTful API，因此路由为/ api / v1 /...

现在，当我尝试打我的路线之一时。 example.com/api/v1/gallery，我得到一个HTML文档作为响应：

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <link rel="icon" href="/logo-icon.png" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link rel="apple-touch-icon" href="/logo-icon.png" />
    <link rel="manifest" href="/manifest.json" />
    <title>example</title>
    <link href="/static/css/main.58efad5e.chunk.css" rel="stylesheet">
</head>

<body><noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <script>
        !function(e){function r(r){for(var n,l,i=r[0],f=r[1],a=r[2],c=0,s=[];c<i.length;c++)l=i[c],Object.prototype.hasOwnProperty.call(o,l)&&o[l]&&s.push(o[l][0]),o[l]=0;for(n in f)Object.prototype.hasOwnProperty.call(f,n)&&(e[n]=f[n]);for(p&&p(r);s.length;)s.shift()();return u.push.apply(u,a||[]),t()}function t(){for(var e,r=0;r<u.length;r++){for(var t=u[r],n=!0,i=1;i<t.length;i++){var f=t[i];0!==o[f]&&(n=!1)}n&&(u.splice(r--,1),e=l(l.s=t[0]))}return e}var n={},o={1:0},u=[];function l(r){if(n[r])return n[r].exports;var t=n[r]={i:r,l:!1,exports:{}};return e[r].call(t.exports,t,t.exports,l),t.l=!0,t.exports}l.m=e,l.c=n,l.d=function(e,r,t){l.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},l.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},l.t=function(e,r){if(1&r&&(e=l(e)),8&r)return e;if(4&r&&"object"==typeof e&&e&&e.__esModule)return e;var t=Object.create(null);if(l.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:e}),2&r&&"string"!=typeof e)for(var n in e)l.d(t,n,function(r){return e[r]}.bind(null,n));return t},l.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return l.d(r,"a",r),r},l.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},l.p="/";var i=this.webpackJsonpedelweiss=this.webpackJsonpedelweiss||[],f=i.push.bind(i);i.push=r,i=i.slice();for(var a=0;a<i.length;a++)r(i[a]);var p=f;t()}([])
    </script>
    <script src="/static/js/2.345244fe.chunk.js"></script>
    <script src="/static/js/main.814906bd.chunk.js"></script>
</body>

</html>

所以我的问题是，这是否有可能做到？如果可以的话，我该怎么办？我认为我的api和前端设置正确，但是如果您需要更多信息，请告诉我，以便我分享。

我的目标是将我的前端React应用程序（example.com）托管在cPanel上，并将我的Nodejs API托管在同一域（example.com）上的digitalocean上，我可以打路线example.com/api/v1/gallery

我希望你们能帮助我。

Answer 1

@Peter Kartalov，是的，我们可以做到这一点。解决此问题的方法之一是，我们可以从node / express应用程序为react应用程序提供服务，而不是在cPanel上托管react应用程序。

要做到这一点，我们需要以某种方式配置路由，例如，如果用户点击了example.com/，我们将把react应用程序（Static index.html）作为对浏览器和任何其他内容的响应进行发送与example.com/api有关，我们会将响应对象发送回客户端。

我们需要确保根据请求为请求/响应对象设置适当的标头。

Answer 2

如Venkat所述，您可以在已设置的同一digitalocean小滴上同时拥有React App和Node后端，而不必将它们放在不同的源上。

为此，您需要将react app的build软件包作为服务器，并且可以使用express将前端作为静态文件提供。 create-react-app文档here

中对此进行了很好的记录。

我已经构建了一个Web应用（reference），该应用遵循与使用express服务React应用的相同方法，示例代码如下，

const express = require("express");
const app = express();

// build is the folder which has my bundled react app
// generate this using 'npm run build' if you are using 'cra'

app.use(express.static(path.join(__dirname, "build")));

// this will serve the index.html file when you open your domain `example.com`

app.get("/*", (req, res) => {
  res.sendFile(path.join(__dirname, "build", "index.html"));
});

// you can specify your API routes here as you normally do

这将使您可以将前端和后端托管在同一主机上。

将前端React连接到后端Nodejs，两者都托管在不同的来源

2 个答案: