使用 Craft CMS 和 Webpack 托管网站需要什么配置?

问题描述

我是 Craft CMS 和 Webpack 的新手,在设置托管环境方面经验有限。我获得了一个网站的代码,并试图将它托管在运行 Amazon Linux 2 和 LAMP 堆栈的 EC2 实例上。

我遇到的问题是,从浏览器访问网站时,整个网站都没有加载。如果运行 Webpack 开发服务器,则只会加载文本和一些图标而没有格式。如果从 Webpack 生产版本运行,则包括格式化,但不包括图像。如果我单击任何链接转到另一个页面在这两种情况下都会出现 404 Not Found 页面。运行开发服务器时,首页浏览器控制台出现错误

拒绝加载脚本 'http://XXX.XXX.XXX.XXX:8080/js/app.some-hash-value.js' 因为它违反了 以下内容安全策略指令:“script-src 'self' 'unsafe-eval' 'unsafe-inline' 本地主机:8080 translate.google.com translate.googleapis.com www.google-analytics.com cdn.polyfill.io www.google.com www.gstatic.com api.buglog.io”。请注意,'script-src-elem' 没有明确设置,所以 'script-src' 用作后备。

我在代码中的任何地方都找不到该 CSP 指令的声明。无论我使用私有 IP、公共 IP 还是 0.0.0.0 作为公共开发服务器,都会出现此错误。但是,当我将 localhost 用于开发服务器 public 时,却收到以下错误,没有进一步解释:

GET http://localhost:8080/js/app.some-hash-value.js net::ERR_CONNECTION_REFUSED

如果我改为使用 Webpack 生产配置构建站点,则站点加载时不会出现上述错误。在主页上,控制台中唯一的错误是它尝试加载的图像的 404 错误有时以下错误,刷新后就会消失:

TypeError: window.LazyLoad 不是构造函数

当我在本地计算机上的 ampps 堆栈上托管网站时,它既可以在开发模式下运行,也可以编译用于生产。因此,我认为问题出在代码某些组件的 IP 地址或端口配置中,或者出在网络服务器本身的配置中。

当前配置信息:

  • EC2 实例安全组规则允许在端口 80、端口 8080 和 443 上进行连接。
  • 站点 URL 为 EC2 实例公有 DNS,assets url 为站点下的 assets/site 文件夹 网址。
  • Webpack公共路径为/dist/,开发服务器主机为0.0.0.0,开发服务器端口为8080。
    • 我已经为开发服务器 public 尝试了公共 IP、私有 IP、0.0.0.0 和 localhost。
  • Twigpack devServer 清单路径和公共路径都设置为 localhost:8080,但我有 与他们一起尝试了公共和私有 IP。
  • Twigpack 服务器清单路径是 web 根路径下的 /dist/,公共路径是站点 网址。
  • 本地工作环境将 localhost/web/ 设置为站点 url,将 localhost:8080 设置为 dev server public 和 Twigpack devServer 组件。

对于冗长的解释,我深表歉意,但我想捕捉所有我认为可能相关的细节。我真正需要的是让生产网站正常工作,尽管如果我能在 EC2 环境中获得开发服务器,那将是一个奖励。所以我的问题是:我需要配置什么才能加载整个网站?

编辑

我已经在 EC2 实例上安装了一个 GUI 桌面和浏览器来测试本地连接。使用与我在本地计算机上使用的配置相同的配置,不会拒绝开发服务器连接。但是,生产构建和开发服务器都无法像公开访问的生产构建一样加载图像和其他页面

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)