Question 73006 in Reactjs Question posted in
The new location for the React Documentation can be found here.

SSL certificate for react app in nginx docker container – Reactjs

I have a working docker nginx container with a react app running inside. I did not to suceed adding my ssl-certificates, which are already running in the node.js backend app.

This is how my dockerfile looks like:

FROM nginx

COPY build/ /usr/share/nginx/html

COPY certs/abc.de_ssl_certificate.cer /etc/nginx/certs/

COPY certs/*.abc.de_private_key.key /etc/nginx/certs/

COPY nginx.conf /etc/nginx/conf.d/default.conf

I tried to create an nginx.conf file and copy it to the container automatically, but as soon as I try anything with the config-file, the server is not reachable on the browser. Only the http request gets forwarded to https. I tried something like this:

server {
  listen 80;
  server_name abc.de;

  location / {
    return 301 https://$host$request_uri;
  }
}

server {
  listen 443 ssl;
  server_name abc.de;

  ssl_certificate /etc/nginx/certs/abc.de_ssl_certificate.cer;
  ssl_certificate_key /etc/nginx/certs/*.abc.de_private_key.key;

    location / {
    proxy_pass http://localhost:3000;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the problem. The path to the application is not port 3000 as the files are in the folder of nginx itself.

    server {
    listen 80;
    server_name abc.de;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # Optional: Redirect all HTTP requests to HTTPS
    if ($scheme != "https") {
        return 301 https://$server_name$request_uri;
    }
}

server {
    listen 443 ssl http2;
    server_name abc.de;

    ssl_certificate /etc/nginx/certs/abc.de_ssl_certificate.cer;
    ssl_certificate_key /etc/nginx/certs/*.abc.de_private_key.key;

    root /usr/share/nginx/html;
    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }
}

  2. 0

    I used this code to proxy pass ssl to and ssl encrypted REST API, but should work as well for you:

    server
{
    listen 443 ssl http2;
    server_name abc.de;
    ssl on;
    ssl_certificate /etc/ssl/abc.de/cert.crt;
    ssl_certificate_key /etc/ssl/abc.de/cert.key;

    location /
    {
        proxy_pass https://localhost:3000;
        proxy_ssl_server_name on;
        proxy_set_header Accept-Encoding "";
        proxy_set_header Cache-Control no-cache;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header X-Real-IP $remote_addr;

    }
}

    As you can see, there are missing settins on your code:

    On server block:

                ssl on;

    And on location:

                proxy_ssl_server_name on;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';

    It should solve the ssl problems (this settings are for a CA validated cert), for a self signed cert use, on location:

     proxy_ssl_trusted_certificate /etc/ssl/abc.de/cert.pem;
 proxy_ssl_verify              off;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search