在AWS Beanstalk部署Rails 5.1时编译TailwindCSS失败求助

我之前在部署Tailwind+Webpack到AWS Beanstalk时也踩过类似的坑，结合你的情况，给你几个具体的排查方向和解决办法：

1. 确认Beanstalk的Node.js/Yarn环境配置 #

• 首先检查Beanstalk使用的Node版本是否和你本地开发环境一致，版本不匹配很容易导致编译异常。你可以在项目根目录的.elasticbeanstalk/config.yml里明确指定版本，比如：

  nodejs_version: 18.x
  

• 确保Beanstalk使用Yarn执行构建命令。默认情况下Beanstalk可能会用npm，你可以在package.json的scripts里明确编译脚本：

  "scripts": {
    "build": "NODE_ENV=production webpack --mode production",
    "prebuild": "yarn install"
  }
  

  另外也可以通过.ebextensions配置文件强制指定构建命令，比如创建.ebextensions/01_build.config：

  container_commands:
    01_build:
      command: "yarn build"
  

2. 验证Tailwind相关配置文件的正确性 #

• 检查.postcssrc.yml里是否正确指定了Tailwind配置文件的路径，比如你的tailwind.js在app/javascript/css/下，配置应该是：

  plugins:
    tailwindcss: './app/javascript/css/tailwind.js'
    autoprefixer: {}
  

• 确认application.css里的Tailwind导入语句没有错误：

  @import 'tailwindcss/base';
  @import 'tailwindcss/components';
  @import 'tailwindcss/utilities';
  

• 确保application.js里正确导入了CSS文件：

  import '../css/application.css';
  

3. 查看Beanstalk的编译日志定位具体错误 #

AWS Beanstalk的日志能帮你精准找到问题所在：

• 登录AWS控制台，进入你的Beanstalk环境，点击左侧菜单的「日志」→「请求完整日志」，下载后查找编译阶段的错误信息。
• 常见的问题包括：devDependencies未安装（Beanstalk生产环境默认不安装devDependencies），这时候你可以把Webpack、tailwindcss、postcss等构建依赖移到dependencies里，或者在构建命令前加上yarn install --production=false来安装所有依赖。

4. 检查Webpack配置的生产环境适配 #

• 确认Webpack配置中处理CSS的loader顺序正确，生产环境建议使用mini-css-extract-plugin提取独立CSS文件，避免样式嵌入JS导致的问题：

  const MiniCssExtractPlugin = require('mini-css-extract-plugin');
  
  module.exports = {
    mode: process.env.NODE_ENV || 'development',
    module: {
      rules: [
        {
          test: /\.css$/,
          use: [
            process.env.NODE_ENV === 'production' ? MiniCssExtractPlugin.loader : 'style-loader',
            'css-loader',
            'postcss-loader'
          ]
        }
      ]
    },
    plugins: [
      ...(process.env.NODE_ENV === 'production' ? [new MiniCssExtractPlugin()] : [])
    ]
  };
  

5. 本地模拟生产环境编译测试 #

在本地执行NODE_ENV=production yarn build，如果本地也出现相同错误，说明问题出在代码配置本身，先在本地调试解决后再部署；如果本地编译正常，那大概率是Beanstalk的环境变量或依赖安装配置有问题，回到前面的步骤排查。

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