Corporate SSL certificate with NGINX

Hello Wapplers,

I would like to share with you solution how to add HTTPS support with custom (corporate) certificates for your Wappler web-site based on NGINX reverse proxy.

Disclaimer: make sure you backup all your project files before editing core files.

1. We need to edit production target docker-compose.yml files which is located “\YourProject Folder.wappler\targets\YourTargetName\docker-compose.yml”
2. Add lines after your web container:

  web:
    container_name: nodejsserver
    hostname: nodejsserver

This will name our container so that NGINX can rely on it name
3. Then we need to remove 80 listenting port from our NodeJS so the configuration will be:

ports:
      - '3000:3000'

4. Then between dockerfile: ‘.wappler/targets/UAT/web/Dockerfile’ and volumes: lines we’ll add configuration for NGINX container

  nginx:
    container_name: nginx
    hostname: nginx
    depends_on:
      - 'web'
    image: nginx:latest
    ports:
      - 80:80
      - 443:443
    restart: always
    build:
      context: '.'
      dockerfile: 'nginx/Dockerfile'

5. Create nginx folder in your target folder and create file named Dockerfile and add context as bellow

FROM nginx
COPY nginx/default.conf /etc/nginx/conf.d/
COPY nginx/ssl/CERT.pem /etc/nginx/ssl/CERT.pem
COPY nginx/ssl/KEY.key /etc/nginx/ssl/KEY.key

6. Create ssl folder in your nginx folder and copy your certificate and key file. Edit Dockerfile according to your certificate and key file names.
7. Under nginx create file named default.conf and add context bellow

server {
    listen 80;
	
	server_name example.com;
    server_tokens off;
	
    location / {
        return 301 https://example.com$request_uri;
    }	
	
}

server {
    listen 443 default_server ssl http2;

    server_name example.com;
	
	ssl_certificate /etc/nginx/ssl/CERT.pem;
	ssl_certificate_key /etc/nginx/ssl/KEY.key;
    
	location / {
		proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
		proxy_set_header Host $host;
		proxy_pass http://nodejsserver:3000;
		proxy_http_version 1.1;
		proxy_set_header Upgrade $http_upgrade;
		proxy_set_header Connection "upgrade";
  }
}

Edit config file according to your certificate file names.

In short: we are creating one server which will listen on port 80 and forward all request to port 443, second server will listen all requests from port 443 and handle all requests
Such specific configuration for 443 server is needed if we’re using sockets in our project - https://socket.io/docs/v3/reverse-proxy/

That’s it - now you can deploy your target and see all working.