web制作的に便利な機能満載!microsoft azureを使ってみよう
TRANSCRIPT
![Page 1: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/1.jpg)
Web 制作的に便利な機能満載♪Microsoft Azure を使ってみよう
松本 典子Noriko Matsumoto
フリーランス Web デザイナー / ディレクター
2015 / 12 / 06 北九州マカベン x メンバーズ vol.2
![Page 2: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/2.jpg)
福岡県北九州市在住フリーランス
Web デザイナー / ディレクターインフラ知識ゼロ…昨年 12 月に Azure デビュー
2
自己紹介
松本 典子(まつもと のりこ)
Web に関する業務全般やってます。(提案~ Web ページ制作~運用・マーケティング etc… )
![Page 3: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/3.jpg)
本日お話すること
Microsoft Azure について– Azure WebApps とは?
4つのオススメ便利機能–Web 構築環境が一瞬でできる Web アプリ–Web サイトの自動バックアップ・復元–テスト環境と本番環境を一瞬で入れ替え–急激なアクセス過多も安心!スケールアウト
【実践編】ステージングを使ってWordPress サイトを制作する
3
![Page 4: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/4.jpg)
Microsoft Azure (アジュール)とは?
4
![Page 5: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/5.jpg)
Microsoft Azure について
5
Microsoft Azure についてざっくり説明
1CloudServices( 主にプログラマ向け )ミッションクリティカル、常に動き続けていないといけないサービス、きわめて高負荷なサービスなど
2VirtualMachine( 主にインフラ向け ) 以前からの移植や VPS を触ってきた人、Linux ユーザー向け(仮想マシン)
3 WebApps(Web デザイナー向け )軽量な Web システムや Web デザイナー、フロントプログラマ向け
![Page 6: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/6.jpg)
Azure WebApps について
6
![Page 7: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/7.jpg)
Azure WebApps について
7
![Page 8: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/8.jpg)
Azure WebApps ってこんな感じ
8
「 STANDARD 」がおすすめ 50GB まで「独自ドメインサイト」が入れ放題
– 約 8000 円で– WordPress だったら 1000 サイト入る計算
5 ドメインまで SSL も OK– 6 サイト目から 918 円/月
構築環境をそれぞれに変えられる– PHP のバージョンや SSL 、 CMS など
自分専用で環境を細かく設定できるレンタルサーバーを持てるイメージ
![Page 9: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/9.jpg)
従来のレンタルサーバーのように使える 管理ポータル画面で、よく使う必要な機能は
操作できる– コマンド知らなくて大丈夫– スケールアウト・フェイルオーバーの独自設計不要
Azure WebApps のいいところ
9
![Page 10: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/10.jpg)
4つのオススメ便利機能
Web 制作的に「コレは使うべき!」な便利機能のご紹介
10
![Page 11: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/11.jpg)
Web 構築環境が一瞬でできる Web アプリ
11
管理画面から「 Web +モバイル」を選んで、「アプリの名前」を入力するだけ
![Page 12: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/12.jpg)
Web サイトの自動バックアップ・復元
12
完全バックアップを 1 日 1 回やってくれる–設定しておけば毎日
バックアップデータはストレージに保存されていくので容量を圧迫しない–極論 365 日前の状態に戻すこともできる
WordPress も SQLite を採用すればDB のバックアップ対策しなくて OK– DB バックアップ用のプラグイン不要–復旧時は FTP でファイルをあげるだけ
![Page 13: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/13.jpg)
テスト環境と本番環境を一瞬で入れ替え
13
「ステージング」とは?本番環境と全く同じものを「ステージング環境」として1 つ作成可能。ステージング環境は一切本番環境には影響を与えない。
「ステージング」でテスト環境と本番環境をワンクリックで入れ替えできる!!
![Page 14: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/14.jpg)
急激なアクセス過多も安心!スケールアウト
14
スケールアウトとは?
![Page 15: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/15.jpg)
15
DEMOやります。
ここまでの内容の
![Page 16: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/16.jpg)
【実践編】ステージングを使ってWordPress サイトを制作する
16
![Page 17: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/17.jpg)
WordPress と画像の配信を別々に行う
17
WordPress と画像を別々に配信するように構成
WordPress サイトの画像は「 Azure BLOB ストレージ」に置いた方が色々便利な話。http://zuvuyalink.net/nrjlog/archives/1972
![Page 18: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/18.jpg)
Azure WebApps とAzure BLOB ストレージの違い
18
![Page 19: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/19.jpg)
使用するプラグイン
19
Windows Azure Storage for WordPress–メディアコンテンツ ( 画像 / 動画 ) を
AzureBLOB ストレージに配置する
SQLite Integration–MySQL の代替用
WP-Mail-SMTP– Azure でメール送信できるようにする
![Page 20: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/20.jpg)
Windows Azure Storage for WordPress
20
登録していく画像が AzureBLOB ストレージに入っていく形になる。(容量無制限)
![Page 21: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/21.jpg)
SQLite Integration
21
WordPress を利用する場合必要になる、データベースとして使用( MySQL の代用)
小~中規模サイトの運営に便利
本気で MySQL を使うと有料になりコスト高
SQLite はファイルなのでサーバ不要
復旧時は FTP でファイルアップロードで OK
専門知識の無い Web デザイナーに優しい!
![Page 22: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/22.jpg)
ベースになるサイト URL を自動生成
下記の内容を「 wp-config.php 」に追記
22
define('WP_HOME', 'http://'.$_SERVER['HTTP_HOST']);define('WP_SITEURL', 'http://'.$_SERVER['HTTP_HOST']);
define('WP_HOME', 'http://'.$_SERVER['HTTP_HOST'].'/ ディレクトリ名 ');define('WP_SITEURL', 'http://'.$_SERVER['HTTP_HOST'].'/ ディレクトリ名 ');
▼ドメイン直下に WordPress を置く場合
▼ディレクトリ内に WordPress を置く場合
![Page 23: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/23.jpg)
WordPress サイトでステージング
23
![Page 24: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/24.jpg)
WordPress サイトでステージングを使う場合の注意点
.htaccess ではなく web.configMySQL は使わず SQLite を使って構成する静的 URL は書き換わらない– wp-config.php にコードの追記を忘れない–画像は BLOB ストレージから配信する
プラグイン「 Windows Azure Storage for WordPress 」を使う
24
![Page 25: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/25.jpg)
最後に
25
Web デザイナー視点で実際に使ってみたAzure の色々な機能についてブログ書いてます。
http://zuvuyalink.net/nrjlog/Blog
![Page 26: Web制作的に便利な機能満載!Microsoft Azureを使ってみよう](https://reader036.vdocuments.net/reader036/viewer/2022081520/589fa7361a28abc04e8b62fb/html5/thumbnails/26.jpg)
ご静聴ありがとうございました!