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

関連記事

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…

docker-composeで起動したMySQLコンテナのmysqldumpを行うコマンド
環境 コマンド docker-composeで起動したMySQLコンテナに対して、mysqldumpを行いdumpデータを取得する方法の紹介 環境 macOS catalina コマンド

最新の投稿

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

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

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

Vue.jsで作成された、ちょっと面白くて役立ちそうなサービス
UIコンポーネント VueSocial CKEditor 5 Vue.Draggable Vuetable 2 vuejs-datepicker Kalendar Vue Apexcharts Vue.js Google Charts vue-cart WebIDE…

GitHubのリポジトリをGitLabに同期する GitLabのミラーリング機能
GitLabのミラーリングについて GitHubのリポジトリをGitLabに反映する その他 参考 GitLabのミラーリング機能によりGitHubなどの外部のリポジトリとのミラーリングを行うことができます。 これを使ってGitHub…

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

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

ハイフンとかマイナスとかダッシュとか

Firebase + Nuxt で認証付きページを作るときに参考にしたいところ
Webアプリケーションのセッション管理にJWT導入を検討する際の考え方 Service Worker によるセッション管理 ユーザー セッションの管理 Nuxt.jsとFirebaseでSPA×SSR×PWA×サーバーレスを実現する CookieとセッションとJWT SSR…

GolangをCGIとして実行する
環境 golang パッケージ ソースと実行 ビルドとサーバ実行 標準ライブラリのみ Golang を CGIとして実行する際のメモ 環境 golang パッケージ 以下のモジュールを利用しています。 github.com/gorilla/mux…

Tags

Dates

© 2020   404 motivation not found