Node.js NodeJS或ReactJs中的域和子域路由

网页的总体思路：

domain.com：导致管理员和卖家登录页面

shop.domain.com：指向卖家的店铺

计划使用React.js作为前端，使用Nodejs（expressjs）作为后端

还没有决定在Heroku上托管所有内容，或者只在Heroku上托管Nodejs后端，在其他地方托管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（或端点）呈现相应的页面。但有可能通过这种方式呈现React应用程序吗？因为我之前所做的基本上只是呈现

.ejs

页面，这就是为什么我不确定这一点，而且我以前从未使用过React.js

其次，如果我在另一台服务器（可能是Vercel或NGINX）上托管React应用程序，并使用REST API访问heroku中的后端服务，这是部署网站的正确方法吗？如果是这样，域和子域路由是在React应用程序的宿主站点上完成的，还是在代码本身内部完成的，而不是在Heroku中的expressjs？我相信expressjs只负责创建一系列要侦听的端点。例如，在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，而不考虑后端子域和域的路由问题。我相信这就是所谓的客户端呈现，因为每个RESTAPI都会返回要呈现的JSON数据

---

因此，如果我以这种方式执行，我们如何根据访问的URL确定React应用程序要显示的页面？例如，如果

domain.com

它将引导到仪表板页面，而

shop.domain.com

将引导到shop页面？

我认为这不是反应部分。React是浏览器库，无法处理域部件

我不建议使用express处理这部分，因为这需要使用反向代理，所以最好使用Nginx、Apache和其他一些服务器引擎来处理子域

您计划的内容可以像这样托管

领域

创建domain.com

将cname添加到shopping.domain.com

服务器

创建管理服务器、客户端服务器

反向代理那些服务器

客户

创建2个项目

domain.com服务管理响应生成文件

shop.domain.com为shop react生成文件提供服务

我还建议管理员应用程序使用静态文件托管，如果您不这样做的话

---

需要公开搜索引擎的管理页面。

首先，我从未使用Heroku托管，因此我的解决方案可能与您的环境不同 但是，我认为整个概念会对你有用

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

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

但有可能通过这种方式呈现React应用程序吗？ （我的理解是：react应用程序可以由SSR托管）

答：您可以使用代码拆分和服务器端渲染为react应用程序提供SSR，最好使用服务器端渲染 对于一些元标签和搜索引擎优化所需的网页，除非你需要完整的SSR应用程序。 如果您需要完整的ssr，还有一个奇特的框架Next.js。 从你提到的Vercel来看，你可能已经知道了

问：如果我在另一台服务器（可能是Vercel或NGINX或其他任何服务器）上托管React应用程序，并使用RESTAPI访问heroku中的后端服务，该怎么办 （我的理解是：react应用程序可以与其他服务器托管吗？ NGINX=使用服务器Instance， Vercel：使用无服务器架构 )

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

---

问：那么，假设我使用Heroku作为Express后端，这是否意味着我需要分别创建两个应用程序，而不是将它们组合在一起 A.您可以为计算机资源托管多台主机，也可以不托管。如果您计划使用多主机，则可能需要代理服务器来指向其他服务器， 相反，对于单个主机，反向代理指向每个应用程序

快速子域处理程序与vhost 答：没有固定的答案。您可以使用vhost或express子域处理程序实现所需的功能。或者两者兼而有之

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

我的建议是： 应用程序列表

react主机-nodejs应用程序

客户端api主机-nodejs应用程序

管理反应主机-节点应用程序

客户端api主机-nodejs应用程序

我使用AWS S3托管React应用程序和 用于API应用程序的EC2

结构概念。 如何构建结构

第一步。服务器托管。 第二步。网络层设置 步骤3.创建nodejs应用程序（应用程序层）

ubuntu@ip-您的ip:~/project$ls
api cli管理api配置库中间件模型节点模块包.json
ubuntu@ip-您的ip:~/project$cd api
ubuntu@ip-您的ip:~/project/api$ls
README.md app.js bin config.json pm2.config.js node_modules package.json路由
ubuntu@ip-您的ip:~/project/api$pm2 start pm2.config

PM2是节点应用程序解除监视程序，您可以为此使用任何守护程序

PM2

( 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.

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;
}

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