ascend-digital/website-scaffolding

一个有用的、安全的文件夹结构和项目设置,用于使用 Laravel Mix 开发基于 Laravel 框架以外的网站。

v1.0.2 2021-09-22 10:37 UTC

This package is auto-updated.

Last update: 2024-09-22 17:15:40 UTC


README

这是一个模板应用程序结构,允许开发者创建网站,确保项目文件和编译后的资产以及其他用于生产的文件之间有安全分离。

所有项目 JavaScript、SASS 和 node 模块都故意与 src 目录中包含的实时文件分离,使得最终产品在部署时更安全。

注意:本包不能保证生产中的安全性,这取决于您。本包能做的是为您提供合理的资产分离,以帮助您。

此包有何用途

  • WordPress 网站
  • 单页网站/应用程序

假设

  • 您至少熟悉命令行界面(CLI)的基本知识
  • 您有使用 Laravel Mix、Webpack 和/或 node.js 的经验
  • 您正在寻找一种更好的方法来构建使用 Laravel 等框架提供的速度提升的基于 Web 的解决方案,其中框架本身的使用是不可能的

安装

在开始使用此包之前,请确保您已经在您的计算机上安装了 Composer。为了获得最佳、最干净、最快的体验,我们将使用 Composer 来设置一个新的项目。

通过在终端中发出 Composer create-project 命令来创建您的新项目。在以下示例中,用您项目目录的期望名称替换 WordPress

composer create-project ascend-digital/website-scaffolding WordPress

入门

  • 使用 Laravel Mix 编译资产,它为 Webpack 提供了流畅的 API

  • 可以使用 Node 包管理器(npm)将额外的包和资产导入到您的项目中

    npm install {package_name}
    
    • 在第一次运行 Laravel Mix 之前,请确保您的计算机上已安装 node.js 和 npm

      $ node -v
      $ npm-v
      
    • 请访问 node.js 下载页面 下载 node.js 和 npm

  • 要安装所有必要的开箱即用的包,以便您的应用程序可以运行,只需运行

    npm install --save
    

本地设置

  • 我们非常喜欢 Laravel Valet - 它在过去几年里为我们节省了大量的时间,自从不再需要安装 MAMP 以来,我们的生活变得更加美好。我们不会详细介绍如何设置 PHP / MariaDB / Valet;要设置您自己,请前往 Laravel Valet 文档
  • 我们将所有网站项目存储在一个集体的 ~/Sites 目录中,您将在我们的示例中看到它的引用
  • 如果您正在使用 Valet 的 park 命令,您需要从项目的 src 目录中执行 "link" 命令,以指示 Valet 从那里而不是项目根目录提供您的网站。要这样做
    • 打开您的终端

    • cd 进入您的项目目录(例如 WordPress)

    • cd 进入您的 src 目录 - 这是您可以将操作链接到上一个 cd 命令的动作,例如 $ cd WordPress/src

    • 执行 valet link your_project_name,其中 your_project_name 是您想要在浏览器中通过其访问项目的文本

      $ cd ~/Sites/Wordpress/src
      $ valet link wordpress
      $ valet secure
      
    • 最后一步完全是可选的,但鉴于您的所有生产网站现在都应使用SSL证书通过HTTPS提供内容,您可以通过让Valet创建一个SSL证书来保护您的本地网站,以正确开始每个项目。

    • 遵循以上步骤后,现在可以通过访问https://wordpress.test在浏览器中访问本地网站。

用于WordPress的此包

  • 我们建议安装WordPress命令行工具。我们不会详细介绍如何设置,请访问链接以安装和配置此工具。

  • 设置完成后,导航到您的src目录以安装WordPress。

    $ cd ~/Sites/WordPress/src
    $ wp core download --locale=en_GB
    
  • --locale选项允许您定义安装的语言本地化。如果您正在安装英语美国(en_US)版本的WordPress,可以安全地省略--locale选项,因为默认下载已经是en_US。请参阅WordPress文档以获取完整的本地化引用列表。

  • webpack.mix.js文件中有一些有用的注释,说明如何将编译后的资源指向WordPress主题的位置。

  • 一些其他有用的WordPress开发包包括

在生产环境中设置

  • 严格来说,您应该使用git将版本控制的文件拉入生产环境,但考虑到您可能选择省略会增加仓库体积的目录,我们理解这并不总是可行的。
  • 您域的DOCUMENT_ROOT应设置为src目录,这样您可以确保根目录下的所有内容都无法通过互联网访问。
  • 您应该使用npm run production编译您的资源,以确保它们被压缩。

背景

在过去的几年里,我们看到了许多开发人员迁移到基于Laravel和以Laravel为中心的工作方式。

使用像Laravel这样的框架,开发人员可以将一些未知的事情卸载给更广泛的社区,尤其是在安全要求方面。可以说,我们都应该在学习去野外工作之前学习这方面的知识。然而,如果没有行业经验来教育开发人员——为什么CSRF、加密和散列是必要的——那么许多自制的解决方案成为最常见的漏洞的受害者是可以理解的。

然而,当团队转移到开发非Laravel的Web应用程序时,这个知识差距却产生了更广泛的问题,因为坏习惯开始形成,开发人员在加快开发时间的同时模糊了本地和生产环境之间的界限。将node_module文件夹上传到生产环境,通常带有已知的漏洞和利用手段,只是许多问题中的一个。

这个包允许开发人员创建WordPress网站、纯HTML网站以及其他各种有用的内容,而不用担心项目文件最终会被暴露在万维网上。我们当然也假设您的实时环境以许多其他方式得到保护,以防止您的网站受到利用、攻击和黑客攻击。

您可能会说这并不是必要的;正如我们听到的您说"应该使用版本控制软件将包拉入生产环境"——这是我们完全支持的观点。但另一方面,人们普遍认为,由于缺乏经验、无知或工作环境意味着传统的SFTP传输是必要的邪恶,这并不是总是可能的。

这个包纯粹是为了让网络世界变得更安全,通过提供一些合理的结构来从有助于加快开发时间的工具开始开发。