WordPressローカル環境のすゝめ 〜サーバに上げる、その前に〜

このスライドは、2018年6月30日のWordBenchしずおかで発表したものに、加筆修正したものです。

Transcript

1. WordPressローカル環境のすゝめ 〜サーバに上げる、その前に〜 五⼗嵐 武志 2018/06/30 WordBench Shizuoka
2. ご案内 このスライドは、2018年6⽉30⽇のWordBenchし ずおかで発表したものに、加筆修正したものです。
3. whoami 五⼗嵐 武志 Web開発者 ★ HTML5/CSS3 ★ WordPress ★ Cloud Computing（AWS他） デザイナー ★ UX/ユーザー中⼼設計（HCD）      takeshi81
4. whoami 五⼗嵐 武志 コミュニティ ★ DIST http://dist.tokyo ★ WordPressとおやつの会
 2010-2013 ★ F-site http://f-site.org
 2002-2016      takeshi81
5. しぞーかと私
6. whoami 五⼗嵐 武志 ★ 1975年 沼津⽣まれ ★ その5年後 浜松へ転居 ★ しかし1年半後に県外へ
 今は東京に漂着 ★ 実家は7年前、県内へ戻る
 今は伊東市内
7. 最初に質問 Questionnaire
8. 質問 Q: ⾃分のブログやwebサイトを持っている⼈、
 ⼿を挙げて" （更新頻度は問いません）
9. 質問 Q: お仕事でwebサイトを制作、構築、運⽤などに
 関わっている⼈、⼿を挙げて" （受託、⾃社の別は問いません）
10. 質問 Q: これらのブログ、webサイトの、
 デザイン・機能の変更をテストできる環境を、
 本番以外に⽤意している⼈、⼿を挙げて" （リモート、ローカルの別は問いません）
11. 開発環境のメリット • デザイン変更や機能追加も、テスト出来れば安⼼で す。もう、おっかなびっくり公開中のwebサイトを 直接いじって試さなくても⼤丈夫。開発環境を⽤意 しましょう。
12. 開発環境のメリット • デザイン変更や機能追加も、テスト出来れば安⼼で す。もう、おっかなびっくり公開中のwebサイトを 直接いじって試さなくても⼤丈夫。開発環境を⽤意 しましょう。 • お⾼いんじゃないですか？ ほぼ無料です
13. 開発環境のメリット • デザイン変更や機能追加も、テスト出来れば安⼼で す。もう、おっかなびっくり公開中のwebサイトを 直接いじって試さなくても⼤丈夫。開発環境を⽤意 しましょう。 • お⾼いんじゃないですか？ ほぼ無料です • 難しいんじゃないですか？ わりとお⼿軽です
14. 開発環境とは • 現場により厳密な定義があったりしますが、ここで は「デザイン変更や機能追加を試しても安⼼な、本 番同様ブログやwebサイトが動作する環境と、その ためのツール類」とします。
15. ローカル環境とは ★ お⼿もとのPC = ローカル
16. ローカル環境とは ★ ローカルでない = リモート = ネットワーク経由
 ⼀般に公開されているwebサーバーと、⼿もとの PCは通常リモート接続していることになります。
17. ローカル環境とは ★ お⼿もとのPC = ローカル ★ PC内に開発⽤のWebサーバーを⼊れて、ブログや CMSを動かしましょう！
18. ローカル環境とは ★ お⼿もとのPC = ローカル ★ PC内に開発⽤のWebサーバーを⼊れて、ブログや CMSを動かしましょう！ ★ PC内だから、書き換えは即反映。検証のためリ モートサーバーとFTPを繰り返す⼿間も省けます。
19. ローカル環境とは ★ お⼿もとのPC = ローカル ★ PC内に開発⽤のWebサーバーを⼊れて、ブログやCMS を動かしましょう！ ★ PC内だから、書き換えは即反映。検証のためリモート サーバーとFTPを繰り返す⼿間も省けます。 ★ ⾃分のPCなら元に戻すのも、リモートより簡単です。
20. ローカルでwebサーバーを動かす WordPressなど、PHPアプリケーション向けツール ★ 初⼼者におすすめ: MAMP、XAMPP ★ Vagrantベース: VCCW、Wocker、VVV ★ Local by Flywheel
21. ローカルでwebサーバーを動かす ちなみに私は…… ★ Homebrewで直接Macにインストール
 PHP, MariaDB, h2o, node & more. 基本は同じなので、お好みのツールでOK！
22. 百聞は⼀⾒にしかず ローカルwebサーバーでWordPressを動かすデモ
23. 百聞は⼀⾒にしかず リモートサーバーからデータをダウンロードして
 ローカル環境に反映させるデモ
24. ⼀般的なweb開発・公開環境構成例 )0.& */5&3/&5 %"5"
    $&/5&3 My PC 公開webサーバー ブラウザ Mobile, Tablet, PC
25. ⼀般的なweb開発・公開環境構成例 )0.& */5&3/&5 %"5"
    $&/5&3 作ったデータをアップロード webを閲覧
26. ローカル開発環境を使ったイメージ )0.& */5&3/&5 %"5"
    $&/5&3 本番のデータをダウンロードして反映
27. ローカル開発環境を使ったイメージ )0.& */5&3/&5 %"5"
    $&/5&3 動作を確認しながら開発
28. ローカル開発環境を使ったイメージ )0.& */5&3/&5 %"5"
    $&/5&3 作ったデータをアップロード webを閲覧
29. WordPressで同期・バックアップするべきもの ★ ⾃作、または⾃分で改変したファイル
 （テーマ、プラグイン etc.） ★ データベース
 （記事、⽇付などメタ情報 etc.）
30. ローカルとリモートのWordPressを同期 ★ ツールを使えば難しくありません ★ Wordmove、bash-wp-deploy ★ 私は⾃作しています…（参考リンク）
31. ご静聴ありがとうございましたm(_ _)m