wordpressをherokuで(ほぼ)無料で運用する方法

以前は有料のサーバーでワードプレスを運用していましたが、今現在はすべて解約しております。

ですが、無料でワードプレスを構築できる方法があるので、それを利用して再度ブログをやってみようと思いました。

ちなみにタイトルで(ほぼ)とありますが、amazonAWSのS3でもしかしたら数円程度費用がかかるかもしれないのでお伝えしておきます。。

wordpressをherokuで(ほぼ)無料で運用する方法

  • サーバー代
  • ドメイン代

ワードプレスを運用するにあたり、上記の2つが必要です。
前者がmixhostで月880円〜、後者(.comドメイン)が年999円〜です。

年22,440円を断捨離すべく私が選択した手法はherokuを使うことでした。

herokuを利用すればサーバー代は無料です。
ドメインはherokuのを利用すれば無料です。

構築方法

参考

以下のページを参考にさせていただきました。
https://qiita.com/fuwamaki/items/8684003bb47197336645

作業・設定

herokuはgit pushしたソースが展開されます。
なので、ローカルでソースを何かしらcommitする必要があります。
ご存知の通り、ワードプレスは管理画面を操作することでプラグインやテーマをインストールすることができます。
そのデータはあくまでheroku側にDLされます。

heroku側のデータをコミットするわけにも行きませんので、

ローカル⇒heroku

の方向で更新する必要があります。
(自分の知る範囲の話です。もし違ってたらすいません)

herokuアカウントの作成

herokuアカウントを作成してください。説明は割愛します。

composerをインストール

composerをインストールします。
ローカルでコミットしたソースをpushする前提なので、
composerでphpライブラリはもちろん、
wordpressの更新やプラグイン・テーマのダウンロード等も行います。

私はmacのターミナルを立ち上げ、以下で入れました。

$ brew install composer

git clone

heroku用のwordpressをcloneします。
ソースコードが展開されますので、適宜dirの移動や作成を行ってください。

$ git clone https://github.com/PhilippHeuer/wordpress-heroku.git

composer install

先程展開したソースと同じ階層に移動し、composer installを行います。

$ composer install

heroku create

herokuに新しいアプリケーションを登録します

$ heroku login
IDとPasswordを入力します。
その後Herokuに今回作りたいアプリケーションを作成します。
$ heroku create ドメイン名

Herokuの設定ファイルをSecretに

コマンドを使って設定します。

$ heroku config:set \
    AUTH_KEY='{任意の値}' \
    SECURE_AUTH_KEY='{任意の値}' \
    LOGGED_IN_KEY='{任意の値}' \
    NONCE_KEY='{任意の値}' \
    AUTH_SALT='{任意の値}' \
    SECURE_AUTH_SALT='{任意の値}' \
    LOGGED_IN_SALT='{任意の値}' \
    NONCE_SALT='{任意の値}'

上部の値ですが、以下のAPIから生成できるようです。
https://api.wordpress.org/secret-key/1.1/salt/

追加インストール

必要に応じて入れてください。

$ heroku addons:create sendgrid:starter –app {herokuのapp名}
$ heroku addons:create scheduler:standard –app {herokuのapp名}
$ heroku config:set DISABLE_WP_CRON=’true’ –app {herokuのapp名}
$ heroku addons:open scheduler –app {herokuのapp名}
$ heroku addons:create cleardb:ignite –app {herokuのapp名}
$ heroku addons:create heroku-redis:hobby-dev –app {herokuのapp名}
$ heroku addons:create papertrail:choklad –app {herokuのapp名}

※私の環境だとオプションの–app {herokuのapp名}を付与しないとエラーになりました

S3の設定

herokuだけだとアップロードした写真等のデータが消えてしまうので、
amazon AWSのS3を利用します。

AWSアカウント作成

自分は既にアカウントが存在しておりましたので、今回は割愛します。
以下から作成してください。
https://aws.amazon.com/jp/
AWSですが数円はかかってしまう可能性があるようです。

S3上にバケットを作成

S3をサービス一覧から検索して押下して遷移してください。
バケットを作成した際にバケット名とリージョンをメモしてください。

IAMでユーザを作成

次にサービス一覧からIAMを検索して遷移してください。
そしてユーザーを作成します。
アクセスの種類は、「プログラムによるアクセス」にチェックを入れます。

アクセス許可の設定は既存のポリシー一覧から、
S3へのアクセスを許可する「AmazonS3FullAccess」を選択してください。

ユーザの作成が完了した画面で「アクセスキー」と「シックレットキー」が表示されるので、必ずメモしてください。

S3にアクセスするpluginはDefaultでPhilippHeuer/wordpress-herokuにあるようで、AWS_S3_URLという変数が定義されていれば良いそうです。

以下のようにコマンドを打ってください。

これで変数が定義されました。

WPのプラグインをインストール

ワードプレス管理画面でプラグインをインストールしても、git pushしたら消えてしまいます。
なのでローカルでcomposer updateを実行し、git commitし、git pushする手順を踏みます。

composer.jsonに入れたいプラグイン名とバージョンを記載します。
例えばwp-user-avatarsというプラグインをインストールしたい場合ですが、以下から検索してください。
https://wpackagist.org/search?q=wp-user-avatar&type=plugin&search=

上の画面のようにバージョンを押下して表示された文字列をcomposer.jsonに追加し、その後composer updateを実行してください。

しかし、wp-content/plugin配下にインストールされてしまいました。
今状態でgit pushしてもプラグインが使えませんので、web/app/plugin配下に移動させた状態でgit commit、git pushを行ってください。

デザインテーマを入れたい

私は有料のテーマを購入してありましたので、web/app/theme配下にそのデータを配置し、以下のようにgitに追加してコミットします。

git add --force web/app/theme/{購入したテーマdir}
git commit -m "テーマを追加"
git push heroku origin

PHPのGDライブラリをインストール

wordpressで画像をアップロードに失敗しました。GDライブラリを入れたら解消されるかもしれません。
インストールはやはりcomposer.jsonに追加してcomposer updateを実行してください。

wordpress自体のバージョンを上げる

ワードプレス管理画面で更新しても、git pushしたら消えてしまうので、
ここでもローカルでcomposer updateを実行し、git commitし、git pushする手順を踏みます。

herokuへデプロイ

これでようやくherokuへデプロイできます。

$ git add -A
$ git commit -m "initial commit"
$ git push heroku master

git push の後はorigin master と打つ癖が個人的にあるので毎回注意して打ちます。

その後はブラウザでアクセスし、wordpressの管理画面から色々設定をやってください。
pluginやthemeは管理画面からインストールする遷移がなくて最初戸惑いましたが、heroku対応されているようですね。

最近、実装しない人になったので記事にしました。是非お読みください。

フリーランスエンジニアがPG(実装する人)からSE(設計する人)になってみた件

12年程webエンジニアをやってみた感想を記事にしました。こちらもよろしければ御覧ください。
 

webエンジニアやってみてよかったか???キャリア12年の私が語ります

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です