Webデザイナーひとりで使うMicrosoft Azure
インフラ知識ゼロの
Webデザイナーが
Azure WebSitesを使ってみた話
Noriko Matsumoto
松本 典子
自己紹介
2
松本 典子
http://zuvuyalink.net/nrjlog/Blog
現在までWeb制作会社や通販会社のWeb制作部門に所属し、
ランディングページ制作を主として、アクセス解析・
Webマーケティングなどプログラミング以外のWebに関する
全般業務に携わる。
Microsoft Azureでクラウドデビューし、主にAzure WebSites
を使い、自身のサイト運営やお客様への提供を視野に学んで
います。
Webデザイナー/ディレクター
本日お話すること
3
 実際に使う前の「クラウド」のイメージ
 Webデザイナーにインフラ知識は必要?
 なぜMicrosoft Azureだったのか
 Microsoft Azureについて
 Azure WebSitesってこんな感じ
 実際にWordPressのブログを移設してみた
 WebSitesのバックアップ機能が便利
 ちょっとした注意点
 Azure WebSitesの魅力、総まとめ
実際に使う前の「クラウド」のイメージ
 インフラエンジニアが使うイメージ
– まず用語がわからなかった
• サブスクリプション?
• リージョン?
 専門知識が無いと使えない?
– セキュリティ対策無理そう・・・
 とりあえずWeb制作には関係なさそう
4
でもよく聞くので「何なのか」気にはなる・・・
Webデザイナーにインフラの知識は必要?
 ゼロから学ぶには学習コストが高すぎる
– 畑違いの新しい知識をゼロから覚える?
• サーバー構築の知識?
• ネットワーク知識?
• プログラミング言語?
 最近はWebデザイナーでも覚えることが多い
– デザイン知識だけじゃなくコーディング方法とか
CMSとかマーケティングとか・・・
5
専門知識無くても使えるAzure WebSites便利!
なぜMicrosoft Azureだったのか
 JAZUG福岡支部「ふくあず」の
ロゴ作成のご縁
 「インフラ知識ゼロでも扱いやすい」と
紹介された
6
Microsoft Azureについて
 Microsoft Azureについてざっくり説明
7
1 CloudServices(主にプログラマ向け)
ミッションクリティカル、常に動き続けていないと
いけないサービス、きわめて高負荷なサービスなど
2 VirtualMachine(主にインフラ向け)
以前からの移植やVPSを触ってきた人、
Linuxユーザー向け(仮想マシン)
3 WebSites(Webデザイナー向け)
軽量なWebシステムやWebデザイナー、
フロントプログラマ向け
Microsoft Azureについて
 Microsoft Azureについてざっくり説明
8
1 CloudServices(主にプログラマ向け)
ミッションクリティカル、常に動き続けていないと
いけないサービス、きわめて高負荷なサービスなど
2 VirtualMachine(主にインフラ向け)
以前からの移植やVPSを触ってきた人、
Linuxユーザー向け(仮想マシン)
3 WebSites(Webデザイナー向け)
軽量なWebシステムやWebデザイナー、
フロントプログラマ向け
Azure WebSitesってこんな感じ
 「標準モード」がすごい
 50GBまで「独自ドメインサイト」が入れ放題
– 約8000円で
– WordPressだったら1000サイト入る計算
 5ドメインまでSSLもOK
– 6サイト目から918円/月
 構築環境をそれぞれに変えられる
– PHPのバージョンやSSL、CMSなど
9
自分専用で環境を細かく設定できる
レンタルサーバーを持てるイメージ
実際にWordPressのブログを
移設してみた
 やったこと
10
1 ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
2 メール送信の設定
外部SMTPの設定も
3 独自ドメインの設定
ロリポップからAZURE WEBSITESに
WORDPRESSのブログをお引っ越し
11
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
12
1 ブログの記事をエクスポート
2 FTPソフトで
「画像」と「テンプレート」をダウンロード
3 WordPressと2でDLした画像を
Azureにアップロード
4 Azure側のWordPressに記事をインポート
5 WordPressの設定
6 「ベースURL変更」も忘れずに!
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
13
1. ブログの記事をエクスポート
WordPress管理画面
ツール > エクスポート > すべてのコンテンツ
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
14
2. FTPソフトで
「画像」と「テンプレート」をダウンロード
 アップロード画像
– /wp-content/uploads/
 テンプレート
– /wp-content/themes/テーマ名/
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
15
3. WordPressと2でDLした画像を
Azureにアップロード。
移行前のブログの同じ場所にアップロード。
FTP以外に、以下の方法でもアップロード可能。
 ローカルGitリポジトリ
 Dropbox
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
16
4. Azure側のWordPressに記事をインポート
ツール > インポート > 出力したXML形式のファイル
を選んでAzure側のWordPressブログにインポート。
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
17
5. WordPressの設定
「パーマリンク設定」と「メディア」の設定は、
必ず移転元と同じ設定にする必要あり。
設定が違うと、記事内でリンク切れが発生する
場合があるので注意!
WordPressの設定は手動となりますが
忘れないように!
6. 「ベースURL変更」も忘れずに!
管理画面 > 一般設定 > WordPressアドレス(URL)
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
18
今回の移行で使用したプラグイン
 Windows Azure Storage for WordPress
– メディアコンテンツ(画像 / 動画)を
AzureBLOBストレージに配置する
 SQLite Integration
– MySQLの代替用
 WP-Mail-SMTP
– Azureでメール送信できるようにする
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
19
「Windows Azure Storage for WordPress」とは
登録していく画像がAzureBLOBストレージに
入っていく形になる。(容量無制限)
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
20
「SQLite Integration」とは
WordPressを利用する場合必要になる、
データベースとして使用(MySQLの代用)
 小~中規模サイトの運営に便利
 本気でMySQLを使うと有料になりコスト高
 SQLiteはファイルなのでサーバ不要
 復旧時はFTPでファイルアップロードでOK
専門知識の無いWebデザイナーに優しい!
お引っ越し作業のまとめ
 今回使用したプラグインの話
– SQLite Integration
– Windows Azure Storage for WordPress
– WP-Mail-SMTP
 画像はBLOBストレージから配信
– 容量無制限で画像入れ放題
 DBはMySQLではなくSQLiteを採用
– 今回はDBバックアップ用のプラグインは
入れていません。
21
メール送信の設定
22
メール送信の設定
 Azureは外部SMTPサーバが必要
– 知らないと地味にハマる…
– 初めはお問い合わせフォームプラグインの
問題かと
 SendGridを外部SMTPサーバで使用
23
今回はアプリではなく、
実際にSendGridと契約しました。
メール送信の設定
24
「WP-Mail-SMTP」とは
Azureは外部SMTPなどメールを送るサービスが
提供されていないので必要。
 クラウドメールサービス「SendGrid」を利用
メール送信の設定
25
「WP-Mail-SMTP」の設定
外部SMTPサーバの準備ができたら、
WP-Mail-SMTPの設定をします。
独自ドメインの設定
26
独自ドメインの設定
27
1 Azure Websitesのホスティングプランを
変更
2 ドメイン取得サービス側の設定
3 Azure Websites側の設定
4 Azure側の承認が終わったら
旧サーバの設定を変更する
5 旧サーバに301設定
独自ドメインの設定
28
1. Azure Websitesのホスティングプランを変更
「共有」「基本」「標準」のいずれかに
変更する必要があります。
独自ドメインの設定
29
2.ドメイン取得サービス側の設定
「ムームードメイン」の場合。
ドメイン操作 > ドメイン一覧で今回変更する
ドメインを選び、以下の内容を入力。
(ムームードメインのTTLは3600秒の模様)
独自ドメインの設定
30
3. Azure Websites側の設定
レコードの設定が反映されてないとAzure側で
設定できないため、少し時間を置いて設定。
独自ドメインの設定
31
4. Azure側の承認が終わったら旧サーバの設定を
変更する
以上で独自ドメインの設定は完了!
5. 旧サーバに301設定
「301 : 永久に移動」の転送設定を入れます。
独自ドメインの設定
 独自ドメインの設定は有料版の機能
– 無料版は「○○○.azurewebsites.net」のURL
 WebSitesにもBLOBストレージにも
独自ドメイン設定できる
– 今回はWebSitesに独自ドメインを設定
32
Azure WebSitesに
移行してよかったこと
33
WebSitesのバックアップ機能が便利
 完全バックアップを1日1回やってくれる
– 設定しておけば毎日
 バックアップデータはストレージに
保存されていくので容量を圧迫しない
– 極論365日前の状態に戻すこともできる
 SQLiteならDBのバックアップ対策を
わざわざしなくていい
– DBバックアップ用のプラグイン不要
– 復旧時はFTPでファイルをあげるだけ
34
ちょっとした注意点
 BLOBストレージは無料ではなく課金
– 1GB 2.45円くらい
 BLOBストレージに画像を入れるときは
FTPソフトは使えない
 外部SMTPの設定が個別で必要
 独自ドメインは有償機能
35
Azure WebSitesの魅力、総まとめ
 無料枠でも10サイトまで作れる
 1分程度でWeb構築環境が作れる
 FTP操作で通常のレンタルサーバーのように
使える
 PaaSなのでMicrosoftが面倒なところは
やってくれる
 完全バックアップを自動でとってくれる
 基本的な部分はインフラ的な専門知識無しで
すぐできる!復旧も楽!
36
ご静聴ありがとうございました
37

インフラ知識ゼロのWebデザイナーがAzureWebSitesを使ってみた話

Editor's Notes

  • #10 WEBホスティングプラン 無料/共有/基本/標準
  • #15 このあとに、Azureの側にWordPressとSQLiteをアップロードして準備
  • #20 Azure BLOBの方から画像配信するので、50GBしかないが容量削減に
  • #33 独自ドメインは有料版の機能。 無料版はお客さんのプレビュー用などで使用する。
  • #36 Windowsだったら「Azure Storage Explorer」、Macだったら「サイバーダック」