Configurer un Site Wix (wixsite) derrière un Reverse Proxy NGINX

Dans cet article, nous allons expliquer comment configurer un site Wix derrière un reverse proxy NGINX. Nous couvrirons deux configurations : une sur un serveur NGINX existant et une sur Kubernetes.

Configuration sur un Serveur NGINX Existant

Prérequis:

  • Serveur NGINX fonctionnel.
  • Domaine pointant vers votre serveur NGINX.

Étape 1 : Ajouter la Configuration NGINX

Ajoutez la configuration suivante dans votre fichier de configuration NGINX (par exemple, /etc/nginx/conf.d/default.conf):

server {
    listen 80;
    server_name votre_domaine.com;

    location ~ ^/(.*)$ {
        gzip on;
        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
        gzip_proxied any;
        gzip_min_length 1000;

        proxy_ssl_server_name on;
        proxy_ssl_verify off;
        proxy_set_header Referer https://votre_site_wix.wixsite.com/nomdusite;
        add_header Host votre_site_wix.wixsite.com;
        proxy_set_header X-Forwarded-Host "";
        proxy_set_header X-Forwarded-For "";
        proxy_set_header Accept-Encoding "";
        proxy_set_header Cookie "";
        proxy_pass_request_headers on;
        proxy_http_version 1.1;
        resolver 8.8.8.8;
        proxy_pass https://votre_site_wix.wixsite.com/nomdusite/$1$is_args$args;
        sub_filter_types text/html application/javascript application/x-javascript text/javascript;

        # Injecter le script pour masquer WIX_ADS
        sub_filter '</body>' '<script>
          document.addEventListener("DOMContentLoaded", function() {
            var ads = document.getElementById("WIX_ADS");
            if (ads) {
                ads.style.display = "none";
            }
            document.querySelectorAll("style").forEach(function(style) {
                if (style.textContent.includes("--wix-ads-height")) {
                    style.textContent = style.textContent.replace(/--wix-ads-height:[^;]+;/g, match => {
                        let propName = match.split(":")[0];
                        return `${propName}: initial !important;`;
                    });
                }
            });
          });
          </script></body>';

        # Substitutions existantes
        sub_filter "https%3A%2F%2Fvotre_site_wix.wixsite.com%2Fnomdusite" "https%3A%2F%2F$http_host";
        sub_filter "https%3A%2F%2Fvotre_site_wix.wixsite.com" "https%3A%2F%2F$http_host";
        sub_filter https://votre_site_wix.wixsite.com/nomdusite https://$http_host;
        sub_filter https://votre_site_wix.wixsite.com https://$http_host;
        sub_filter "https:\/\/votre_site_wix.wixsite.com\/nomdusite" "https:\/\/$http_host";
        sub_filter "https:\/\/votre_site_wix.wixsite.com" "https:\/\/$http_host";
        sub_filter_once off;
    }
}

Étape 2 : Redémarrer NGINX

Après avoir modifié le fichier de configuration, redémarrez NGINX pour appliquer les changements :

sudo systemctl restart nginx

Votre site sera maintenant accessible sur http://votre_domaine.com
Charge à vous d’ajouter une configuration TLS si nécessaire.

Configuration sur Kubernetes

Prérequis:

  • Cluster Kubernetes fonctionnel.
  • kubectl configuré pour votre cluster.
  • Un domaine pointant vers votre cluster Kubernetes.

Étape 1 : Créer le ConfigMap

apiVersion: v1
kind: ConfigMap
metadata:
  name: nginx-config
  namespace: default
data:
  nginx.conf: |
    server {
        listen 80;
        server_name votre_domaine.com;

        location ~ ^/(.*)$ {
            gzip on;
            gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
            gzip_proxied any;
            gzip_min_length 1000;

            proxy_ssl_server_name on;
            proxy_ssl_verify off;
            proxy_set_header Referer https://votre_site_wix.wixsite.com/nomdusite;
            add_header Host votre_site_wix.wixsite.com;
            proxy_set_header X-Forwarded-Host "";
            proxy_set_header X-Forwarded-For "";
            proxy_set_header Accept-Encoding "";
            proxy_set_header Cookie "";
            proxy_pass_request_headers on;
            proxy_http_version 1.1;
            resolver 8.8.8.8;
            proxy_pass https://votre_site_wix.wixsite.com/nomdusite/$1$is_args$args;
            sub_filter_types text/html application/javascript application/x-javascript text/javascript;

            # Injecter le script pour masquer WIX_ADS
            sub_filter '</body>' '<script>
              document.addEventListener("DOMContentLoaded", function() {
                var ads = document.getElementById("WIX_ADS");
                if (ads) {
                    ads.style.display = "none";
                }
                document.querySelectorAll("style").forEach(function(style) {
                    if (style.textContent.includes("--wix-ads-height")) {
                        style.textContent = style.textContent.replace(/--wix-ads-height:[^;]+;/g, match => {
                            let propName = match.split(":")[0];
                            return `${propName}: initial !important;`;
                        });
                    }
                });
              });
              </script></body>';

            # Substitutions existantes
            sub_filter "https%3A%2F%2Fvotre_site_wix.wixsite.com%2Fnomdusite" "https%3A%2F%2F$http_host";
            sub_filter "https%3A%2F%2Fvotre_site_wix.wixsite.com" "https%3A%2F%2F$http_host";
            sub_filter https://votre_site_wix.wixsite.com/nomdusite https://$http_host;
            sub_filter https://votre_site_wix.wixsite.com https://$http_host;
            sub_filter "https:\/\/votre_site_wix.wixsite.com\/nomdusite" "https:\/\/$http_host";
            sub_filter "https:\/\/votre_site_wix.wixsite.com" "https:\/\/$http_host";
            sub_filter_once off;
        }
    }

Appliquez le ConfigMap:

kubectl apply -f nginx-config.yaml

Étape 2 : Créer le Deployment

apiVersion: apps/v1
kind: Deployment
metadata:
  name: nginx-deployment
  namespace: default
spec:
  replicas: 2
  selector:
    matchLabels:
      app: nginx
  template:
    metadata:
      labels:
        app: nginx
    spec:
      containers:
      - name: nginx
        image: nginx:latest
        volumeMounts:
        - name: nginx-config-volume
          mountPath: /etc/nginx/conf.d
      volumes:
      - name: nginx-config-volume
        configMap:
          name: nginx-config

Appliquez le Deployment:

kubectl apply -f nginx-deployment.yaml

Étape 3 : Créer le Service

apiVersion: v1
kind: Service
metadata:
  name: nginx-proxy-service
  namespace: default
spec:
  clusterIP: 10.43.39.63
  clusterIPs:
    - 10.43.39.63
  internalTrafficPolicy: Cluster
  ipFamilies:
    - IPv4
  ipFamilyPolicy: SingleStack
  ports:
    - port: 80
      protocol: TCP
      targetPort: 80
  selector:
    app: nginx-proxy
  sessionAffinity: None
  type: ClusterIP

Appliquez le Service:

kubectl apply -f nginx-service.yaml

Étape 4 : Créer l’Ingress

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: nginx-ingress
  namespace: default
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
spec:
  rules:
  - host: votre_domaine.com
    http:
      paths:
      - path: /
        pathType: ImplementationSpecific
        backend:
          service:
            name: nginx-proxy-service
            port:
              number: 80
  tls:
    - hosts:
        - votre_domaine.com
      secretName: tls-votre_domaine-com

Appliquez l’Ingress:

kubectl apply -f nginx-ingress.yaml

Votre site sera maintenant accessible sur https://votre_domaine.com

Avec cette configuration, vous pourrez intégrer votre site Wix derrière votre domaine existant et donner à votre site une apparence plus professionnelle. Assurez-vous de tester chaque étape pour vérifier que tout fonctionne correctement.

Étiquettes

Publications similaires