How to deploy react Remix framework for production on nginx?

Question

What config file I need to launch Remix application? It has no index.html file

Steps to reproduce ( https://remix.run/docs/en/v1/guides/deployment ):

npx create-remix@latest
? Where would you like to create your app? (./my-remix-app)
? Where do you want to deploy? Choose Remix if you're unsure, it's easy to change deployment targets. (Use arrow keys)
❯ Remix App Server
? TypeScript or JavaScript? (Use arrow keys)
❯ TypeScript
cd my-remix-app
npm run build

And we have to directories: public, build

And what is the next step to show it on website.com using nginx ?

Answer 1

The easiest is to choose the Remix App Server (which uses Express internally) or Express, then run remix build to build the app for production and run npm start to run the server.

After that, it's a normal Node.js server so you can configure your NGINX to forward requests on port 80 and 443 to your Remix app running in another port (3000 by default). This is normal Node.js + NGINX deployment, nothing specific of Remix.

Answer 2

right, you should build and start the node app first.

here's an example:

server {
  listen 80;
  listen 443 ssl http2;
  server_name  example.com;

  ssl_certificate /home/example.com/ssl.crt;
  ssl_certificate_key /home/example.com/ssl.key;
  ssl_session_cache shared:le_nginx_SSL:1m;
  ssl_session_timeout 1440m;

  ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
  ssl_prefer_server_ciphers on;

  ssl_ciphers "ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-AES128-SHA256:ECDHE-RSA-AES128-SHA256:ECDHE-ECDSA-AES128-SHA:ECDHE-RSA-AES256-SHA384:ECDHE-RSA-AES128-SHA:ECDHE-ECDSA-AES256-SHA384:ECDHE-ECDSA-AES256-SHA:ECDHE-RSA-AES256-SHA:DHE-RSA-AES128-SHA256:DHE-RSA-AES128-SHA:DHE-RSA-AES256-SHA256:DHE-RSA-AES256-SHA:ECDHE-ECDSA-DES-CBC3-SHA:ECDHE-RSA-DES-CBC3-SHA:EDH-RSA-DES-CBC3-SHA:AES128-GCM-SHA256:AES256-GCM-SHA384:AES128-SHA256:AES256-SHA256:AES128-SHA:AES256-SHA:DES-CBC3-SHA:!DSS";

#  add_header Access-Control-Allow-Origin "*";
  add_header Strict-Transport-Security "max-age=31536000;";
  
  access_log off;
#  error_log /home/logs/error.nginx.log crit;

  location / {
    if ($http_user_agent = Mozilla/4.0){
      return 503;
    }
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $host;
    proxy_set_header X-NginX-Proxy true;
    proxy_pass http://127.0.0.1:3000/;
    proxy_redirect off;
  }
}