Download to read offline
Uploaded by典子 松本
Webデザイナー視点で使ってみた Microsoft Azureの話
2015/11/21に行われた「プログラミング生放送勉強会 第37回＠福岡」で発表したスライドです。
More Related Content
![[社内勉強会]Webエンジニアへ送るインフラのおすすめ本:記事7本](https://cdn.slidesharecdn.com/ss_thumbnails/web7-160309090005-thumbnail.jpg?width=640&height=640&fit=bounds)
Similar to Webデザイナー視点で使ってみた Microsoft Azureの話
Webデザイナー視点で使ってみた Microsoft Azureの話
- 1. Webデザイナー視点で使ってみた Microsoft Azureの話 松本 典子 NorikoMatsumoto フリーランス Webデザイナー / ディレクター 2015 / 11 / 21 プログラミング生放送勉強会 第37回＠福岡
- 2. 福岡県北九州市在住 フリーランス Webデザイナー/ ディレクター インフラ知識ゼロ… 昨年12月にAzureデビュー 2 自己紹介 松本 典子（まつもと のりこ） Webに関する業務全般やってます。 （提案～Webページ制作～運用・マーケティングetc…）
- 3.
- 4. 本日お話しする内容 Microsoft Azureについて Webデザイナー視点で便利と思った機能 – Web構築環境が一瞬でできるWebアプリ – Webサイトのバックアップ・復元 – 急激なアクセス増も安心！スケールアウト – 一瞬でテスト環境と本番環境入れ替える方法 – YouTubeのような制御できる動画を配信できる もっと便利に！ Web的に工夫して使ってみた 4
- 5.
- 6. Microsoft Azureについて MicrosoftAzureについてざっくり説明 66 1 CloudServices(主にプログラマ向け) ミッションクリティカル、常に動き続けていないと いけないサービス、きわめて高負荷なサービスなど 2 VirtualMachine(主にインフラ向け) 以前からの移植やVPSを触ってきた人、 Linuxユーザー向け（仮想マシン） 3 WebApps(Webデザイナー向け) 軽量なWebシステムやWebデザイナー、 フロントプログラマ向け
- 7. Microsoft Azureについて MicrosoftAzureについてざっくり説明 77 1 CloudServices(主にプログラマ向け) ミッションクリティカル、常に動き続けていないと いけないサービス、きわめて高負荷なサービスなど 2 VirtualMachine(主にインフラ向け) 以前からの移植やVPSを触ってきた人、 Linuxユーザー向け（仮想マシン） 3 WebApps(Webデザイナー向け) 軽量なWebシステムやWebデザイナー、 フロントプログラマ向け
- 8.
- 9.
- 10. Azure WebAppsってこんな感じ 10 「STANDARD」がおすすめ 50GBまで「独自ドメインサイト」が入れ放題 – 約8000円で – WordPressだったら1000サイト入る計算 5ドメインまでSSLもOK – 6サイト目から918円／月 構築環境をそれぞれに変えられる – PHPのバージョンやSSL、CMSなど 自分専用で環境を細かく設定できる レンタルサーバーを持てるイメージ
- 11. Azure WebAppsのいいところ Azureを従来のレンタルサーバーの ような形で使うことができる 管理ポータル画面で、よく使う必要な機能は 操作できる – コマンド知らなくて大丈夫 – スケールアウト・フェイルオーバーも 自力で設計せずに使える 11
- 12.
- 13.
- 14. Webサイトの自動バックアップ・復元 14 完全バックアップを1日1回やってくれる – 設定しておけば毎日 バックアップデータはストレージに 保存されていくので容量を圧迫しない – 極論365日前の状態に戻すこともできる WordPressもSQLiteを採用すれば DBのバックアップ対策しなくてOK – DBバックアップ用のプラグイン不要 – 復旧時はFTPでファイルをあげるだけ
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21. YouTubeのような制御できる動画を 配信できる Azure MediaServicesでYouTubeのよう な制御できる動画が配信できる 動画配信サーバを用意する必要がない 動画を配信できる状態にエンコードする 必要もなし ライブストリーミング配信や コンテンツ保護もできる 21
- 22.
- 23. ファイル転送サービス的に使ってみる 宅ふぁいる便やfirestorageの変わり BLOBストレージは容量無制限で 画像入れ放題 ダウンロードに期限がない 納品データのバックアップの意味も FTPクライアントではなく 専用クライアントが必要 – 「Azure Storage Explorer」が便利 23 BLOBストレージを利用。
- 24. 制作データを丸ごとバックアップ MacでいうとTime Machineのクラウド版な イメージ geo 冗長ストレージ (GRS)では データのコピーが6つ保持される 一度スケジュールを設定すると自動で バックアップし続けてくれる – デザインデータなどのバックアップに便利 1回の操作でバックアップ可能な対象 ファイルサイズは最大53TB 24 Azure Backupを利用。
- 25. iPhoneでWebページを修正する WebAppsはFTP以外にもDropboxでの デプロイが可能 – 事前にDropboxでデプロイできるように設定 –iPhoneには無料のFTPクライアントがない問題を これで回避する HTMLやCSSの修正ができるエディタとして 「iEditor」を使用 25 ✕ 複数のデプロイ方法を利用。
- 26.
- 27.
- 28. A/Bテストを実施する 28 新規Webサイトを作成 展開スロットを準備 「オリジナル」と「スロット」 それぞれにテストしたいデザインを アップロード ステージング機能とトラフィックルーティ ングを利用。
- 29.
- 30.
- 31. WebAppsの魅力、総まとめ 31 1分程度でWeb構築環境が作れる FTP操作で通常のレンタルサーバーのように 使える –Visual Studio Online、GitHub、Git、Dropbox 等、その他のデプロイ方法も複数選択可能 Web制作の根本的なワークフロー効率化に 役立つ インフラ的な専門知識・技術が無くても、 スケールアウトなどアクセス負荷にも耐える 「サイトを落とさない」仕組みをデザイナー が構築できる
- 32.
- 33.
Editor's Notes
- #8 インフラ知識がなくても使えてる部分が、このWebApps。
- #9 WebAppsはAzure App Serviceの一部。
- #11 Azureは無料版もありますが、プレビュー用とかに使うのがオススメ （WEBホスティングプラン 無料／SHARED／BASIC／STANDARD／PREMIUM）
- #30 この設定はプレビューポータルでしかできないのですが、トラフィックルーティングという機能があって、ここで比率を設定。 今回は５０％としておきます。
- #31 「トラフィックルーティング」を使った場合を図解するとこんな感じ。 解析データはGoogleアナリティクスで取るようにすれば、手軽にABテストを実施できます。