SlideShare a Scribd company logo
一度使うとレンタルサーバーに戻れない!?
便利機能を使ってみよう!
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
1 CloudServices(主にプログラマ向け)
ミッションクリティカル、常に動き続けていないと
いけないサービス、きわめて高負荷なサービスなど
2 VirtualMachine(主にインフラ向け)
以前からの移植やVPSを触ってきた人、
Linuxユーザー向け(仮想マシン)
3 WebApps(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

More Related Content

PPTX
Microsoft Azure WebAppsで ECサイトを構築してみた話 ~EC-CUBE3で試してみました~
PPTX
Web制作的に便利な機能満載!Microsoft Azureを使ってみよう
PPTX
インフラ知識ゼロの Webデザイナーが AzureWebSitesを使ってみた話
PPTX
Webデザイナー視点で使ってみた Microsoft Azureの話
PPTX
案件規模で使い分けよう!Microsoft Azure×WordPressの話
PPTX
Azure Appservice WebAppsでWordPressサイトを構築すると 運用が劇的にラクになる話
PPTX
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
PPTX
A/BテストをAzure×Googleアナリティクスで試してみました。
Microsoft Azure WebAppsで ECサイトを構築してみた話 ~EC-CUBE3で試してみました~
Web制作的に便利な機能満載!Microsoft Azureを使ってみよう
インフラ知識ゼロの Webデザイナーが AzureWebSitesを使ってみた話
Webデザイナー視点で使ってみた Microsoft Azureの話
案件規模で使い分けよう!Microsoft Azure×WordPressの話
Azure Appservice WebAppsでWordPressサイトを構築すると 運用が劇的にラクになる話
簡単・お手軽!ノンプログラミングで便利BOTを作ってみた話
A/BテストをAzure×Googleアナリティクスで試してみました。

What's hot (20)

PPTX
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
PPTX
Web制作に便利な機能いろいろ!Microsoft Azureの概要
PPTX
Web制作的SendGridのススメ SendGridで色々やってみた話
PPTX
Azure上でec cubeを運用するポイント
PPTX
現実的な「WordPress on Azure App Service」 クイックスタート
PPTX
XamarinでAzure AD認証 (リフレッシュトークン対応)
PPTX
Azure Web Apps 入門
PPTX
本番運用で使うVisual Studio
PPTX
Face APIで開発する時に使っている7つの道具
PPTX
Xamarin + Azure Mobile Appsの現実
PPTX
[社内勉強会]Webエンジニアへ送るインフラのおすすめ本:記事7本
PDF
Go (5) JAZUG 関西とゆかいな仲間たち的な
PDF
Innovation eggcloudnative
PDF
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
PPTX
開発チーム管理で役立ったVSCode拡張機能
PDF
軽量フレームワークNancy
PDF
2015年に向けたWordPress動向
PDF
どうなる?Visual Studioの クライアントサイド web開発の今後
PDF
軽量ASP.NETフレームワークNancy
PDF
フロントエンド初学者がSPAに手を出してみた
インフラ知識ゼロの「デザイナー」でもOK! Microsoft Azureの便利機能を Web制作的に活かしてみた話
Web制作に便利な機能いろいろ!Microsoft Azureの概要
Web制作的SendGridのススメ SendGridで色々やってみた話
Azure上でec cubeを運用するポイント
現実的な「WordPress on Azure App Service」 クイックスタート
XamarinでAzure AD認証 (リフレッシュトークン対応)
Azure Web Apps 入門
本番運用で使うVisual Studio
Face APIで開発する時に使っている7つの道具
Xamarin + Azure Mobile Appsの現実
[社内勉強会]Webエンジニアへ送るインフラのおすすめ本:記事7本
Go (5) JAZUG 関西とゆかいな仲間たち的な
Innovation eggcloudnative
LINE LIFF with Azure ハンズオン資料 - Azure サービス解説
開発チーム管理で役立ったVSCode拡張機能
軽量フレームワークNancy
2015年に向けたWordPress動向
どうなる?Visual Studioの クライアントサイド web開発の今後
軽量ASP.NETフレームワークNancy
フロントエンド初学者がSPAに手を出してみた
Ad

Viewers also liked (6)

PPTX
ノンコーディングでLINE BOTを作ってみた話
PDF
Inside Windows Azure Web Sites
PPTX
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
PPTX
Azure仮想マシンと仮想ネットワーク
PDF
LPデザインに関して〜作成のセオリーとコツ〜
PDF
AWS Blackbelt 2015シリーズ Amazon Storage Service (S3)
ノンコーディングでLINE BOTを作ってみた話
Inside Windows Azure Web Sites
Webデザイナーの私がMicrosoft Azureを使うようになったワケ
Azure仮想マシンと仮想ネットワーク
LPデザインに関して〜作成のセオリーとコツ〜
AWS Blackbelt 2015シリーズ Amazon Storage Service (S3)
Ad

Similar to 一度使うとレンタルサーバーに戻れない!?便利機能を使ってみよう!Web制作でのMicrosoft Azure 活用方法 (20)

PPTX
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
PDF
現場からみた Azure リファレンスアーキテクチャ答え合わせ
PPTX
アクセシビリティを考えたalt属性を自動生成してみよう!
PDF
Azure serverlesssummit2018
PPTX
もっとサーバーレスを手軽に便利に!Azure Logic Apps
PPTX
WebsitesプチDeepDive
PDF
Web開発者にお勧め .NET MAUI Blazor App
PDF
Windows Azureで Webサーバーを再発明してみる
PDF
【Web TECH FORUM 2017 in大阪】Webシステム開発とJavaScript UIコンポーネント
PDF
Blazor Server テンプレート解説
PDF
Azure Fundamental
PDF
クラウド案件の作り方 for azureしなの4周年
PPTX
.NET Core for Mac users in Azure
PDF
MVCフレームワークとの付き合い方
PPTX
JAZUG沖縄第二回 Azure App Service Web Apps
PPTX
裏クラウドデザインパターン
PDF
Microsoft Build 2022をさらに楽しむためのおすすめセッション/サンプル コード Powered by Microsoft MVPs
PDF
ウェブ制作のお仕事の役割と流れ ~初心者向けにわかりやすく解説~
PDF
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
PPTX
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps
お得に手軽に♪試してみよう!サーバーレスアーキテクチャ ~Azure Functions / Logic Apps~
現場からみた Azure リファレンスアーキテクチャ答え合わせ
アクセシビリティを考えたalt属性を自動生成してみよう!
Azure serverlesssummit2018
もっとサーバーレスを手軽に便利に!Azure Logic Apps
WebsitesプチDeepDive
Web開発者にお勧め .NET MAUI Blazor App
Windows Azureで Webサーバーを再発明してみる
【Web TECH FORUM 2017 in大阪】Webシステム開発とJavaScript UIコンポーネント
Blazor Server テンプレート解説
Azure Fundamental
クラウド案件の作り方 for azureしなの4周年
.NET Core for Mac users in Azure
MVCフレームワークとの付き合い方
JAZUG沖縄第二回 Azure App Service Web Apps
裏クラウドデザインパターン
Microsoft Build 2022をさらに楽しむためのおすすめセッション/サンプル コード Powered by Microsoft MVPs
ウェブ制作のお仕事の役割と流れ ~初心者向けにわかりやすく解説~
日本のCMSの今。特徴とプロジェクトから考える、次のCMS選び:本編
非エンジニアでも安心!ノンコーディングでもココまでできる!LINE × Azure Logic Apps

More from 典子 松本 (20)

PDF
ノーコードでAIサービスを使ってみよう!「AI Bulder」
PDF
自社でつくれる生産性向上ツール 必要だと思ったらすぐに作れるビジネスアプリ
PDF
ノーコーディングでAIサービスを使ってみた話
PDF
ノーコーディングでやってみよう!写真を色々加工して自動ツイートするLINE Botを作ってみた話。
PDF
「JPOHC」のロゴ制作の話
PDF
テキスト書き起こし&読み上げLINEボットを作ってみた
PPTX
タイムカード打刻チャットボット「ごえもん」誕生話 
PDF
Microsoft Flow 改め、Power Automateはじめました。
PDF
Designer's Design Talk「デザインの基礎」
PDF
ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...
PPTX
ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -
PDF
古代エジプトの魅力について
PPTX
はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話
PPTX
ノンコーディングでここまでできる!LINE BOT を作ってみよう!
PPTX
ノンコーディングでも!ここまでできるkintone
PPTX
【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張
PPTX
ノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめ
PPTX
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
PPTX
ノンコーディングでやってみよう!Logic Appsのすゝめ
PPTX
はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -
ノーコードでAIサービスを使ってみよう!「AI Bulder」
自社でつくれる生産性向上ツール 必要だと思ったらすぐに作れるビジネスアプリ
ノーコーディングでAIサービスを使ってみた話
ノーコーディングでやってみよう!写真を色々加工して自動ツイートするLINE Botを作ってみた話。
「JPOHC」のロゴ制作の話
テキスト書き起こし&読み上げLINEボットを作ってみた
タイムカード打刻チャットボット「ごえもん」誕生話 
Microsoft Flow 改め、Power Automateはじめました。
Designer's Design Talk「デザインの基礎」
ノンコーディングで LINE Bot 開発! Azure Logic Apps × Azure Cognitive Services ×LINE メッセー...
ノンコーディングでやってみよう!音声テキスト変換 - LINE × Logic Apps × Speech to text -
古代エジプトの魅力について
はじめよう!PowerAppsキホンのキ kintone × Microsoft Flow / Logic Appsの話
ノンコーディングでここまでできる!LINE BOT を作ってみよう!
ノンコーディングでも!ここまでできるkintone
【Logic Apps編】ノンコーディングでデキる!お問い合わせフォーム機能拡張
ノンコーディングでサーバーレス体験。Azure Logic Apps のすゝめ
LogicFlow 実践編~LogicFlowでいろいろつくってみた ~
ノンコーディングでやってみよう!Logic Appsのすゝめ
はじめてのAzure Azure的ピタゴラスイッチのススメ- PaaS・サーバーレス 初級編 -

一度使うとレンタルサーバーに戻れない!?便利機能を使ってみよう!Web制作でのMicrosoft Azure 活用方法

Editor's Notes

  • #15: Microsoft Azure Storage Explorer http://storageexplorer.com/