WordPressをAmazon S3 + CloudFront構成で月額200円で運用

2019-12-04
amazon%20awswordpresscmsdockerdocker%20compose
    

目次

概要

AmazonS3 + CloudFront を用いて WordPressを静的サイト化して、ハイパフォーマンスなサイトを構成する方法の紹介です。 実はこのブログ https://tech-blog.s-yoshiki.com もS3 + CloudFront 構成で運用しており、月額のAWS使用料が200円少々で運用できています。 ここでは具体的に利用しているサービスや構成の設定、プラグインを紹介します。

システム全体の概要

システムをざっくり説明すると、WordPressのサイトを全て静的化し、AmazonS3上に配置しています。S3に加えてCloudFrontも組み合わせて利用し、HTTPSとCDN化を実現しています。

SSL証明書にはAWS Certificate Managerを利用しています。

WordPressのシステム自体はローカル環境のDocker上に構築し、記事を書いたら静的化処理を行いS3にアップロードしています。

この構成のメリット・デメリット

この構成のメリット・デメリットには次のようなものがあると思います。

  • Amazon S3を利用するのでコストが低い
  • サイトを静的化するのでパフォーマンスが高い
  • 動的システムではないので脆弱性や攻撃に強い
  • WordPressの静的化プラグインの挙動が安定していない
  • 静的サイトで一部プラグインが利用できなくなる
  • サーバサイドによる動的処理ができない
  • HTML出力〜デプロイに多少時間がかかる

AWSの構成

静的コンテンツを配置するs3バケットを用意します。またCloudFrontのディストリビューションを作成します。

構築方法については以下の記事で紹介しています。

https://tech-blog.s-yoshiki.com/2019/08/1486/

静的ページを作成するWordPressプラグイン

WP2Static

静的コンテンツの作成はWP2Staticを利用しました。このプラグイン導入時にStaticPressやsimply staticなどを検討しましたが、開発の活発度やレビューからWP2Staticを利用することにしました。 250MB程度のコンテンツを作成するのに10分程度かかります。

WP Offload Media Lite

WP Offload Media LiteはWordPressにアップロードした画像・動画などのコンテンツをS3にアップロードして管理する事ができるプラグインです。これによりローカル環境でコンテンツなどを管理しなくても良くなります。

WordPress on Docker環境

WordPressはDocker上で動かしています。imageはwordpressとmysql(どちらもDockerHubで提供されているもの )を利用しています。 環境は次のような構成となっています。

ディレクトリ構成

wordpress
├── docker-compose.yml
├── html # /var/www/html以下をマウント
└── mysql # mysqlデータ領域をマウントして永続化

docker-compose.yml

version: "3.5"
services:
  wordpress:
    image: wordpress:latest
    volumes:
      - "./html:/var/www/html"
    ports:
      - 80:80
    links:
      - wordpress-db
    environment:
      WORDPRESS_DB_HOST: wordpress-db:3306
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_USER: wordpress_user
      WORDPRESS_DB_PASSWORD: wordpress_pass

  wordpress-db:
    image: mysql:5.7
    volumes:
      - "./mysql/data:/var/lib/mysql"
    ports:
      - 3306:3306
    environment:
      MYSQL_ROOT_PASSWORD: XXXXXXXXXXX
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress_user
      MYSQL_PASSWORD: wordpress_pass

まとめ

Amazon S3 + CloudFront の構成で WordPressを運用する方法を紹介しました。この方法のポイントはサイトを静的化するのでパフォーマンスに優れており脆弱性や攻撃にも強いという特徴があります。ただし、WordPressを静的化するためのプラグインが安定していないことや、HTML出力するのに多少時間がかかるという欠点があると思います。 コストパフォーマンスの観点で見たらかなり優れている方法だと思うので、是非お勧めしたいと思います。

    
s-yoshiki
s-yoshiki
githubtwitterqiita
Web作ってますが、インタラクティブなプログラミングも好きです。
JavaScript / Vue / node.js / PHP / AWS / OpenCV

関連記事

Amazon S3 と ローカルファイルのチェックサムの比較
s3apiでEtagを取得 検証 マルチアップロード時の注意点 Amazon S3 の Etagを使ってファイルの整合性チェックをする。 s3apiでEtagを取得 S3 APIを利用するとEtagを取得します。この値はmd5のハッシュ値になります。 検証 MD…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

WordPressやめます Gatsbyに移行しました
これまでのWordPress運用 なぜWordPressを捨てるのか? なぜGatsbyを利用するのか? gatsbyについて WordPressから記事の救出 移行対象記事の抽出 記事の置換 Gatsbyテーマの作成 Gatsby…

WordPressのDBから記事データを抽出する
WordPressのDB関連図 公開記事一覧の取得 タグ・カテゴリの取得 サムネイルの取得 おまけ: PHPスクリプト化しました 参考にしたところ WordPressにため込んだデータMarkdown化しGatsby…

Ansible で Docker に LAMP環境を構築するハンズオンを作った
リポジトリ リポジトリ構成 Docker構成 Ansible role の構成 プロビジョニングの実施 ansibleでdocker上にApache MariaDB PHP…

AWS BlackBeltを写経する EC2編
問われやすいサービス EC2 AWSサービス別資料 https://aws.amazon.com/jp/aws-jp-introduction/aws-jp-webinar-service-cut/ 問われやすいサービス EC2 Amazon EC2 (201…

Macでも利用できるDBクライアント MySQL PostgreSQL Oracle など
デスクトップ系ツール TablePlus DBeaver MySQL Workbench Sequel pro Webアプリケーション phpMyAdmin Adminer 参考 Macで利用できるDB (MySQL PostgreSQL Oracle…

DockerでMySQL5.1.73を利用する。docker-composeから起動
Dockerのインストールから実行まで docker-compose から起動 詳細 Docker から MySQL 5.1.73 を利用する。 Dockerのインストールから実行まで docker imageの pull。 119MB…

phpMyAdminをDockerで起動する設定
docker-compose の設定 phpMyAdminのコンテナイメージ GitHub phpMyAdminはPHPで実装されているMySQLの管理ツールです。サーバに配置しブラウザから操作するのが特徴です。このphpMyAdminをdocker…

WordPressを静的サイトに変換するプラグインの紹介。WP2Static
静的化の目的 WP2Static StaticPress Simply Static 3つを比較して WordPressを静的化するプラグインとして、simply staticやStaticPress、WP2Static…

最新の投稿

SQL整形ツールを作成した
特徴 使い方 FW/ライブラリ等 nuxt sql-formatter-plus Monaco Editor おまけ ソース SQL整形ツールを作成しました。 URLはこちらです。 SQL…

ファイルの1行目を表示 Linuxコマンド head
head コマンド例 headコマンドでファイルの 1行目もしくは指定した行数だけ表示する方法。 head 利用できるオプション コマンド例 の 1行目だけを表示 の 5行目までを表示 カレントディレクトリ以下の全てのtxtファイルの1行目を表示

Amazon S3 と ローカルファイルのチェックサムの比較
s3apiでEtagを取得 検証 マルチアップロード時の注意点 Amazon S3 の Etagを使ってファイルの整合性チェックをする。 s3apiでEtagを取得 S3 APIを利用するとEtagを取得します。この値はmd5のハッシュ値になります。 検証 MD…

github.io / gitlab.ioで公開されている質の高い技術ドキュメント
AWSによるクラウド入門 Pythonプログラミング入門 普通の人が資産運用で99点をとる方法とその考え方 2018年の段階で私が知らないこと github.io / gitlab.io で無料で公開されている興味深いドキュメントのmemo AWS…

10進数から2進数 2進数から10進数への変換 JavaScript
10進数から2進数 2進数から10進数 テスト 10進数から2進数、2進数から10進数への変換を行うJavaScriptのコードの紹介。 JSの場合、10進数から2進数への変換はメソッド。2進数から1…

JavaScriptの配列ショートハンド (AtCoder用)

JavaScriptでワーシャルフロイド法を実装
AtCoder ABC012 D問題 D - バスと避けられない運命 解説 実装 AtCoder ABC012 の D問題でワーシャルフロイド法が利用できる問題が出てきたので、 JavaScriptで実装しました。 AtCoder ABC012 D問題 D…

GitHub Actions で Gatsby をビルドし Amazon S3 にデプロイする
GitHub Actions について あらかじめ準備しておくもの AWS IAM ユーザを環境変数にセットする workflowの記述 ビルド バッジを利用する 終わりに 参考にしたところ Gatsbyで作った静的サイトを、GitHub Actions…

cloudinaryによる画像ファイルの管理 はじめてみる
目的 cloudinary について 他のサービスとの比較 料金プラン アカウントの登録 利用してみる ダッシュボード 画像の編集 APIベースでのアクセス 感想 参考 画像の管理や配信、さらには加工といった事ができるsaas型のcloud…

JavaScriptによる2分探索(バイナリサーチ) のサンプルコード
2分探索について ソース 参考 JavaScriptで2分探索(バイナリサーチ)を実装してみました。…

Tags

Dates

© 2020   404 motivation not found