Vue+Pusher实时应用部署Firebase：Node.js服务与authEndpoint配置

Great question! Let's break this down into two key parts: getting your Node.js Pusher auth service live on the public internet (using Firebase's native tools) and updating your Vue app's authEndpoint to point to it.

Firebase Cloud Functions is the ideal home for this lightweight auth service—it’s serverless, integrates seamlessly with Firebase Hosting (where your Vue app will live), and handles scaling automatically.

Step 1: Set Up Firebase Functions #

First, make sure you have the Firebase CLI installed and configured:

npm install -g firebase-tools
firebase login

Initialize Firebase Functions in your project (skip this if you’ve already set up Firebase for your Vue app):

firebase init functions

Select your existing Firebase project, choose JavaScript as the language, and opt out of ESLint if you don’t need it.

Step 2: Adapt Your Node.js Code for Cloud Functions #

Your existing Express app can be wrapped into a Cloud Function with a few tweaks. Replace the code in functions/index.js with this modified version:

const functions = require('firebase-functions');
const express = require('express')
const bodyParser = require('body-parser')
const Pusher = require('pusher')
const crypto = require('crypto')
const cors = require('cors')

const app = express()

// Use Firebase environment variables to store Pusher credentials (no hardcoding!)
const pusher = new Pusher({
  appId: functions.config().pusher.app_id,
  key: functions.config().pusher.key,
  secret: functions.config().pusher.secret,
  cluster: 'eu',
  encrypted: true
})

app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: false }))
app.use(cors())

// Keep your CORS middleware to avoid cross-origin issues
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*')
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE')
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type')
  res.setHeader('Access-Control-Allow-Credentials', true)
  next()
})

// Your existing Pusher auth endpoint (simplified route path)
app.post('/auth', (req, res) => {
  const socketId = req.body.socket_id
  const channel = req.body.channel_name
  const presenceData = {
    user_id: crypto.randomBytes(16).toString('hex')
  }
  const auth = pusher.authenticate(socketId, channel, presenceData)
  res.send(auth)
})

// Export the Express app as a Cloud Function
exports.pusherAuth = functions.https.onRequest(app);

Step 3: Configure Pusher Credentials as Environment Variables #

Never hardcode API secrets! Store your Pusher credentials securely using Firebase’s config system:

firebase functions:config:set pusher.app_id="YOUR_PUSHER_APP_ID" pusher.key="YOUR_PUSHER_KEY" pusher.secret="YOUR_PUSHER_SECRET"

Step 4: Deploy the Cloud Function #

Push your function to Firebase’s servers:

firebase deploy --only functions

Once deployed, you’ll get a public HTTPS URL for your function, which looks like:
https://<your-region>-<your-project-id>.cloudfunctions.net/pusherAuth

Now that your auth service is live on the public web, update your Vue app’s Pusher initialization to use the Cloud Function URL:

import Pusher from 'pusher-js'
const pusher = new Pusher('YOUR_PUSHER_KEY', {
  cluster: 'eu',
  encrypted: true,
  // Append the /auth route to match your Express app's endpoint
  authEndpoint: 'https://<your-region>-<your-project-id>.cloudfunctions.net/pusherAuth/auth'
})

Note: Pusher requires HTTPS for public auth endpoints, which Cloud Functions provides automatically—perfect for production.

Don’t forget to deploy your Vue app to Firebase Hosting to make it public:

1. Run firebase init hosting if you haven’t already
2. Point the public directory to your Vue app’s dist folder (generated after running npm run build)
3. Deploy with firebase deploy --only hosting

If you prefer not to use Cloud Functions, you can deploy your original Express app to platforms like Heroku, DigitalOcean App Platform, or AWS Elastic Beanstalk. Just ensure:

• The service is accessible over HTTPS (required for Pusher’s public auth flow)
• You update the authEndpoint in your Vue app to match the service’s public HTTPS URL

内容的提问来源于stack exchange，提问作者Mick