Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

1377c4ffd653981f36676da45160c579?s=47 Takeshi Igarashi
June 30, 2018
170

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

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

1377c4ffd653981f36676da45160c579?s=128

Takeshi Igarashi

June 30, 2018
Tweet

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