CloudRun + Firebase Hosting: Invalid websocket upgrade

[sapphire008]

Description

Hi,

I am trying to deploy a NiceGUI app on CloudRun and use Firebase Hosting to configure my CDN and custom domains. The deployed app on CloudRun has no issues; all functionalities work as expected. However, when I integrate Firebase Hosting with Cloud Run, I can still visit the site under the Firebase Hosting public URLs; I can also visit any subpages. However, none of the buttons that trigger my Python functions work. I inspected the console of my Chrome browser, and found:

WebSocket connection to 'wss://job-review-site-nicegui.web.app/_nicegui_ws/socket.io/?client_id=e744772a-66b2-4210-9011-bd3f717ef041&EIO=4&transport=websocket' failed: 

The corresponding error in my CloudRun log shows

GET400422 B3 msChrome 126 https://job-review-site-pdkd5wow4q-uc.a.run.app/_nicegui_ws/socket.io/?EIO=4&client_id=e744772a-66b2-4210-9011-bd3f717ef041&transport=websocket 

This issue seems to be related: #2781. I did not initially set up nginx frontend proxy. But to follow the solution provided in that issue, I set up nginx using the solutino provided by CloudRun as described here: https://cloud.google.com/run/docs/internet-proxy-nginx-sidecar. But the problem still persists. Here is my nginx.conf

server {
    # Listen at port 8080
    listen 8080; 
    # Server at localhost
    server_name _;
    # Enables gzip compression to make our app faster
    gzip on;

    location / {
        # Passes initial requests to port 8080 to `main-app` container at port 8888
        proxy_pass   http://127.0.0.1:8888;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "Upgrade";
    }
}

Here is my CloudRun deployment

# Cloud Run Services template
# https://cloud.google.com/run/docs/reference/yaml/v1#service
apiVersion: serving.knative.dev/v1
kind: Service
metadata:
  name: {{ PROJECT_NAME }}
  {% if PROJECT_NUMBER %}
  # project number
  namespace: {{ PROJECT_NUMBER }}
  {% endif %}
  labels:
    cloud.googleapis.com/location: us-central1
  annotations:
    # Required to use Cloud Run multi-containers (preview feature)
    run.googleapis.com/launch-stage: BETA
    run.googleapis.com/description: Multiworker service for NiceGUI app
    # Externally available
    run.googleapis.com/ingress: all
spec:
  template:
    metadata:
      name: {{ REVISION_NAME }}
      annotations:
        # Defines container startup order within multi-container service.
        # Below requires main-app container to spin up before nginx container,
        # which depends on the main-app container.
        # https://cloud.google.com/run/docs/configuring/containers#container-ordering
        run.googleapis.com/container-dependencies: "{nginx: [main-app]}"
    spec:
      containerConcurrency: {{ MAX_CONCURRENT_REQUESTS|default(80, true) }}
      timeoutSeconds: {{ REQUEST_TIMEOUT_SEC }} # max 1 hour
      {% if SERVICE_ACCOUNT_EMAIL %}
      serviceAccountName: {{ SERVICE_ACCOUNT_EMAIL }}
      {% endif %}
      containers:
        # A) Serving ingress container "nginx" listening at PORT 8080
        # Main entrypoint of multi-container service.
        # Source is stored in NGINX_CONFIG secret in Secret Manager.
        # Any pings to this container will proxy over to main app container at PORT 8888.
        # https://cloud.google.com/run/docs/container-contract#port
        - image: nginx
          name: nginx
          ports:
            - name: http1
              containerPort: 8080
          resources:
            limits:
              cpu: 500m
              memory: 256Mi
          volumeMounts:
            - name: nginx-conf-secret
              mountPath: "/etc/nginx/conf.d/"
              readOnly: true
          startupProbe:
            timeoutSeconds: 240
            periodSeconds: 240
            failureThreshold: 1
            tcpSocket:
              port: 8080
        - image: {{ IMAGE_URI}}
          name: main-app
          env:
          resources:
            limits:
              cpu: "{{ CPU_LIMIT|default(1, true) }}"
              memory: {{ MEMORY_LIMMIT|default("4Gi", true) }}
          # Mounting the secret as a volume
          volumeMounts:
            - name: {{ PROJECT_NAME }}-jpl-site-api-key
              mountPath: "/var/keys"
              readOnly: false
          startupProbe:
            timeoutSeconds: 240
            periodSeconds: 240
            failureThreshold: 1
            tcpSocket:
              port: 8888
      volumes:
        - name: {{ PROJECT_NAME }}-jpl-site-api-key
          secret:
            secretName: JPL_SITE_API_KEY_FILE
            items:
              - key: "latest"
                path: "api_key.json"
        - name: nginx-conf-secret
          secret:
            secretName: NGINX_CONFIG
            items:
              - key: "latest"
                path: "default.conf"

I have checked from the Firebase Hosting site that the Upgrade headers are indeed being added. But it seems like something additional is needed here.