创建反应应用程序|当浏览器连接到应用程序时，是否可以从后端提供文件而不是提供index.html [英] create-react-app | Is it possible to serve a file from backend instead of serving index.html when a browser connect to app

问题描述

我一直在尝试在我的Heroku部署的应用程序上启用SSL.
在这一步上，我的坚持远远超出了必要:

---

我正在关注

2.将此添加到您的快速路由器中:

---

 //服务器静态资产(如果正在生产中)//检查我们是否在生产中如果(process.env.NODE_ENV ===生产"){//设置静态文件夹app.use(express.static("client/build")))；//我们想得到任何不是那些api路由之一的东西/************************************ * *//***添加certbot验证码*//************************************ * */app.get("/.well-known/acme-challenge/url_code"，(req，res)=>{console.log(获取(/.众所周知/acme-挑战/ur_code)");//__dirname是当前目录名称//我们将告诉服务器是否未击中任何路由，然后查看构建文件夹index.htmlres.sendFile(path.resolve(__ dirname，"sec"，"ssl")));});/*********************************** */app.get("*"，(req，res)=> {//__dirname是当前目录名称//我们将告诉服务器是否未击中任何路由，然后查看构建文件夹index.htmlres.sendFile(path.resolve(__ dirname，"client"，"build"，"index.html")));});} 

就是这样！

I have been trying to enable SSL on my MERN heroku-deployed app.
I have been stuck at this step far more than necessary:

---

I am following this tutorial to set-up SSL certificate on my website.
After, generating the certificate using this command locally:

sudo certbot certonly --manual

I was asked to do this by the terminal:

Create a file containing just this data:

dC9Ry5Ps_qgkOheuWnxCXFobim8vshqMqbDC9FQS4ic.noFTXhkC3HFnZ-RC9djrM6FpWGRy2AFSB17xz59apDA

And make it available on your web server at this URL:

http://www.site_name.com/.well-known/acme-challenge/dC9Ry5Ps_qgkOheuWnxCXFobim8vshqMqbDC9FQS4ic

According to the tutorial, I had to do this on the backend:

app.get('/.well-known/acme-challenge/:content', function(req, res) {
  res.send('xxxxxxxxxxxx-yyyy.zzzzzzzzzzzzzzzzzzz')
})

I did that, and as expected it did not work since the certbot will be targeting the front-end and not the backend according to this:

Create a file containing just this data:

dC9Ry5Ps_qgkOheuWnxCXFobim8vshqMqbDC9FQS4ic.noFTXhkC3HFnZ-RC9djrM6FpWGRy2AFSB17xz59apDA

And make it available on your web server at this URL:

http://www.site_name.com/.well-known/acme-challenge/dC9Ry5Ps_qgkOheuWnxCXFobim8vshqMqbDC9FQS4ic

And it just doesn't make sense for me, to make this data available

dC9Ry5Ps_qgkOheuWnxCXFobim8vshqMqbDC9FQS4ic.noFTXhkC3HFnZ-RC9djrM6FpWGRy2AFSB17xz59apDA

on the client side.
So my question is: Should it be available on the client side or the server side? It it's on the server side, should I just write code on the client side that would communicate with the server in order to retrieve it?

---

So when the verification process happens and it tries to access the backend endpoint through this:

http://www.site_name.com/.well-known/acme-challenge/dC9Ry5Ps_qgkOheuWnxCXFobim8vshqMqbDC9FQS4ic

The app treats it as it's trying to access client-side file...
In other words, I am unable to make it target the backend endpoint.
All tutorials are ignoring this point and it makes me feel like I'm missing something or that I'm stupid.

So any idea what I should do?

---

This guy seems to be having the same problem as me but no answer was provided.

解决方案

I found a solution: Serving a static file from backend.

1. Create a file in the root folder (root_folder/sec/ssl) containing the code :
   

2. Add this to your express router:

---

// Server static assets if in production
// Check if we are in production
if (process.env.NODE_ENV === "production") {
  // Set static folder
  app.use(express.static("client/build"));
  // We want to get anything that is not one of those api routes
  /********************************** */
  /***Adding the certbot verification code */
  /********************************** */
  app.get(
    "/.well-known/acme-challenge/url_code",
    (req, res) => {
      console.log(
        "get(/.well-known/acme-challenge/ur_code)"
      );
      // __dirname is the current directory name
      //We will tell the server if none of those routes are being hit then look into the build folder index.html
      res.sendFile(path.resolve(__dirname, "sec", "ssl"));
    }
  );
  /*********************************** */
  app.get("*", (req, res) => {
    // __dirname is the current directory name
    //We will tell the server if none of those routes are being hit then look into the build folder index.html
    res.sendFile(path.resolve(__dirname, "client", "build", "index.html"));
  });
}

That's it!

这篇关于创建反应应用程序|当浏览器连接到应用程序时，是否可以从后端提供文件而不是提供index.html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！