NodeJS或ReactJs中的域和子域路由

Question

网页大意：

1. domain.com：指向管理员和销售商的登录页面。
2. shop.domain.com：指向卖家的店铺。
3. 计划使用react.Js作为前端，Nodejs（Express Js）作为后端。
4. 还没有决定将所有内容都托管在Heroku上，或者只将Nodejs后端托管在Heroku上，而将React.js托管在其他地方，因为我们将开发过程分开。

如何根据URL访问（带或不带子域）将用户重定向到相应的页面

事实上，有一个来自npm的名为express-subdomain-handler的包帮助服务器端的域和子域路由，我没有问题地做到这一点并部署到Heroku。

app.use(subdomainHandler({
    baseUrl: 'localhost',
    prefix: 'subdomain',
    logger: true
}));

app.get('/', function (request, response) {
    response.send('WELCOME TO LOCALHOST');
});

app.get('/subdomain/:shop', function (request, response) {
    response.send('WELCOME TO SUBDOMAIN');
});

我相信上面的路由更倾向于服务器端呈现，因为它只根据访问的URL（或endpoint）呈现相应的页面。但用这种方式渲染React app有可能吗？因为我以前所做的只是基本上呈现.ejs页面，这就是为什么我不确定这一点，而且我以前从未使用过react.js。

其次，如果我将React app托管在另一台服务器上，也许是Vercel或NGINX或任何东西，并使用REST API访问heroku中的后端服务，这是部署网站的正确方法吗？如果是这样，那么域和子域路由是在React应用程序的托管站点上完成的，还是在代码本身内部完成的，而不是在Heroku中的expressjs？我相信expressjs只负责创建一系列要侦听endpoint。例如，在express.js内部：

app.get('/hello', (req, res) => {
   res.send("Hello from domain");
})

app.get('/subdomain/hello', (req, res) => {
   res.send("Hello from subdomain");
})

而react应用程序将只需要访问这些API，而无需考虑后端的子域和域的路由问题。我相信这就是所谓的客户端呈现，因为每个REST API都会返回要呈现的JSON数据。

那么如果我这样执行的话，我们如何根据访问的URL来确定React app要显示的页面呢？例如，如果domain.com将指向仪表板页面，而shop.domain.com将指向shop页面？

Answer 1

首先，我从来没有使用Heroku进行托管，所以我的解决方案可能与您的环境不同，但我认为整个概念将适用于您。

你的问题没有固定的答案，但我现在的想法对你有帮助：）你的问题有很多子问题，所以我把它分开了。

而且我的英语不太流利，所以你我之间可能会有一些错误的交流，如果我从你的问题中理解的有错误的话，请告诉我。

（我理解的：react app可以由SSR托管吗）

a.你可以使用代码拆分和服务器端呈现的方式为react app提供SSR服务，对于一些meta tag和SEO需要的页面最好使用服务器端呈现，除非你需要完整的SSR应用。如果您需要完整的ssr，还有一个很好的框架Next.js。你可能已经知道了这个判断，因为你提到了Vercel。

（我理解的是：react应用程序可以托管在另一个服务器上吗？NGINX=使用服务器instace，Vercel：使用无服务器架构）

A.也可以这样托管。看起来这个更像是反应。但是我不推荐Vercel托管，因为电子商务服务需要很多端点，看看Vercel的定价政策。

A.可以为计算机资源托管多个主机，也可以不托管多个主机。如果您计划多主机，您可能需要代理服务器来指向其他服务器，相反，为单主机，反向代理来指向每个应用程序。

A.没有固定答案。您可以使用vhost或express-subdomain-handler来实现您想要的目标。或者两者兼而有之。

我的解决方案概念是使用带有反向代理的单个服务器实例。让Nginx在单个服务器上虚拟化你的多个应用程序。

应用程序列表。

1. 反应主机-节点JS应用程序
2. 客户端api主机-nodejs应用程序
3. Admin react主机-nodejs应用程序
4. 客户端api主机-nodejs应用程序

我使用AWS3托管React应用程序，使用EC2托管API应用程序。

( NS / DNS ) : domain.com points your-ip
    |
    ( Server instance )
        |
        ( Nginx ) - virtual hosting
            |
            ( www.domain.com ) --- > client react host : ( node app for server side rendering ) : React rendered file for each route. 
                                                       Or you can just respond with index.html for all route for skipping SSR
            |
            ( api.domain.com ) --- > clinet api host : api.domain.com/what, api.domain.com/what/ever?you=want
            |
            ( admin.domain.com ) ---> admin react host : admin.domain.com/* : sending index.html  //static hosting and let all route point for index.html
            |
            ( admin-api.domain.com ) ---> admin react host : Only if you want to seperate. Or you can combine this with api.domain.com using subrouter

如何构建结构。

I don't know much about Heroku but I guess there are aws ec2-like service(cloud computing) and s3-like service(static file service),
This can be single or multiple depending your choice. let's say you wanna go with single server and use virtual host for multiple service end point.

let's say name-server and DNS server part is network layer. I used AWS Route 53 for this.

    2.1 Buy an domain
    www.your-service.com 
    
    2.2 Add some CNAME to point your web-server host
    - your-service.com,
    - www.your-service.com
    - api.your-service.com,
    - admin.your-service.com    
.
.
.

I'm assuming that you had one already judging by code in your question.

ubuntu@ip-your-ip:~/project$ ls
api  cli   admin   admin-api   config   libraries  middlewares  models  node_modules   package.json 

ubuntu@ip-your-ip:~/project$ cd api

ubuntu@ip-your-ip:~/project/api$ ls
README.md  app.js  bin  config.json  pm2.config.js  node_modules  package.json  routes

ubuntu@ip-your-ip:~/project/api$ pm2 start pm2.config

PM2是节点应用程序的deamonizer，您可以为此使用任何守护进程。

PM2.5基准电压。https://pm2.keymetrics.io/docs/usage/application-declaration/

步骤3.nodejs应用程序的Nginx点

nano /etc/nginx/nginx.conf

listen 80;
server_name client.domain.com;
location / {
             proxy_http_version 1.1;
             proxy_pass  http://localhost:3000;
}

listen 80;
server_name api.domain.com;
location / {
             proxy_http_version 1.1;
             proxy_pass  http://localhost:3001;
}

listen 80;
server_name admin.domain.com;
location / {
             proxy_http_version 1.1;
             proxy_pass  http://localhost:4000;
}

listen 80;
server_name admin-api.domain.com;
location / {
             proxy_http_version 1.1;
             proxy_pass  http://localhost:4001;
}

希望这个解决方案对您有所帮助：）

Answer 2

API/和API/subdomain可以由NGINX虚拟主机嵌入，但由于您计划为subdomain提供虚拟主机，api.domain.com。

使用api.domain.com/foo，sub.domain.com/bar似乎更合理！

listen 80;
server_name api.domain.com/api;
location / {
             proxy_http_version 1.1;
             proxy_pass  http://localhost:4000;
}

listen 80;
server_name api.domain.com/api/subdomain;
location / {
             proxy_http_version 1.1;
             proxy_pass  http://localhost:4000;
             #notice that api application is one and you are seperating namespace in it.
             #you can do the same thing in Node.js with subrouter. ( check out Router API in Nodejs official Site )
}

api.domain.com/foo, sub.domain.com/bar
listen 80;
server_name api.domain.com;
location / {
             proxy_http_version 1.1;
             proxy_pass  http://localhost:4000;#this one is node application listening port 4000
}

listen 80;
server_name sub.domain.com/;
location / {
             proxy_http_version 1.1;
             proxy_pass  http://localhost:4001;#and this is node application listening port 4001
}

    GET    api.domain.com/api/foo
    GET    api.domain.com/api/subdomain/bar

    GET    api.domain.com/foo
    GET    sub.domatin.com/bar

S3不在EC2实例中，而是在AWS数据中心的某个地方。所以虚拟主机不是路由S3桶的解决方案。您可以使用Route53为您的域路由S3 bucket,而不是这样做。

如果您已经有域。您可以将您的名称服务器配置为指向AWS名称服务器。注册域后,您可以从Route 53控制台获取NS/DNS。

同时，静态托管react应用程序（类似于S3的托管）有一个问题，您必须放弃SSR。因为S3是一个静态主机，所以它不能像Lambda或服务器实例那样执行。

S3将为请求检索存储的文件，在这种情况下，它将是react应用程序的构建文件。所以，如果我是你，我将使用S3只用于管理反应应用程序，因为SEO在管理应用程序上并不重要。

让您的根域（www.domain.com）指向EC2中的客户端nodejs服务器。并嵌套服务器的react构建文件。React SSR app via Express解释起来相当复杂，但有很多例子，所以你可能需要谷歌一下。

离题，我在S3上建立了我的电子商务react应用程序，我很后悔做这件事，因为SSR部分不容易。关于它的解决方案有很多，但其中的一个，Next.js框架似乎是最好的选择，以尽快完成ssr。