create-react-app | Is it possible to serve a file from backend instead of serving index.html when a browser connect to app

问题

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.

回答1:

This is what I do for my own MERN Stack application and it works, furthermore I always deploy my projects on heroku.

First thing that I do I first generate my SSL Cert and Key using:--> openssl

This is the command you would want to run: openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365
This command will generate you two files cert.perm and key.pem

Now it time to setup your server's https

const app = require('express')();
const https = require('https');
const fs = require('fs');

//GET home route
app.get('/', (req, res) => {
    res.send('Hello World');
});

// we will pass our 'app' to 'https' server
https.createServer({
    key: fs.readFileSync('./key.pem'),
    cert: fs.readFileSync('./cert.pem'),

}, app).listen(3000);

Noting the with convention you can also have an http server hooked up by doing the same as http.createServer and all you do is pass down the express app.
However if the are certain things that you want to restrict for http then you can separate the two from not using the same express app I hope this makes sense

回答2:

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

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!

来源：https://stackoverflow.com/questions/64735818/create-react-app-is-it-possible-to-serve-a-file-from-backend-instead-of-servin

标签

reactjs

ssl

https

create-react-app

certbot