Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Webデザイナーひとりで使うMicrosoft Azure
インフラ知識ゼロの
Webデザイナーが
Azure WebSitesを使ってみた話
Noriko Matsumoto
松本 典子
自己紹介
2
松本 典子
http://zuvuyalink.net/nrjlog/Blog
現在までWeb制作会社や通販会社のWeb制作部門に所属し、
ランディングページ制作を主として、アクセス解析・
Webマーケティングなどプログラミング以...
本日お話すること
3
 実際に使う前の「クラウド」のイメージ
 Webデザイナーにインフラ知識は必要?
 なぜMicrosoft Azureだったのか
 Microsoft Azureについて
 Azure WebSitesってこんな...
実際に使う前の「クラウド」のイメージ
 インフラエンジニアが使うイメージ
– まず用語がわからなかった
• サブスクリプション?
• リージョン?
 専門知識が無いと使えない?
– セキュリティ対策無理そう・・・
 とりあえずWeb制作に...
Webデザイナーにインフラの知識は必要?
 ゼロから学ぶには学習コストが高すぎる
– 畑違いの新しい知識をゼロから覚える?
• サーバー構築の知識?
• ネットワーク知識?
• プログラミング言語?
 最近はWebデザイナーでも覚えることが...
なぜMicrosoft Azureだったのか
 JAZUG福岡支部「ふくあず」の
ロゴ作成のご縁
 「インフラ知識ゼロでも扱いやすい」と
紹介された
6
Microsoft Azureについて
 Microsoft Azureについてざっくり説明
7
1 CloudServices(主にプログラマ向け)
ミッションクリティカル、常に動き続けていないと
いけないサービス、きわめて高負荷なサービス...
Microsoft Azureについて
 Microsoft Azureについてざっくり説明
8
1 CloudServices(主にプログラマ向け)
ミッションクリティカル、常に動き続けていないと
いけないサービス、きわめて高負荷なサービス...
Azure WebSitesってこんな感じ
 「標準モード」がすごい
 50GBまで「独自ドメインサイト」が入れ放題
– 約8000円で
– WordPressだったら1000サイト入る計算
 5ドメインまでSSLもOK
– 6サイト目か...
実際に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にア...
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
13
1. ブログの記事をエクスポート
WordPress管理画面
ツール > エクスポート > すべてのコンテンツ
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
14
2. FTPソフトで
「画像」と「テンプレート」をダウンロード
 アップロード画像
– /wp-content/uploads/
 テンプレート
–...
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
15
3. WordPressと2でDLした画像を
Azureにアップロード。
移行前のブログの同じ場所にアップロード。
FTP以外に、以下の方法でもアップロ...
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
16
4. Azure側のWordPressに記事をインポート
ツール > インポート > 出力したXML形式のファイル
を選んでAzure側のWordPre...
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
17
5. WordPressの設定
「パーマリンク設定」と「メディア」の設定は、
必ず移転元と同じ設定にする必要あり。
設定が違うと、記事内でリンク切れが発...
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
18
今回の移行で使用したプラグイン
 Windows Azure Storage for WordPress
– メディアコンテンツ(画像 / 動画)を
...
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
19
「Windows Azure Storage for WordPress」とは
登録していく画像がAzureBLOBストレージに
入っていく形になる。(...
ロリポップからAzure WebSitesに
WordPressのブログをお引っ越し
20
「SQLite Integration」とは
WordPressを利用する場合必要になる、
データベースとして使用(MySQLの代用)
 小~中規模サ...
お引っ越し作業のまとめ
 今回使用したプラグインの話
– SQLite Integration
– Windows Azure Storage for WordPress
– WP-Mail-SMTP
 画像はBLOBストレージから配信
–...
メール送信の設定
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 旧サーバに30...
独自ドメインの設定
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に独自ドメインを設定...
Azure WebSitesに
移行してよかったこと
33
WebSitesのバックアップ機能が便利
 完全バックアップを1日1回やってくれる
– 設定しておけば毎日
 バックアップデータはストレージに
保存されていくので容量を圧迫しない
– 極論365日前の状態に戻すこともできる
 SQLite...
ちょっとした注意点
 BLOBストレージは無料ではなく課金
– 1GB 2.45円くらい
 BLOBストレージに画像を入れるときは
FTPソフトは使えない
 外部SMTPの設定が個別で必要
 独自ドメインは有償機能
35
Azure WebSitesの魅力、総まとめ
 無料枠でも10サイトまで作れる
 1分程度でWeb構築環境が作れる
 FTP操作で通常のレンタルサーバーのように
使える
 PaaSなのでMicrosoftが面倒なところは
やってくれる
...
ご静聴ありがとうございました
37
Upcoming SlideShare
Loading in …5
×

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

5,324 views

Published on

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

Published in: Technology
  • Dating direct: ❶❶❶ http://bit.ly/39pMlLF ❶❶❶
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Dating for everyone is here: ❤❤❤ http://bit.ly/39pMlLF ❤❤❤
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

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

×