Web デザイナー視点で使ってみたMicrosoft Azure の話

松本 典子Noriko Matsumoto

フリーランス Web デザイナー / ディレクター

2015 / 11 / 21 　プログラミング生放送勉強会 第 37 回＠福岡

福岡県北九州市在住フリーランス

Web デザイナー / ディレクターインフラ知識ゼロ…昨年 12 月に Azure デビュー

2

自己紹介

松本 典子（まつもと のりこ）

Web に関する業務全般やってます。（提案～ Web ページ制作～運用・マーケティング etc… ）

3

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

本日お話しする内容

Microsoft Azure についてWeb デザイナー視点で便利と思った機能– Web 構築環境が一瞬でできる Web アプリ

– Web サイトのバックアップ・復元

– 急激なアクセス増も安心！スケールアウト

– 一瞬でテスト環境と本番環境入れ替える方法

– YouTube のような制御できる動画を配信できる

もっと便利に！Web 的に工夫して使ってみた

4

Microsoft Azure について

5

Microsoft Azure について

Microsoft Azure についてざっくり説明

66

1CloudServices( 主にプログラマ向け )ミッションクリティカル、常に動き続けていないといけないサービス、きわめて高負荷なサービスなど

2VirtualMachine( 主にインフラ向け ) 以前からの移植や VPS を触ってきた人、Linux ユーザー向け（仮想マシン）

3 WebApps(Web デザイナー向け )軽量な Web システムや Web デザイナー、フロントプログラマ向け

Microsoft Azure について

Microsoft Azure についてざっくり説明

77

1CloudServices( 主にプログラマ向け )ミッションクリティカル、常に動き続けていないといけないサービス、きわめて高負荷なサービスなど

2VirtualMachine( 主にインフラ向け ) 以前からの移植や VPS を触ってきた人、Linux ユーザー向け（仮想マシン）

3 WebApps(Web デザイナー向け )軽量な Web システムや Web デザイナー、フロントプログラマ向け

Azure WebApps について

8

Azure WebApps について

9

Azure WebApps ってこんな感じ

10

「 STANDARD 」がおすすめ 50GB まで「独自ドメインサイト」が入れ放題

– 約 8000 円で– WordPress だったら 1000 サイト入る計算

5 ドメインまで SSL も OK– 6 サイト目から 918 円／月

構築環境をそれぞれに変えられる– PHP のバージョンや SSL 、 CMS など

自分専用で環境を細かく設定できるレンタルサーバーを持てるイメージ

Azure WebApps のいいところ Azure を従来のレンタルサーバーの

ような形で使うことができる 管理ポータル画面で、よく使う必要な機能は

操作できる– コマンド知らなくて大丈夫

– スケールアウト・フェイルオーバーも自力で設計せずに使える

11

Web デザイナー視点で便利と思った Azure の機能

12

Web 構築環境が一瞬でできる Web アプリ

13

管理画面から「新規作成」を選ぶだけ

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

14

完全バックアップを 1 日 1 回やってくれる–設定しておけば毎日

バックアップデータはストレージに保存されていくので容量を圧迫しない–極論 365 日前の状態に戻すこともできる

WordPress も SQLite を採用すればDB のバックアップ対策しなくて OK– DB バックアップ用のプラグイン不要–復旧時は FTP でファイルをあげるだけ

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

15

テスト環境と本番環境を一瞬で入れ替え

16

「ステージング」でテスト環境と本番環境をワンクリックで入れ替えできる！！

テスト環境と本番環境を一瞬で入れ替え

17

ステージング環境の URL は「サイト名 -staging.azurewebsites.net 」

「新しい展開スロットの追加」で作成

ワンクリックでテストと本番を入れ替え

急激なアクセス増も安心！スケールアウト

スケールアウトとは？

18

急激なアクセス増も安心！スケールアウト

手動でスケールアウトする

19

急激なアクセス増も安心！スケールアウト

時間でスケジュールしスケールアウトする

20

YouTube のような制御できる動画を配信できる

Azure Media Services で YouTubeのような制御できる動画が配信できる

動画配信サーバを用意する必要がない動画を配信できる状態にエンコードする

必要もなしライブストリーミング配信や

コンテンツ保護もできる

21

もっと便利に！Web 的に工夫して使ってみたAzure WebApps の各機能を工夫して使ってみました。

22

ファイル転送サービス的に使ってみる

宅ふぁいる便や firestorage の変わりBLOB ストレージは容量無制限で

画像入れ放題ダウンロードに期限がない納品データのバックアップの意味もFTP クライアントではなく

専用クライアントが必要–「 Azure Storage Explorer 」が便利

23

BLOB ストレージを利用。

制作データを丸ごとバックアップ

Mac でいうと Time Machine のクラウド版なイメージ

geo 冗長ストレージ (GRS) ではデータのコピーが 6 つ保持される

一度スケジュールを設定すると自動でバックアップし続けてくれる– デザインデータなどのバックアップに便利

1 回の操作でバックアップ可能な対象ファイルサイズは最大 53TB

24

Azure Backup を利用。

iPhone で Web ページを修正する

WebApps は FTP 以外にも Dropbox でのデプロイが可能– 事前に Dropbox でデプロイできるように設定

– iPhone には無料の FTP クライアントがない問題をこれで回避する

HTML や CSS の修正ができるエディタとして「 iEditor 」を使用 2

5

✕複数のデプロイ方法を利用。

26

iPhone側の作業

Azure側の作業

A/B テストを実施する

27

A/B テストとは？異なる 2パターンの Web ページやバナーを用意し、実際にユーザーに利用させて効果を比較するテスト。

A/B テストを実施する

28

新規 Web サイトを作成展開スロットを準備「オリジナル」と「スロット」

それぞれにテストしたいデザインをアップロード

ステージング機能とトラフィックルーティングを利用。

A/B テストを実施する

29

トラフィックルーティングを設定する

A/B テストを実施する

30

WebApps の魅力、総まとめ

31

1 分程度で Web 構築環境が作れる FTP 操作で通常のレンタルサーバーのように

使える– Visual Studio Online 、 GitHub 、 Git 、 Dropbox等、その他のデプロイ方法も複数選択可能

Web 制作の根本的なワークフロー効率化に役立つ

インフラ的な専門知識・技術が無くても、スケールアウトなどアクセス負荷にも耐える「サイトを落とさない」仕組みをデザイナーが構築できる

最後に

32

Web デザイナー視点で実際に使ってみたAzure の色々な機能についてブログ書いてます。

http://zuvuyalink.net/nrjlog/Blog

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