AWS S3 是托管静态 WordPress 网站的不错选择。它安全且便宜,并且可以节省时间,否则这些时间将用于确保正确配置插件、主题和安全程序。

本文描述了一种生成静态站点的方法。本地开发环境需要 Docker Compose,唯一需要的插件是Simply Static WP Plugin,它将静态站点导出为 zip 文件,然后再上传到 S3。

先决条件

• 码头引擎

• 码头工人撰写

• S3 存储桶配置为托管静态网站

准备 WordPress 网站

可以在docs.docker.com找到使用 Docker Compose 运行 WordPress 的快速入门指南。我在下面的代码片段中包含了该启动指南中包含的参考 docker-compose.yml 文件。它可用于通过运行命令 docker-compose up -d 来构建本地 WordPress 实例。生成的 WordPress 容器化版本将在 http://localhost:8000 上提供。

version: "3.9"

services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: somewordpress
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    extra_hosts:
      - localhost:172.23.0.3
      - localhost:172.23.0.1
    volumes:
      - wordpress_data:/var/www/html
    ports:
      - "8000:80"
    restart: always
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
volumes:
  db_data: {}
  wordpress_data: {}

进入全屏模式 退出全屏模式

导出静态站点

一旦完全配置了 WordPress 站点,就可以开始这项工作的静态站点生成部分。配置包括站点主题的选择。安装支持网站功能的插件。添加特定于站点的内容,以及产生最终结果所需的任何其他自定义。

• 1 导航到 _Plugins\Add New_ 并搜索 _Simply Stati_c。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--5wD8VlnA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/d2tj2ej2jvzgpp8bafro.png)

• 2 安装后,导航到 Simply Static\Settings 并确保为目标 URL 和交付方式配置了以下选项

[](https://res.cloudinary.com/practicaldev/image/fetch/s---cdVxMyO--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/uploads/articles/g7aeq5gspkpynhjhj5ps.png)

• 3 通过导航到 Simply Static\Settings\Advanced 来更新临时文件的位置。 (此路径将写入我们的 wordpress_data 卷)

[](https://res.cloudinary.com/practicaldev/image/fetch/s--aekLz8Zt--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/9sr894bozr5srlplgad5.png)

• 4 通过导航到 Simply Static\Generate 并单击 Generate Static Files 按钮来生成静态文件

[](https://res.cloudinary.com/practicaldev/image/fetch/s--8FPKxXF9--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/x93l3bnm2yfpj9vdaxwx.png)

• 5 完成第 4 步后,单击链接下载静态内容。检查 .zip 文件的内容。它应包括以下项目

1. - index.html

2. - wp-内容/

3. - wp-包括/

上传到 AWS S3

在此步骤中,运行简单静态插件的输出将上传到 S3。

此时,应为托管](https://docs.aws.amazon.com/AmazonS3/latest/userguide/EnableWebsiteHosting.html)的[静态网站配置 S3 存储桶。这可以通过所有常用的 AWS 路径(REST API、SDK、CLI、CloudFormation)启用。我们将坚持使用控制台。

• 单击 S3 存储桶。导航到“属性”选项卡。向下滚动到标题为静态网站托管的部分。启用并选择托管静态网站作为托管类型。使用 index.html 登录页面更新索引文档字段。保存更改。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--yp-L7jrs--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/uploads/articles/hvxeqx318to3uoz22r2h.png)

现在使用 S3 存储桶登录页面上的上传选项上传 Zip 文件的内容(index.html、wp-content、wp-includes)。

现在可以使用该站点的公共 URL 访问闪亮的新静态 WordPress 站点(可在“静态网站托管”部分下的 S3 存储桶的“属性”选项卡下获得)。

具有源访问身份 (OAI) 的安全 S3 存储桶

[](https://res.cloudinary.com/practicaldev/image/fetch/s--9UYIlsiI--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/uploads/articles/dsseepxy099ekkd176zl.png)

S3 存储桶可以保护在 CloudFront 分配之后,以更好地控制对 S3 存储桶的访问。 S3 存储桶应标记为私有。将创建一个源访问身份 (OAI)并将其与 CloudFront 分配相关联。然后更新 S3 存储桶权限以允许 CloudFront 分配使用 OAI 访问静态站点。以下代码段说明了允许 CloudFront 分配访问的存储桶策略。完整的详细信息可以在docs.aws.amazon.com上找到。

{
    "Version": "2012-10-17",
    "Id": "PolicyForCloudFrontPrivateContent",
    "Statement": [
        {
            "Effect": "Allow",
            "Principal": {
                "AWS": "arn:aws:iam::cloudfront:user/CloudFront Origin Access Identity <distribution ID>"
            },
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3:::<s3-bucket>/*"
        }
    ]
}

进入全屏模式 退出全屏模式

未来增强功能

前面的指南介绍了如何在 AWS 中启动和运行静态 WordPress 站点。在后续文章中,我改进了当前的设置,并包括用于构建和部署到 S3 的自动化。如果您对如何改进此过程有任何意见或建议,请将其留在下面的评论部分。