部署于Laravel Forge的CodeIgniter应用CSS失效排查求助

问题描述 #

在Laravel Forge上部署CodeIgniter应用后，CSS无法正常加载。尝试修改CSS文件路径但未解决，且不熟悉项目配置方式，不知从何处着手排查修复。

服务器.env配置文件 #

#--------------------------------------------------------------------
# Example Environment Configuration file
#
# This file can be used as a starting point for your own
# custom .env files, and contains most of the possible settings
# available in a default install.
#
# By default, all of the settings are commented out. If you want
# to override the setting, you must un-comment it by removing the '#'
# at the beginning of the line.
#--------------------------------------------------------------------

#--------------------------------------------------------------------
# ENVIRONMENT
#--------------------------------------------------------------------

CI_ENVIRONMENT = production

#--------------------------------------------------------------------
# APP
#--------------------------------------------------------------------

app.baseURL = 'https://----------/'
# app.forceGlobalSecureRequests = false

# app.sessionDriver = 'CodeIgniter\Session\Handlers\FileHandler'
# app.sessionCookieName = 'ci_session'
# app.sessionSavePath = NULL
# app.sessionMatchIP = false
# app.sessionTimeToUpdate = 300
# app.sessionRegenerateDestroy = false

# app.cookiePrefix = ''
# app.cookieDomain = ''
# app.cookiePath = '/'
# app.cookieSecure = false
# app.cookieHTTPOnly = false
# app.cookieSameSite = 'Lax'

# app.CSRFProtection  = false
# app.CSRFTokenName   = 'csrf_test_name'
# app.CSRFCookieName  = 'csrf_cookie_name'
# app.CSRFExpire      = 7200
# app.CSRFRegenerate  = true
# app.CSRFExcludeURIs = []
# app.CSRFSameSite    = 'Lax'

# app.CSPEnabled = false

#--------------------------------------------------------------------
# DATABASE
#--------------------------------------------------------------------

database.default.hostname = 127.0.0.1
database.default.database = palscon_rms
database.default.username = forge
database.default.password = ''
# database.default.DBDriver = MySQLi

# database.tests.hostname = localhost
# database.tests.database = ci4
# database.tests.username = root
# database.tests.password = root
# database.tests.DBDriver = MySQLi

#--------------------------------------------------------------------
# CONTENT SECURITY POLICY
#--------------------------------------------------------------------

# contentsecuritypolicy.reportOnly = false
# contentsecuritypolicy.defaultSrc = 'none'
# contentsecuritypolicy.scriptSrc = 'self'
# contentsecuritypolicy.styleSrc = 'self'
# contentsecuritypolicy.imageSrc = 'self'
# contentsecuritypolicy.base_uri = null
# contentsecuritypolicy.childSrc = null
# contentsecuritypolicy.connectSrc = 'self'
# contentsecuritypolicy.fontSrc = null
# contentsecuritypolicy.formAction = null
# contentsecuritypolicy.frameAncestors = null
# contentsecuritypolicy.mediaSrc = null
# contentsecuritypolicy.objectSrc = null
# contentsecuritypolicy.pluginTypes = null
# contentsecuritypolicy.reportURI = null
# contentsecuritypolicy.sandbox = false
# contentsecuritypolicy.upgradeInsecureRequests = false

#--------------------------------------------------------------------
# ENCRYPTION
#--------------------------------------------------------------------

# encryption.key =
# encryption.driver = OpenSSL
# encryption.blockSize = 16
# encryption.digest = SHA512

#--------------------------------------------------------------------
# HONEYPOT
#--------------------------------------------------------------------

# honeypot.hidden = 'true'
# honeypot.label = 'Fill This Field'
# honeypot.name = 'honeypot'
# honeypot.template = '<label>{label}</label><input type="text" name="{name}" value=""/>'
# honeypot.container = '<div style="display:none">{template}</div>'

#--------------------------------------------------------------------
# SECURITY
#--------------------------------------------------------------------

# security.tokenName  = 'csrf_token_name'
# security.headerName = 'X-CSRF-TOKEN'
# security.cookieName = 'csrf_cookie_name'
# security.expires    = 7200
# security.regenerate = true
# security.redirect   = true
# security.samesite   = 'Lax'

#--------------------------------------------------------------------
# LOGGER
#--------------------------------------------------------------------

# logger.threshold = 4

排查步骤与可能原因 #

1. 检查浏览器控制台错误 #

打开浏览器开发者工具（F12），切换到控制台和网络标签：

• 查看CSS资源的HTTP状态码：404表示文件路径错误；403表示权限不足；500表示服务器内部错误。
• 检查是否有混合内容警告：如果baseURL是HTTPS，但CSS资源用了HTTP路径，浏览器会阻止加载。

2. 验证CSS文件的实际路径与引用方式 #

• 确认服务器上CSS文件的位置：CodeIgniter 4的静态资源通常放在public/目录下（比如public/css/style.css），要确保文件确实存在于此。
• 页面中CSS的引用必须基于app.baseURL生成，建议用CodeIgniter的base_url()函数加载（示例：<link rel="stylesheet" href="<?= base_url('css/style.css') ?>">），不要写死相对路径，避免部署后路径错位。

3. 修复静态资源目录权限 #

Laravel Forge部署后，静态资源目录的权限可能不正确，执行以下命令调整：

chmod -R 755 public/css
chown -R www-data:www-data public/css

（根据服务器实际用户调整，Forge环境通常用www-data或forge用户）

4. 优化CodeIgniter的URL配置 #

• 确认.env中的app.baseURL域名填写完整，末尾的斜杠保留（当前配置符合要求）。
• 由于使用HTTPS，建议取消注释并设置app.forceGlobalSecureRequests = true，强制所有资源链接使用HTTPS，避免混合内容问题。

5. 检查Nginx站点配置 #

Laravel Forge默认使用Nginx，需确保配置正确指向CodeIgniter的public目录：

• 登录Forge找到对应站点，编辑Nginx配置，确认root路径为/home/forge/your-site/public;（替换your-site为实际站点目录）。
• 确保包含正确的重写规则，优先加载静态文件，避免被CodeIgniter路由拦截：

  location / {
      try_files $uri $uri/ /index.php$is_args$args;
  }
  

6. 排查内容安全策略（CSP） #

虽然.env中app.CSPEnabled处于注释状态，但服务器端（Nginx、Cloudflare等）可能有额外CSP配置，导致CSS被阻止加载。查看浏览器控制台是否有Refused to load stylesheet类提示，针对性调整CSP规则。

7. 清除缓存 #

• 删除CodeIgniter项目中writable/cache/目录下的所有文件，清除框架缓存。
• 用浏览器无痕模式访问，或手动清除浏览器缓存，避免缓存的旧路径干扰。

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