如何通过将WordPress网站静态化并通过S3+CloudFront进行分发

10 月 ago

清, 扬

2 minutes

我被要求在某个项目中更新WordPress网站，因此需要将其迁移到S3+CloudFront。我将总结一下步骤。

※因为我要睡着了，所以这个翻译可能很随便，省略了中间的步骤。我也觉得可能会有错别字，有时间的话会进行修正。

在WordPress中的准备工作：消除动态元素的部分。

步骤1：在开始迁移前进行备份。

让我们备份一切。

首先，在开始工作之前，备份WordPress文件数据库，以便随时可以恢复。

第二步：去除动态要素。

每次WordPress页面被访问时，根据用户的行为可能显示不同内容。例如，我个人称其为”动态元素”，如邮件表单等可以接收一般用户信息的功能。

PHP は動かないので、別のサービスを利用するか、お問い合わせフォームだけ、PHP,

画像・テキスト・リンクランダム表示するウィジェット

ウィジェットのタイトルを「ランダム」から「ピックアップ」などに変更するだけでも良い

リンクがランダムで切り替わるもの

/?page_id=XXX などパーマリンクがクエリとして登録されている

これ鬼門です

第三步：修复原始网站上可修复的部分（可选）

修复链接错误

有些网站的内容可能过时，链接也可能会出现 404 错误。

有很多工具可以用来检测链接失效，例如WordPress插件、Chrome扩展、npm包等。根据自己的环境选择合适的工具进行安装，然后确认链接是否失效。

npm パッケージ: Broken Link Checker

将WordPress静态化后，维护变得麻烦。在WordPress中修正链接地址吧。

将Google Analytics标签迁移至Google Tag Manager.

如果您直接嵌入Google Analytics标签，那么在对HTML进行处理后更新会很麻烦，建议转移到Google Tag Manager，然后就可以方便地进行管理和操作了。

步骤4：禁用不需要的插件。

通过将其转换为静态HTML，我们可以禁用无法正常工作的插件。

步骤五：禁用并删除搜索引擎系统。

如果不使用外部服务，搜索功能将无法运行。在WordPress中使用的搜索功能应该被禁用，并且删除搜索关键词输入框等内容。

第6步：保存404页面

请将404等错误页面保存为名为error.html的HTML文件，以备将来使用。

后面提到的Simply Static插件无法静态化错误页面。

如果不需要进行奇怪的替换处理，只需使用 Google Chrome 等浏览器来保存 HTML。

第7步：安装WordPress静态化插件。

这次我们使用了Simply Static。

出力実行

获取已HTML编码的软件包。

第八步：创建S3存储桶并上传文件

创建一个以任何名称命名的S3存储桶。

index.html & error.html を設定

Bucket Policy ではパブリックアクセス許可しましょう

{
    "Version": "2008-10-17",
    "Id": "PolicyForCloudFront",
    "Statement": [
        {
            "Sid": "PublicReadGetObject",
            "Effect": "Allow",
            "Principal": "*",
            "Action": "s3:GetObject",
            "Resource": "arn:aws:s3::バケット名/*"
        }
    ]
}

我本来希望启用 OAC，但为了正确显示 index.html、403和404页面，需要使用静态网页托管功能，因此在 S3 上需要启用公共访问权限。

创建 S3 存储桶后，将由WordPress生成的HTML文件上传。

掌握 AWS CLI 的 s3 sync 或 s3 cp 命令，可以快速便捷地进行文件传输。

步骤9: 设置CloudFront函数。

在底层页面，以斜杠结尾的URL无法正确地访问该目录中的index.html文件。

可以使用CloudFront功能来替代。

名称：重定向到index.html

function handler(event) {
    var request = event.request;
    if (request.uri !== "/" && (request.uri.endsWith("/") || request.uri.lastIndexOf(".") < request.uri.lastIndexOf("/"))) {
        if (request.uri.endsWith("/")) {
            request.uri = request.uri.concat("index.html");
        } else {
            request.uri = request.uri.concat("/index.html");
        }
    }
    return request;
}

参考: Redirect to index.html for S3 subfolder

通过这样的设置，即使在较低级别的路径或者以斜杆结尾的 URL ，也会去查看 /index.html。

如果有特殊情况，例如index.htm等，请根据需要修改上述的Javascript。

第十步：生成SSL证书

让我们在位于弗吉尼亚地区（us-east-1）的ACM中发行或注册用于CloudFront的SSL证书。

步骤 11：创建 CloudFront 分发

あとは、CloudFront + S3 な静的 Web サイトを作る容量で、Distribition を作成してください。

SSL 証明書を選択。

オリジンは S3 の静的 Web ホスティングのエンドポイントを使用します。

403 や 404 などのエラーページを、S3 の設定時に登録した error.html (STEP 6参照) を指定して表示するようにします。

第12步：更改主机并进行显示测试

在切换之前进行显示测试。

使用dig命令等查找CloudFront或S3的终端节点，并获取该时刻的A记录。

（CloudFront & S3 は頻繁に IP アドレスが変わります)

dig xxxxxx.cloudfront.net

然后，我会修改自己电脑上的hosts文件，并进行显示测试。

XXX.XXX.XXX.XXX exmaple.com

这个时候，您可以测试SSL证书和CloudFront功能。

最重要的是确认是否存在链接失效等问题。

使用在第3步介绍的npm包Broken Link Checker，可以在静态HTML网站化后，检查网站的链接是否存在切断。

我发现在我的情况下，部分图像没有正确输出，JS、SVG文件在主题文件夹中也没有正确地输出到HTML包中。

ひとまず、最低限必要なファイルは、Google Chrome の Developer ツールを使い 404 になっているファイルを探して、WordPress サイトから手動で移動しました。

步骤十三：DNS正式切换

通过更改DNS设置，您可以成功使WordPress网站静态化。

以上 – the above