Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WordPressローカル環境のすゝめ 〜サーバに上げる、その前に〜
Search
Takeshi Igarashi
June 30, 2018
0
300
WordPressローカル環境のすゝめ 〜サーバに上げる、その前に〜
このスライドは、2018年6月30日のWordBenchしずおかで発表したものに、加筆修正したものです。
Takeshi Igarashi
June 30, 2018
Tweet
Share
More Decks by Takeshi Igarashi
See All by Takeshi Igarashi
ご当地わぷーのつくりかた(静岡編)
takeshi81
0
72
楽々!楽しい?WP-CLI入門記
takeshi81
0
41
速い!CSS
takeshi81
0
88
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
510
A designer walks into a library…
pauljervisheath
207
24k
A better future with KSS
kneath
238
17k
Embracing the Ebb and Flow
colly
86
4.7k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Speed Design
sergeychernyshev
32
1k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Statistics for Hackers
jakevdp
799
220k
Why Our Code Smells
bkeepers
PRO
336
57k
Transcript
WordPressローカル環境のすゝめ 〜サーバに上げる、その前に〜 五⼗嵐 武志 2018/06/30 WordBench Shizuoka
ご案内 このスライドは、2018年6⽉30⽇のWordBenchし ずおかで発表したものに、加筆修正したものです。
whoami 五⼗嵐 武志 Web開発者 ★ HTML5/CSS3 ★ WordPress ★ Cloud
Computing(AWS他) デザイナー ★ UX/ユーザー中⼼設計(HCD) takeshi81
whoami 五⼗嵐 武志 コミュニティ ★ DIST http://dist.tokyo ★ WordPressとおやつの会 2010-2013
★ F-site http://f-site.org 2002-2016 takeshi81
しぞーかと私
whoami 五⼗嵐 武志 ★ 1975年 沼津⽣まれ ★ その5年後 浜松へ転居 ★
しかし1年半後に県外へ 今は東京に漂着 ★ 実家は7年前、県内へ戻る 今は伊東市内
最初に質問 Questionnaire
質問 Q: ⾃分のブログやwebサイトを持っている⼈、 ⼿を挙げて" (更新頻度は問いません)
質問 Q: お仕事でwebサイトを制作、構築、運⽤などに 関わっている⼈、⼿を挙げて" (受託、⾃社の別は問いません)
質問 Q: これらのブログ、webサイトの、 デザイン・機能の変更をテストできる環境を、 本番以外に⽤意している⼈、⼿を挙げて" (リモート、ローカルの別は問いません)
開発環境のメリット • デザイン変更や機能追加も、テスト出来れば安⼼で す。もう、おっかなびっくり公開中のwebサイトを 直接いじって試さなくても⼤丈夫。開発環境を⽤意 しましょう。
開発環境のメリット • デザイン変更や機能追加も、テスト出来れば安⼼で す。もう、おっかなびっくり公開中のwebサイトを 直接いじって試さなくても⼤丈夫。開発環境を⽤意 しましょう。 • お⾼いんじゃないですか? ほぼ無料です
開発環境のメリット • デザイン変更や機能追加も、テスト出来れば安⼼で す。もう、おっかなびっくり公開中のwebサイトを 直接いじって試さなくても⼤丈夫。開発環境を⽤意 しましょう。 • お⾼いんじゃないですか? ほぼ無料です •
難しいんじゃないですか? わりとお⼿軽です
開発環境とは • 現場により厳密な定義があったりしますが、ここで は「デザイン変更や機能追加を試しても安⼼な、本 番同様ブログやwebサイトが動作する環境と、その ためのツール類」とします。
ローカル環境とは ★ お⼿もとのPC = ローカル
ローカル環境とは ★ ローカルでない = リモート = ネットワーク経由 ⼀般に公開されているwebサーバーと、⼿もとの PCは通常リモート接続していることになります。
ローカル環境とは ★ お⼿もとのPC = ローカル ★ PC内に開発⽤のWebサーバーを⼊れて、ブログや CMSを動かしましょう!
ローカル環境とは ★ お⼿もとのPC = ローカル ★ PC内に開発⽤のWebサーバーを⼊れて、ブログや CMSを動かしましょう! ★ PC内だから、書き換えは即反映。検証のためリ
モートサーバーとFTPを繰り返す⼿間も省けます。
ローカル環境とは ★ お⼿もとのPC = ローカル ★ PC内に開発⽤のWebサーバーを⼊れて、ブログやCMS を動かしましょう! ★ PC内だから、書き換えは即反映。検証のためリモート
サーバーとFTPを繰り返す⼿間も省けます。 ★ ⾃分のPCなら元に戻すのも、リモートより簡単です。
ローカルでwebサーバーを動かす WordPressなど、PHPアプリケーション向けツール ★ 初⼼者におすすめ: MAMP、XAMPP ★ Vagrantベース: VCCW、Wocker、VVV ★ Local
by Flywheel
ローカルでwebサーバーを動かす ちなみに私は…… ★ Homebrewで直接Macにインストール PHP, MariaDB, h2o, node & more.
基本は同じなので、お好みのツールでOK!
百聞は⼀⾒にしかず ローカルwebサーバーでWordPressを動かすデモ
百聞は⼀⾒にしかず リモートサーバーからデータをダウンロードして ローカル環境に反映させるデモ
⼀般的なweb開発・公開環境構成例 )0.& */5&3/&5 %"5"$&/5&3 My PC 公開webサーバー ブラウザ Mobile, Tablet,
PC
⼀般的なweb開発・公開環境構成例 )0.& */5&3/&5 %"5"$&/5&3 作ったデータをアップロード webを閲覧
ローカル開発環境を使ったイメージ )0.& */5&3/&5 %"5"$&/5&3 本番のデータをダウンロードして反映
ローカル開発環境を使ったイメージ )0.& */5&3/&5 %"5"$&/5&3 動作を確認しながら開発
ローカル開発環境を使ったイメージ )0.& */5&3/&5 %"5"$&/5&3 作ったデータをアップロード webを閲覧
WordPressで同期・バックアップするべきもの ★ ⾃作、または⾃分で改変したファイル (テーマ、プラグイン etc.) ★ データベース (記事、⽇付などメタ情報 etc.)
ローカルとリモートのWordPressを同期 ★ ツールを使えば難しくありません ★ Wordmove、bash-wp-deploy ★ 私は⾃作しています…(参考リンク)
ご静聴ありがとうございましたm(_ _)m