3月7日（土）に福岡ソフトリサーチパークで開催された「FUKUOKA MEETUP COMMUNITY」内のクラウドセッション「呉越同舟」のスライドです。

1. Webデザイナーひとりで使うMicrosoft Azure
インフラ知識ゼロの
Webデザイナーが
Azure WebSitesを使ってみた話
Noriko Matsumoto
松本 典子

2. 自己紹介
2
松本 典子
http://zuvuyalink.net/nrjlog/Blog
現在までWeb制作会社や通販会社のWeb制作部門に所属し、
ランディングページ制作を主として、アクセス解析・
Webマーケティングなどプログラミング以外のWebに関する
全般業務に携わる。
Microsoft Azureでクラウドデビューし、主にAzure WebSites
を使い、自身のサイト運営やお客様への提供を視野に学んで
います。
Webデザイナー/ディレクター

3. 本日お話すること
3
 実際に使う前の「クラウド」のイメージ
 Webデザイナーにインフラ知識は必要？
 なぜMicrosoft Azureだったのか
 Microsoft Azureについて
 Azure WebSitesってこんな感じ
 実際にWordPressのブログを移設してみた
 WebSitesのバックアップ機能が便利
 ちょっとした注意点
 Azure WebSitesの魅力、総まとめ

4. 実際に使う前の「クラウド」のイメージ
 インフラエンジニアが使うイメージ
– まず用語がわからなかった
• サブスクリプション？
• リージョン？
 専門知識が無いと使えない？
– セキュリティ対策無理そう･･･
 とりあえずWeb制作には関係なさそう
4
でもよく聞くので「何なのか」気にはなる･･･

5. Webデザイナーにインフラの知識は必要？
 ゼロから学ぶには学習コストが高すぎる
– 畑違いの新しい知識をゼロから覚える？
• サーバー構築の知識？
• ネットワーク知識？
• プログラミング言語？
 最近はWebデザイナーでも覚えることが多い
– デザイン知識だけじゃなくコーディング方法とか
CMSとかマーケティングとか･･･
5
専門知識無くても使えるAzure WebSites便利！

6. なぜMicrosoft Azureだったのか
 JAZUG福岡支部「ふくあず」の
ロゴ作成のご縁
 「インフラ知識ゼロでも扱いやすい」と
紹介された
6

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

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

9. Azure WebSitesってこんな感じ
 「標準モード」がすごい
 50GBまで「独自ドメインサイト」が入れ放題
– 約8000円で
– WordPressだったら1000サイト入る計算
 5ドメインまでSSLもOK
– 6サイト目から918円／月
 構築環境をそれぞれに変えられる
– PHPのバージョンやSSL、CMSなど
9
自分専用で環境を細かく設定できる
レンタルサーバーを持てるイメージ

10. 実際にWordPressのブログを
移設してみた
 やったこと
10
1 ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
2 メール送信の設定
外部SMTPの設定も
3 独自ドメインの設定

11. ロリポップからAZURE WEBSITESに
WORDPRESSのブログをお引っ越し
11

12. ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
12
1 ブログの記事をエクスポート
2 FTPソフトで
「画像」と「テンプレート」をダウンロード
3 WordPressと２でDLした画像を
Azureにアップロード
4 Azure側のWordPressに記事をインポート
5 WordPressの設定
6 「ベースURL変更」も忘れずに！

13. ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
13
1. ブログの記事をエクスポート
WordPress管理画面
ツール > エクスポート > すべてのコンテンツ

14. ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
14
2. FTPソフトで
「画像」と「テンプレート」をダウンロード
 アップロード画像
– /wp-content/uploads/
 テンプレート
– /wp-content/themes/テーマ名/

15. ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
15
3. WordPressと２でDLした画像を
Azureにアップロード。
移行前のブログの同じ場所にアップロード。
FTP以外に、以下の方法でもアップロード可能。
 ローカルGitリポジトリ
 Dropbox

16. ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
16
4. Azure側のWordPressに記事をインポート
ツール > インポート > 出力したXML形式のファイル
を選んでAzure側のWordPressブログにインポート。

17. ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
17
5. WordPressの設定
「パーマリンク設定」と「メディア」の設定は、
必ず移転元と同じ設定にする必要あり。
設定が違うと、記事内でリンク切れが発生する
場合があるので注意！
WordPressの設定は手動となりますが
忘れないように！
6. 「ベースURL変更」も忘れずに！
管理画面 > 一般設定 > WordPressアドレス(URL)

18. ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
18
今回の移行で使用したプラグイン
 Windows Azure Storage for WordPress
– メディアコンテンツ(画像 / 動画)を
AzureBLOBストレージに配置する
 SQLite Integration
– MySQLの代替用
 WP-Mail-SMTP
– Azureでメール送信できるようにする

19. ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
19
「Windows Azure Storage for WordPress」とは
登録していく画像がAzureBLOBストレージに
入っていく形になる。（容量無制限）

20. ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
20
「SQLite Integration」とは
WordPressを利用する場合必要になる、
データベースとして使用（MySQLの代用）
 小～中規模サイトの運営に便利
 本気でMySQLを使うと有料になりコスト高
 SQLiteはファイルなのでサーバ不要
 復旧時はFTPでファイルアップロードでOK
専門知識の無いWebデザイナーに優しい！

21. お引っ越し作業のまとめ
 今回使用したプラグインの話
– SQLite Integration
– Windows Azure Storage for WordPress
– WP-Mail-SMTP
 画像はBLOBストレージから配信
– 容量無制限で画像入れ放題
 DBはMySQLではなくSQLiteを採用
– 今回はDBバックアップ用のプラグインは
入れていません。
21

22. メール送信の設定
22

23. メール送信の設定
 Azureは外部SMTPサーバが必要
– 知らないと地味にハマる…
– 初めはお問い合わせフォームプラグインの
問題かと
 SendGridを外部SMTPサーバで使用
23
今回はアプリではなく、
実際にSendGridと契約しました。

24. メール送信の設定
24
「WP-Mail-SMTP」とは
Azureは外部SMTPなどメールを送るサービスが
提供されていないので必要。
 クラウドメールサービス「SendGrid」を利用

25. メール送信の設定
25
「WP-Mail-SMTP」の設定
外部SMTPサーバの準備ができたら、
WP-Mail-SMTPの設定をします。

26. 独自ドメインの設定
26

27. 独自ドメインの設定
27
1 Azure Websitesのホスティングプランを
変更
2 ドメイン取得サービス側の設定
3 Azure Websites側の設定
4 Azure側の承認が終わったら
旧サーバの設定を変更する
5 旧サーバに301設定

28. 独自ドメインの設定
28
1. Azure Websitesのホスティングプランを変更
「共有」「基本」「標準」のいずれかに
変更する必要があります。

29. 独自ドメインの設定
29
2.ドメイン取得サービス側の設定
「ムームードメイン」の場合。
ドメイン操作 > ドメイン一覧で今回変更する
ドメインを選び、以下の内容を入力。
（ムームードメインのTTLは3600秒の模様）

30. 独自ドメインの設定
30
3. Azure Websites側の設定
レコードの設定が反映されてないとAzure側で
設定できないため、少し時間を置いて設定。

31. 独自ドメインの設定
31
4. Azure側の承認が終わったら旧サーバの設定を
変更する
以上で独自ドメインの設定は完了！
5. 旧サーバに301設定
「301 : 永久に移動」の転送設定を入れます。

32. 独自ドメインの設定
 独自ドメインの設定は有料版の機能
– 無料版は「○○○.azurewebsites.net」のURL
 WebSitesにもBLOBストレージにも
独自ドメイン設定できる
– 今回はWebSitesに独自ドメインを設定
32

33. Azure WebSitesに
移行してよかったこと
33

34. WebSitesのバックアップ機能が便利
 完全バックアップを1日1回やってくれる
– 設定しておけば毎日
 バックアップデータはストレージに
保存されていくので容量を圧迫しない
– 極論365日前の状態に戻すこともできる
 SQLiteならDBのバックアップ対策を
わざわざしなくていい
– DBバックアップ用のプラグイン不要
– 復旧時はFTPでファイルをあげるだけ
34

35. ちょっとした注意点
 BLOBストレージは無料ではなく課金
– １GB 2.45円くらい
 BLOBストレージに画像を入れるときは
FTPソフトは使えない
 外部SMTPの設定が個別で必要
 独自ドメインは有償機能
35

36. Azure WebSitesの魅力、総まとめ
 無料枠でも10サイトまで作れる
 1分程度でWeb構築環境が作れる
 FTP操作で通常のレンタルサーバーのように
使える
 PaaSなのでMicrosoftが面倒なところは
やってくれる
 完全バックアップを自動でとってくれる
 基本的な部分はインフラ的な専門知識無しで
すぐできる！復旧も楽！
36

37. ご静聴ありがとうございました
37