無料で Wordpress + Git を簡単構築

無料で Wordpress + Git 簡単構築

HerokuでWordpressを構築します。
Git管理＋ローカル/本番環境の切り替えが簡単にできます！

環境

• Wordpress 5.2.2
• PHP 7.2.9

Windows環境設定

1. PHP公式からPHP7.2をインストール
   https://www.php.net/downloads.php
   「Windows downloads」のリンクより「PHP 7.2」の「VC15 x64 Non Thread Safe」のzipを解凍して、「C:\Program Files\php-7.2.19」に配置

2. 「C:\Program Files\php-7.2.19\php.ini」を編集しMySQLに接続できるようにする。（php.ini.orgとしてバックアップを取っておく）

   ;extension=mysqli
   > extension=mysqli
   

3. composer公式からcomposerをインストール
   「Composer-Setup.exe」リンクより、セットアップexeを起動してインストール
   https://getcomposer.org/download/

Herokuアカウント作成

1. Heroku公式よりアカウントを作成
   https://jp.heroku.com/

2. Herokuからdeployするためにクレジットカードを登録
   https://dashboard.heroku.com/account/billing

   ※ 無料枠以上に使用したい場合は作成したHerokuアプリの「Resources」タブの「Change Dyno Type」からプランを変更する。

3. コンソールからHerokuを実行するためにHeroku CLIをインストール
   https://devcenter.heroku.com/articles/heroku-cli

HerokuのWordpressアプリ作成

1. 下記の「Getting Started」の「Deploy to Heroku」からHerokuのWordpressアプリ作成
   https://github.com/PhilippHeuer/wordpress-heroku

2. git clone https://github.com/PhilippHeuer/wordpress-heroku.gitし、対象のHerokuアプリにリネーム

3. 下記を参考にローカル環境構築
   https://github.com/PhilippHeuer/wordpress-heroku/wiki/Deployment

   cd my-project
   composer install
   

4. 下記内容で.envを作成する。
   ※「CUSTOM_DB_URL」には、Herokuアプリの「Resources」タブ「Add-ons」にある「JawsDB Maria」からリンクに飛び、「Connection String」の内容を貼り付ける。
   ※「[APP]/config/environments/xxxxx.php」で環境を切り替えられる

   # DB Connection
   CUSTOM_DB_URL=mysql://user:password@host:3306/databaseName
   
   # WP Settings 
   WP_ENV=development
   WP_HOME=http://XXXXX.localhost
   WP_SITEURL=${WP_HOME}/wp
   
   # Generate your keys here: https://roots.io/salts.html
   AUTH_KEY='generateme'
   SECURE_AUTH_KEY='generateme'
   LOGGED_IN_KEY='generateme'
   NONCE_KEY='generateme'
   AUTH_SALT='generateme'
   SECURE_AUTH_SALT='generateme'
   LOGGED_IN_SALT='generateme'
   NONCE_SALT='generateme'
   

5. WP-CLIを使ってWordpressを日本語化
   Windowの環境変数のPATHに「[APP]/vendor/wp-cli/wp-cli/bin」を追加し、下記コマンド実行

   wp core language install ja --activate
   

6. Wordpressの初期セットアップに時間がかかるので「[APP]/web/.htaccess」に下記を追記

   php_value memory_limit -1
   php_value max_execution_time 0
   

7. 下記コマンドを実行し「http://localhost」にアクセスし、ローカル環境の動作確認。
   ※ローカル環境はかなり重いので、自分はXamppを入れて対応した。それでもちょっと重い。。。

   php wp-cli.phar server --host=0.0.0.0 --port=80 --path=web
   

   C:/xamppを配置し、C:/xampp/apache/conf/httpd.confの下記を設定。

   ～
   ServerName localhost.XXXXX:80
   
   ～
   DocumentRoot "/XXXXX/web"
   <Directory "/XXXXX/web">
   ～
   

8. テーマやプラグインは下記を参考にcomposerに追記
   https://github.com/PhilippHeuer/wordpress-heroku/wiki/WordPress---Plugins---Themes

   下記からcomposerに追記できるテーマやプラグインを確認できる。
   https://wpackagist.org/

9. 作成したHerokuアプリの「Deploy」タブの「Deploy using Heroku Git」を参考にデプロイする。

   heroku git:remote -a XXXXX
   # リモートブランチにherokuが追加されていることを確認
   git remote -v
   

10. git push heroku masterでHerokuアプリデプロイ

11. https://XXXXX.herokuapp.comにアクセス！

注意点

• XXXXX.herokuapp.comの管理画面からアップロードした画像が保存されない
• 管理画面側からプラグインやテーマをインストールできないので、composerで管理する必要がある。
• ローカル環境がなぜかかなり重い。。。解決できる方、ご教授ください！

▼作ったサイト
TechTechBlog | 技術ブログのアンテナサイト
https://techtechblog.herokuapp.com/

参考リンク
驚くほど無料で一瞬でWordPressを用いたブログ環境を構築できた話