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?

Sergio Xalambrí · Accepted Answer · 2021-12-15 21:46:04Z

9

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.

answered Dec 15, 2021 at 21:46

Sergio Xalambrí

1,2109 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Willin Wang · Accepted Answer · 2022-01-09 05:48:31Z

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

answered Jan 9, 2022 at 5:48

Willin Wang

1311 silver badge7 bronze badges

2 Comments

Habib Rehman Over a year ago

and would you care telling which file is this where you are putting this?

enriquein Over a year ago

You could argue that if the OP is asking about nginx configuration, OP would immediately recognize this as a regular nginx server block. This actually helped me clear some confusion caused by the oddly bad Remix documentation about deployment.

Collectives™ on Stack Overflow

How to deploy react Remix framework for production on nginx?

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related