【Fukuoka ComCamp2016 powered by MVPs】 2016年2月20日に開催された「ComCamp2016 powered by MVPs」の福岡会場で登壇した際のスライドです。（一部修正あり）

1. 一度使うとレンタルサーバーに戻れない！？
便利機能を使ってみよう！
Web制作でのMicrosoft Azure
活用方法
松本 典子
Noriko Matsumoto
フリーランス Webデザイナー / ディレクター
2016/02/20 Fukuoka ComCamp2016 powered by MVPs

2. 2
 福岡県北九州市在住
 インフラ知識ゼロ…
 フリーランス
Webデザイナー / ディレクター
 Microsoft MVP for Microsoft
Azure
松本 典子（まつもと のりこ）
Webに関する業務全般やってますが、
メイン業務は「デザイン」です。
自己紹介

3. こういうデザインを作ってます
3

4. 本日お話しすること
4
Webデザイナーなのに
なぜAzureを使ってるの？
– クラウドって難しいイメージあるけど…？
これは便利！オススメ便利機能
– Web制作的視点で「コレは使える！」と思う
便利機能のご紹介
【DEMO】WordPressサイトを構築しよう
– Azure WebAppsの便利機能を活かす構成

5. Webデザイナーなのに、
なぜAzureを使ってるの？
クラウドって難しいイメージあるけど…？
5

6. 実際に使う前のAzureのイメージ
6
 インフラエンジニアやプログラマが
知識と技術を駆使して使うイメージ
– まず用語に馴染みがない
• サブスクリプション？
• リージョン？
 専門知識が無いと使えない？
– 使えるように設定するの無理そう･･･
 とりあえずWeb制作には関係なさそう

7. 使ってみたら実はそんなに難しくない！
 やりたいことは、ほぼポータル画面から
設定・変更できる
 レンタルサーバーと同じようにも使える
– レンサバよりラクで便利な場合が多い
 専用のツールが必要なものも
WebAppsの機能を工夫すれば代替可能
– 例：A / Bテストなど
 しくじったらとりあえず消せばいい
7
Azure WebAppsは
デザイナーやWeb制作者に優しい！

8. ポータル画面でやりたいことはできる
8
 管理ポータル画面で、よく使う必要な
機能は操作できる
– コマンド知らなくて大丈夫
– スケールアウトやフェイルオーバーなどの
独自設計が基本不要
Azure新旧ポータル対応表
https://azure.microsoft.com/ja-jp/features/azure-portal/compatibility/

9. 9
1 CloudServices(主にプログラマ向け)
ミッションクリティカル、常に動き続けていないと
いけないサービス、きわめて高負荷なサービスなど
2 VirtualMachine(主にインフラ向け)
以前からの移植やVPSを触ってきた人、
Linuxユーザー向け（仮想マシン）
3 WebApps(Webデザイナー向け)
軽量なWebシステムやWebデザイナー、
フロントプログラマ向け
Microsoft Azureについてざっくり説明

10. 10
Azure WebAppsのメリット
クラウド上に作られたレンタルサーバーの
ようなもの
数分で作れるWeb制作・配信・構築環境
構築環境をそれぞれに変えられる
– PHPのバージョンやSSL、CMSなど
デプロイ（アップロード）方法が選べる
– FTP、Git、Dropbox、OneDrive…
インフラなどの知識の無い人でも
クラウドサービスの利点を活かせる！

11. これは便利！オススメ便利機能
Web制作的視点で「コレは使える！」と思う便利機能のご紹介
11
すべてポータル画面から設定・変更できる♪

12. 12
Web構築環境が一瞬でできるWebアプリ
 ポータル画面で「Web＋モバイル」を選び、
「アプリの名前」を入力するだけ

13. 容量無制限のAzure BLOBストレージ
 画像や動画など容量が大きなファイルを
置くのに適している
 Webサーバー代わりにも使える
 カスタムドメインの設定も可能
 WordPressの場合はプラグインがある
– Windows Azure Storage for WordPress
13
Azure BLOBストレージは容量無制限
課金制（1GB 2.45円くらい）

14. Azure BLOBストレージとWebAppsの違い
14

15. CDNもポータル画面から設定可能
15
表示速度が早くなる
アクセス（トラフィック）が集中しても
サイトが落ちる心配がない
動画など容量の大きなデータ配信ができる
（サーバに負担がかからない）
CDN（Contents Delivery Network）
ファイルサイズの大きいデジタルコンテンツを
ネットワーク経由で配信するために最適化された
ネットワークのこと。

16. 動画配信もすぐに対応できる
16
ライブストリーム配信やオンデマンドで配
信ができる
インデックス作成ができる
自動的にキャプションを追加
DRM（著作権保護機能）の追加も可能
SSL接続経由でコンテンツのストリーミン
グも可能
Azure Media Services
動画配信サーバを用意したり、動画のエンコードを
自力でやったりという手順は一切なく、
Azure管理ポータルから簡単に準備して配信できる。

17. Webサイトの自動バックアップ・復元
17

18. テスト環境と本番環境を一瞬で入れ替え
18
ステージング環境のURLは「サイト名-staging.azurewebsites.net」
 ワンクリックでテストと本番を入れ替え
「ステージング」でテスト環境と本番環境
をワンクリックで入れ替えできる！！

19. デプロイ（アップロード）方法が選べる
19
FTP、Git、Dropbox、OneDrive…

20. デプロイ（アップロード）方法が選べる
20
Microsoft Azure WebAppsとBitbucketを使ってGitデプロイ環境を構築してみた話。
http://zuvuyalink.net/nrjlog/archives/2486

21. 21
急激なアクセス過多も安心！
スケールアウト
スケールアウトとは？

22. 急激なアクセス過多も安心！
スケールアウト
22
手動でスケールアウトする

23. 【DEMO】
WordPressサイトを構築しよう
23

24. こういうDEMOをやります！
 WordPressサイトを構築する準備
– Webアプリの作成
– バックアップ・スケールアウトの説明など
 AzureでWordPressサイト構築時に必要な
各種プラグインについて
 Kuduでアップロード
– Zipファイル形式の自動解凍
 ステージングを試してみる
24

25. 一般的なWordPressサイトの構成
25
データベースにMySQLを採用

26. WordPressの構成を工夫
26
WordPressと画像を別々に配信するように構成

27. ご静聴ありがとうございました！
今回の内容はブログに記事書いてます。
ご興味のある方はぜひ！
http://zuvuyalink.net/nrjlog/Blog