ReactJS应用部署至Heroku时始终部署开发构建而非生产构建的问题求助

It looks like the core issue here is that Heroku is defaulting to running your development server instead of serving the optimized production build you generate with npm run build. Let's break down what's happening and fix it step by step:

1. Why You're Seeing the Dev Version #

Heroku automatically runs npm start when deploying Node.js apps. Looking at your package.json, your start script uses react-scripts start—this launches the hot-reloading development server, not a static server for your production build. Even if you run npm run build locally, Heroku doesn't know to use that build folder unless you configure it properly.

2. Step-by-Step Fix #

First: Add a Static Server Dependency #

You're already using serve -s build locally to test the production build, so we need to make this tool available on Heroku. Install serve as a production dependency:

npm install --save serve

Second: Update Your package.json Scripts #

Modify your scripts section to include a production start command, and ensure Heroku runs the build step automatically during deployment. Here's the updated version:

"scripts": {
  "start": "GENERATE_SOURCEMAP=false react-scripts start",
  "build": "GENERATE_SOURCEMAP=false react-scripts build",
  "test": "GENERATE_SOURCEMAP=false react-scripts test",
  "eject": "react-scripts eject",
  "start:prod": "serve -s build",
  "heroku-postbuild": "npm run build"
}

• start:prod: Tells Heroku to serve the static build folder using the serve tool.
• heroku-postbuild: Ensures Heroku runs the production build step right after installing dependencies—no need to commit the build folder to your git repo.

Third: Tell Heroku to Use the Production Start Command #

The simplest way is to create a Procfile in your project root (no file extension) with this line:

web: npm run start:prod

Heroku will read this file and use the start:prod script instead of the default start command.

Fourth: Fix Your Bitbucket Pipeline #

Your current pipeline only installs dependencies and pushes code to Heroku. Update it to include Heroku CLI setup for proper deployment:

image: node:10.16.0
pipelines:
  default:
    - step:
        script:
          - npm install
  branches:
    master:
      - step:
          name: Joseph Production Deployment to Heroku
          deployment: production
          caches:
            - node
          script:
            - npm install
            # Install Heroku CLI
            - curl https://cli-assets.heroku.com/install.sh | sh
            # Login to Heroku (use Bitbucket environment variables for credentials)
            - heroku login -i
            # Link to your Heroku app
            - heroku git:remote -a your-heroku-app-name
            # Push code to Heroku
            - git push heroku master

Note: Replace your-heroku-app-name with your actual app name, and set up Heroku credentials as secret environment variables in Bitbucket to avoid hardcoding them.

3. Verify the Fix #

After deploying:

• Check Heroku's logs with heroku logs --tail to confirm it's running serve -s build instead of the development server.
• Visit your app—you should see the optimized production build, exactly like when you run serve -s build locally.

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