在Azure App Services部署React+Express应用遇应用错误求助

Hey there, let's dig into this deployment issue you're facing. I took a look at your GitHub repo and can spot a few potential issues with how you're handling the React build and server startup on Azure. Here's a step-by-step breakdown of what to fix:

1. Restructure Your Scripts to Avoid Building on Server Startup #

Your current start script tries to run the React build every time the server starts—this is inefficient and likely failing because Azure might not have installed your client dependencies yet. Let's adjust your root package.json scripts:

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

• The postinstall script runs automatically right after Azure executes npm install in the root directory. This ensures your client dependencies are installed and the React app is built during deployment, not when the server starts up.
• The start script now only handles launching your Express server, which is clean and reliable.

2. Verify Your Express Server Serves Static Files Correctly #

Double-check your server.js to make sure it's pointing to the correct React build directory. It should look something like this:

const path = require('path');
// Serve static files from the React app build directory
app.use(express.static(path.join(__dirname, 'client/build')));

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

Using path.join ensures the path works across different operating systems (Azure uses Linux by default for Node.js apps, so path separators matter).

3. Update Your GitHub Actions Workflow #

Since you're using GitHub Actions to deploy, make sure your workflow file (.github/workflows/azure-webapps-node.yml) includes steps to install client dependencies and build the React app. Add these steps after the root npm install step:

- name: Install client dependencies
  run: cd client && npm install

- name: Build React application
  run: cd client && npm run build

This guarantees the build happens before deploying to Azure, so the server doesn't have to handle it on startup.

4. View Azure Logs to Pinpoint Exact Errors #

The generic "Application Error" message doesn't tell you much. To see what's actually failing:

• Go to your Azure App Service in the Portal → Monitoring → Log Stream to view real-time server logs. You'll see if the build is failing, dependencies are missing, or the server can't find the React build files.
• Alternatively, use the Azure CLI locally:

  az webapp log tail --name <your-app-service-name> --resource-group <your-resource-group-name>
  

Common issues you might see here:

• "Cannot find module 'xyz'" → A dependency wasn't installed (check your postinstall or workflow steps)
• "ENOENT: no such file or directory, open '/home/site/wwwroot/client/build/index.html'" → The React build didn't complete successfully

5. Confirm Azure's Startup Command #

Sometimes Azure ignores the start script in package.json. To force it:

• Go to your App Service → Configuration → General Settings
• In the Startup Command field, enter npm start or directly node server.js (since your server entry is server.js)

Once you make these changes, redeploy your app and check the logs again. This should resolve the application error you're seeing.

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