如何将客户端与服务端分文件夹的Node应用部署至Heroku

Got it, let's walk through this step by step—combining your Vue CLI client and standalone server for Heroku deployment is straightforward once you nail the folder structure and configs. Here's exactly what to do:

1. Restructure Your Folders #

First, rearrange your project so Heroku can easily find the server entry point and build your client:

• Move all contents of your server folder (like server.js, package.json, routes, etc.) into your project's root directory
• Keep your client folder as a subdirectory in the root (so your root now has client/, server.js, package.json, etc.)

2. Configure the Root package.json #

This is the core of Heroku's deployment process. Update your root package.json with these key changes:

• Add a heroku-postbuild script to tell Heroku to install client dependencies and build the Vue app:

  "scripts": {
    "start": "node server.js",
    "heroku-postbuild": "cd client && npm install && npm run build"
  }
  

• Specify a Node.js engine version (Heroku uses this to match the environment):

  "engines": {
    "node": ">=16.x"
  }
  

• Make sure all your server dependencies are listed here (they should already be if you moved the server's package.json to root)

3. Update Your Server to Serve Vue's Static Files #

Modify your server code (e.g., server.js if using Express) to serve the built Vue app and handle SPA routing:

const express = require('express');
const path = require('path');
const app = express();

// ... keep your existing API routes here ...

// Serve Vue's static files from the client's dist folder
app.use(express.static(path.join(__dirname, 'client/dist')));

// Handle SPA routing: redirect all non-API requests to Vue's index.html
app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'client/dist', 'index.html'));
});

// Use Heroku's assigned port (or 8081 for local testing)
const PORT = process.env.PORT || 8081;
app.listen(PORT, () => {
  console.log(`Server running on port ${PORT}`);
});

4. Configure Vue's Dev Server (for Local Development) #

If you use a proxy in development to connect to your server, create or update client/vue.config.js:

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8081',
        changeOrigin: true
      }
    }
  }
};

This ensures your local Vue app can still talk to your local server while keeping production requests pointed to the same domain.

5. Test Locally Before Deploying #

• Run npm install in the root directory to install server dependencies
• Run npm run heroku-postbuild to build the Vue app (this mimics what Heroku does)
• Start the server with npm start, then visit http://localhost:8081—you should see your Vue app working, with API requests functioning correctly

6. Deploy to Heroku #

• Make sure you have a .gitignore file in the root with these entries (to avoid committing unnecessary files):

  node_modules/
  client/node_modules/
  client/dist/
  .env
  

• Initialize git (if not already done): git init, git add ., git commit -m "Prepare for Heroku deployment"
• Log in to Heroku: heroku login
• Create your Heroku app: heroku create your-unique-app-name
• Push your code: git push heroku main

Common Pitfalls to Avoid #

• Don't hardcode the port: Always use process.env.PORT for Heroku's dynamic port assignment
• Ensure Vue's build command exists: The client/package.json should have "build": "vue-cli-service build" (Vue CLI adds this by default)
• Check dependency versions: Make sure your server's dependencies are compatible with the Node version you specified

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