Firebase Functions: Upload Error: HTTP Error: 400, Unknown Error

Viewed 1710

I tried to deploy the server side of my Angular Universal SSR app to Firebase Functions, but ran into the error Upload Error: HTTP Error: 400, Unknown Error.

From what I understand, this error happens pretty often when the deployment is a huge file (in my case it's 438mb). The reason it's so big is because I'm deploying localized versions of my website so dist/browser and dist/server both have en, de, and fr directories with pretty much the same content. How can I solve this issue?

console output

=== Deploying to 'PROJECT_NAME'...

i  deploying functions
Running command: npm --prefix "$RESOURCE_DIR" run lint
+  functions: Finished running predeploy script.
i  functions: ensuring required API cloudfunctions.googleapis.com is enabled...
i  functions: ensuring required API cloudbuild.googleapis.com is enabled...
+  functions: required API cloudfunctions.googleapis.com is enabled
i  functions: preparing dist directory for uploading...
i  functions: packaged dist (438.04 MB) for uploading
!  functions: Upload Error: HTTP Error: 400, Unknown Error

Error: HTTP Error: 400, Unknown Error

index.js

const functions = require('firebase-functions');

// Increase readability in Cloud Logging
require("firebase-functions/lib/logger/compat");

const expressApp = require('./server/proxy').app();

exports.ssr = functions
  .region('us-central1')
  .runWith({})
  .https
  .onRequest(expressApp);

proxy.ts (which gets compiled to js and put into the dist/server folder)

import * as express from 'express';
import * as cookieParser from 'cookie-parser';
import { join } from 'path';

export function app() {
  const server = express();

  server.use(cookieParser());

  const languages = ['en', 'de', 'fr'];

  languages.forEach((locale) => {
    const appServerModule = require(join(__dirname, locale, 'main.js'));
    server.use(`/${locale}`, appServerModule.app(locale));
  });

  server.get('/(:locale(en|fr|de)/)?*', (req, res, next) => {
    const { locale } = req.params;
    let userLocale = (req.headers['accept-language'] || '').substring(0, 2);

    if(!languages.includes(userLocale)) {
      userLocale = 'en';
    }

    if (locale !== userLocale) {
      res.redirect(userLocale + req.url);
    }
  });

  return server;
}

function run() {
  app().listen(4200, () => {
    console.log(`Node Express server listening on http://localhost:4200`);
  });
}

run();
3 Answers

I had the same problem with NextJS and firebase functions,

Here is my solution:

  1. Remove node_modules and run npm i
  2. Remove cache files, out or public builds
  3. Check functions console registry from firebase panel (here you can check your serve status/logs)

I hope this could help to someone.

I decreased the size of my deployment, and it immediately fixed the issue. I would say you just have to optimize the files you have, or think about storing some files in another location other than the firebase functions codebase (perhaps firebase storage)

I had this issue and just was able to fix it. In my case I had deployed to firebase a number of times and with each deploy the upload directory got bigger and bigger. I ended up changing my hosting settings to only keep the last 3 deploys which ended up dropping my package size from around 170MB to 15MB once the previous deploys were deleted. For some reason with each deploy it would take in each previous deploy when trying to upload a new release which doesn't make sense to me.

Related