Webpack构建的静态站点部署至Dokku失败，寻求解决方案

我之前部署类似的静态站点时也踩过这些坑，给你几个具体的排查和解决步骤：

1. 先查日志找根源 #

页面提示的错误信息太泛，首先得看Dokku的详细日志，执行下面的命令：

dokku logs <你的应用名称>

重点关注这几个部分：

• postinstall脚本是否执行？有没有报错？比如webpack命令找不到、Webpack配置错误、依赖缺失
• 有没有启动服务的日志？比如npm start有没有执行，端口是否正常监听

2. 确保Webpack打包能正常完成 #

最常见的问题之一是生产环境下找不到Webpack：因为Dokku默认会以NODE_ENV=production安装依赖，会跳过devDependencies里的包。如果你的webpack、webpack-cli是放在devDependencies里的，postinstall阶段就会报错找不到命令。

解决方法二选一：

• 把webpack、webpack-cli、css-loader这些打包必需的依赖从devDependencies移到dependencies里
• 修改postinstall脚本，先安装dev依赖再打包：

  "postinstall": "npm install --only=dev && webpack --mode production"
  

3. 让Dokku知道怎么托管静态文件 #

Dokku的Node.js Buildpack默认会找npm start脚本，但静态站点本身没有服务，所以需要你提供一个简单的静态文件服务：

方法一：添加一个简单的Node服务 #

安装express（或者更轻量的serve）：

npm install express --save

在项目根目录创建server.js：

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

// 托管dist文件夹的静态资源
app.use(express.static(path.join(__dirname, 'dist')));

// 监听Dokku提供的PORT环境变量
const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log(`Static server running on port ${port}`);
});

然后在package.json里修改start脚本：

"scripts": {
  "build": "webpack --mode production",
  "postinstall": "npm run build",
  "start": "node server.js"
}

方法二：使用Dokku的Static Buildpack #

如果不想用Node服务，可以切换到Static Buildpack，直接托管dist文件夹：

# 在本地项目根目录创建.static文件，指定静态目录为dist
echo "dist" > .static
# 告诉Dokku使用Static Buildpack
dokku buildpacks:set <你的应用名称> https://github.com/dokku/dokku-buildpack-static.git

4. 验证dist目录是否生成 #

可以登录到Dokku服务器，进入应用容器检查：

dokku enter <你的应用名称>
# 查看是否有dist文件夹，以及里面的文件是否完整
ls -la dist

如果dist不存在，说明打包过程出了问题，回到日志里找打包阶段的错误信息。

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