Score:0

express js app with nignx reverse proxy 'redirected you too many times.'

cn flag

im using pm2 to run my MERN app as a proccess, when i type curl http://localhost:3000 in the console the output is indeed from my app. but nginx reverse proxy is not working. the app is running on a vps and connected to a domain name. but im getting 'redirected you too many times.' from the browser.

server.js

const PORT = 3000
const app = express()

const router = express.Router()

const { persistor, store } = createPersistor()

const serverRenderer = (req, res, next) => {

 app.get('/*', function (req, res) {
   res.sendFile(path.join(__dirname, '../build/index.html'), function (err) {
     if (err) {
       res.status(500).send(err)
     }
   })
 })

 const context = {}

 fs.readFile(path.resolve('./build/index.html'), 'utf8', (err, data) => {
   if (err) {
     console.error(err)
     return res.status(500).send('An error occurred')
   }
   return res.send(
     data.replace(
       '<div id="root"></div>',
       `<div id="root">
       ${ReactDOMServer.renderToString(
         <Provider store={store}>
           <StaticRouter location={req.url} context={context}>
             <PersistGate loading={null} persistor={persistor}>
               <App />
             </PersistGate>
           </StaticRouter>
         </Provider>
       )}
       </div>`
     )
   )
 })
}

router.use('^/$', serverRenderer)

router.use(
  express.static(path.resolve(__dirname, '..', 'build'))
)

app.use(router)

app.listen(PORT, () => {
  console.log(`SSR running on port ${PORT}`)
})

nginx/sites-available/default:

server {
listen 80 default_server;
listen [::]:80 default_server;

server_name 198.51.100.255;
return 302 $scheme://mysite.com$request_uri;

location / {
    # First attempt to serve request as file, then
    # as directory, then fall back to displaying a 404.
    try_files $uri $uri/ =404;
    proxy_pass http://localhost:3000;
    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;
 }
}

and there is no error log.

note: i didnt configure SSL yet.

Michael Hampton avatar
cz flag
Indeed, you are redirecting all requests in nginx to the same URL without condition. Why have you set up this redirect?
cn flag
@MichaelHampton so i can run my app in port 3000 and nginx in port 80 as web server. and serve my app through reverse proxy.
Michael Hampton avatar
cz flag
That doesn't make sense. There is no reason shown for that redirect to be there, and it is the obvious cause of the problem.
cn flag
@MichaelHampton do you have any suggestions or resources on how i can do this proporly
Michael Hampton avatar
cz flag
Remove the inappropriate redirect.
mangohost

Post an answer

Most people don’t grasp that asking a lot of questions unlocks learning and improves interpersonal bonding. In Alison’s studies, for example, though people could accurately recall how many questions had been asked in their conversations, they didn’t intuit the link between questions and liking. Across four studies, in which participants were engaged in conversations themselves or read transcripts of others’ conversations, people tended not to realize that question asking would influence—or had influenced—the level of amity between the conversationalists.