一度使うとレンタルサーバーに戻れない！？

便利機能を使ってみよう！Web 制作での Microsoft Azure

活用方法

松本 典子Noriko Matsumoto

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

2016/02/20 　 Fukuoka ComCamp2016 powered by MVPs

2

福岡県北九州市在住インフラ知識ゼロ…フリーランス

Web デザイナー / ディレクターMicrosoft MVP for Microsoft

Azure

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

Web に関する業務全般やってますが、メイン業務は「デザイン」です。

自己紹介

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

3

本日お話しすること

4

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

これは便利！オススメ便利機能–Web 制作的視点で「コレは使える！」と思う

便利機能のご紹介【 DEMO 】 WordPress サイトを構築

しよう– Azure WebApps の便利機能を活かす構成

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

5

実際に使う前の Azure のイメージ

6

インフラエンジニアやプログラマが知識と技術を駆使して使うイメージ–まず用語に馴染みがない• サブスクリプション？

• リージョン？

専門知識が無いと使えない？–使えるように設定するの無理そう･･･

とりあえず Web 制作には関係なさそう

使ってみたら実はそんなに難しくない！

やりたいことは、ほぼポータル画面から設定・変更できる

レンタルサーバーと同じようにも使える– レンサバよりラクで便利な場合が多い

専用のツールが必要なものもWebApps の機能を工夫すれば代替可能– 例： A / B テストなど

しくじったらとりあえず消せばいい

7

Azure WebApps はデザイナーや Web 制作者に優しい！

ポータル画面でやりたいことはできる

8

管理ポータル画面で、よく使う必要な機能は操作できる–コマンド知らなくて大丈夫–スケールアウトやフェイルオーバーなどの

独自設計が基本不要

Azure 新旧ポータル対応表https://azure.microsoft.com/ja-jp/features/azure-portal/compatibility/

9

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

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

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

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

10

Azure WebApps のメリット

クラウド上に作られたレンタルサーバーのようなもの

数分で作れる Web 制作・配信・構築環境構築環境をそれぞれに変えられる– PHP のバージョンや SSL 、 CMS など

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

インフラなどの知識の無い人でもクラウドサービスの利点を活かせ

る！

これは便利！オススメ便利機能Web 制作的視点で「コレは使える！」と思う便利機能のご紹介

11

すべてポータル画面から設定・変更できる♪

12

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

ポータル画面で「 Web ＋モバイル」を選び、「アプリの名前」を入力するだけ

容量無制限の Azure BLOB ストレージ

画像や動画など容量が大きなファイルを置くのに適している

Web サーバー代わりにも使えるカスタムドメインの設定も可能WordPress の場合はプラグインがある–Windows Azure Storage for WordPress

13

Azure BLOB ストレージは容量無制限課金制（ 1GB 2.45 円くらい）

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

14

CDN もポータル画面から設定可能

15

表示速度が早くなるアクセス（トラフィック）が集中しても

サイトが落ちる心配がない動画など容量の大きなデータ配信ができ

る（サーバに負担がかからない）

CDN （ Contents Delivery Network ）ファイルサイズの大きいデジタルコンテンツをネットワーク経由で配信するために最適化されたネットワークのこと。

動画配信もすぐに対応できる

16

ライブストリーム配信やオンデマンドで配信ができる

インデックス作成ができる自動的にキャプションを追加DRM （著作権保護機能）の追加も可能SSL接続経由でコンテンツのストリーミング

も可能

Azure Media Services動画配信サーバを用意したり、動画のエンコードを自力でやったりという手順は一切なく、Azure 管理ポータルから簡単に準備して配信できる。

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

17

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

18

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

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

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

デプロイ（アップロード）方法が選べる

19

FTP 、 Git 、 Dropbox 、 OneDrive…

デプロイ（アップロード）方法が選べる

20

Microsoft Azure WebApps と Bitbucket を使って Git デプロイ環境を構築してみた話。http://zuvuyalink.net/nrjlog/archives/2486

21

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

スケールアウトとは？

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

22

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

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

23

こういう DEMO をやります！

WordPress サイトを構築する準備–Web アプリの作成–バックアップ・スケールアウトの説明など

Azure で WordPress サイト構築時に必要な各種プラグインについて

Kudu でアップロード– Zip ファイル形式の自動解凍

ステージングを試してみる24

一般的な WordPress サイトの構成

25

データベースに MySQL を採用

WordPress の構成を工夫

26

WordPress と画像を別々に配信するように構成

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

今回の内容はブログに記事書いてます。ご興味のある方はぜひ！

http://zuvuyalink.net/nrjlog/Blog