無料で 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を用いたブログ環境を構築できた話](https://qiita.com/fuwamaki/items/8684003bb47197336645)