PowerPoint プレゼンテーション

Transcription

1 ソフトバンクコマース & サービス株式会社 Azure 相談センター 猫の手も借りたい インフラ担当者向け Microsoft Azure Web Apps を 使った効率的なサイト環境の構築マニュアル

2 マニュアルについて 本マニュアルの対象ターゲット Web 開発を支えるインフラ担当者の方 サーバーの知識はあるが普段はサーバーを触らないエンジニアの方 基本的な Web サーバーの知識や運用の経験があることを前提にしています Web 制作のために必要な各種ツール サービスを使っていることを前提としています 事前に準備して頂く事 Microsoft アカウント 下記 URL よりアカウントを作成ください 独自ドメイン お名前.com などで事前に取得してください SSL 証明書の事前購入 FTP クライアント Git クライアント 免責事項 05 年 09 月 8 日 本マニュアルはソフトバンクコマース & サービス株式会社が Microsoft Azure の学習のために作成したものです 本マニュアルを利用した結果生じた損害について ソフトバンクコマース & サービス株式会社は一切責任を負いかねます旨 ご了承ください

3 目次 一章 :Microsoft Azure Web Apps を使った Web サイト作成基礎編 ( 所要時間 : 約 0 分 ) 簡単な手順で Web サイトを作成する方法をご説明します アカウントとログイン 管理ポータルの説明 Web Apps( アプリ ) を使ったサイト立ち上げ方法 - 静的なサイト編 FTP で接続 二章 :Microsoft Azure Web Apps を使った Web サイト作成応用編 ( 所要時間 : 約 0 分 ) 一章で作成した Web サイトについて 独自ドメイン作成 サイト認証 ステージング環境の用意など 実践的な内容を習得できます 独自ドメインの設定 サイトに認証をかける (Active Directory 編 HttpAuthModule 編 ) サイトのステージング環境の作成 サイトのステージング環境と本番環境のスワップ サイトのバックアップ方法 Git の設定方法 三章 :CMS サイトの構築 ( 所要時間 : 約 5 分 ) CMS を標準装備した Web サーバーの立ち上げ方法をご説明します WordPress の立ち上げ方法 補足 :Microsoft Azure Web Apps とは Web アプリケーション向けホスティングサービスです オートスケール機能を備えた Azure 上の共有または占有サーバー上でホスティングされます 3

4 一章 :Microsoft Azure Web Apps を使った Web サイト作成 基礎編 初めてサインインする方はまず Microsoft アカウントの作成を Microsoft Azure をご利用になるには Microsoft アカウントが必要です Microsoft アカウントをお持ちでない方は下記からアカウントを作成してください 下記にログインし 入力画面の項目を入力してください 次にサブスクリプションの購入とアクティブ化を行ってください 今回は 無料評価版 をクリックし画面右上のポータルをクリックして開始いたします 無料評価版の申し込み手順の詳細は 下記をご参照ください Open ライセンスを利用される場合の手順は 弊社までお問い合わせください 4

5 一章 :Microsoft Azure Web Apps を使った Web サイト作成 基礎編 管理ポータルからログインしてください ) 管理ポータルへサインイン 下記 URL へアクセスします 事前に取得した Microsoft アカウントの ID とパスワードを入力してサインインします 参考 : 5

6 一章 :Microsoft Azure Web Apps を使った Web サイト作成 基礎編 管理ポータルの説明 A B C D E ) メニューについて ヘッダー A: ホームボタン B: メニュー表示切り替えボタンホーム料金ドキュメントダウンロードコミュニティサポート C: クレジットの状態確認ボタン D: 言語切り替えボタン E: アカウント関連ボタン サイドサービスのワークスペース切り替えボタン フッター新規 : 利用したいサービスを新規で追加できます 4 サービスに紐づいたメニュー 5 ヘルプボタン各サービスの概要をご覧になれます 参考 : 6

7 一章 :Microsoft Azure Web Apps を使った Web サイト作成 基礎編 Web Apps( アプリ ) を使ったサイト立ち上げ方法 - 静的なサイト編 フッターの新規ボタンをクリック 7

8 一章 :Microsoft Azure Web Apps を使った Web サイト作成 基礎編 Web Apps( アプリ ) を使ったサイト立ち上げ方法 - 静的なサイト編 COMPUTE WEB アプリをクリック ギャラリーからをクリック 8

9 一章 :Microsoft Azure Web Apps を使った Web サイト作成 基礎編 Web Apps( アプリ ) を使ったサイト立ち上げ方法 - 静的なサイト編 テンプレート 空のサイトをクリック 9

10 一章 :Microsoft Azure Web Apps を使った Web サイト作成 基礎編 Web Apps( アプリ ) を使ったサイト立ち上げ方法 - 静的なサイト編 任意で作成したい URL を入力する webscalegroup で日本 ( 東 ) を選択 3 入力内容を確認しボタンをクリック 3 0

11 一章 :Microsoft Azure Web Apps を使った Web サイト作成 基礎編 Web Apps( アプリ ) を使ったサイト立ち上げ方法 - 静的なサイト編 作成中になり 通常は数分で完了いたします

12 一章 :Microsoft Azure Web Apps を使った Web サイト作成 基礎編 Web Apps( アプリ ) を使ったサイト立ち上げ方法 - 静的なサイト編 フッターの通知をクリックしてステータスを確認してください

13 一章 :Microsoft Azure Web Apps を使った Web サイト作成 基礎編 Web Apps( アプリ ) を使ったサイト立ち上げ方法 - 静的なサイト編 実行中になりましたら の URL をクリックしてサイトを確認真っ白なサイトが表示されます ソースを確認して上記のようになっていればサーバーの立ち上げは完了です 3

14 一章 :Microsoft Azure Web Apps を使った Web サイト作成 基礎編 FTP の接続方法 ダッシュボードに移動します 発行プロファイルのダウンロードから赤字の部分を参照して FTP クライアントにサーバー名 ID PW を登録してください <publishdata> ---- 前半部分省略 <publishprofile profilename="html5-site - FTP" publishmethod="ftp" publishurl="ftp://waws-prod- ty- 00.ftp.azurewebsites.windows. net/site/wwwroot" ftppassivemode="true" username="html5-site $html5- site" suserpwd= " destinationappurl=" site.azurewebsites.net" SQLServerDBConnectionString="" mysqldbconnectionstring="" hostingproviderforumlink="" controlpanellink=" azure.com" websystem="websites"><databas es/></publishprofile></publishdat a> 備考 : ダッシュボードの右サイドの概要にサーバー関連の情報があります 4

15 一章 :Microsoft Azure Web Apps を使った Web サイト作成 基礎編 FTP の接続方法 FTPS の場合はこちらの URL を FTP クライアントに登録して接続してください 5

16 二章 :Microsoft Azure Web Apps を使った Web サイト作成 応用編 独自ドメインの設定方法 構成をクリック ドメインの管理ボタンをクリック ドメインを取得したサービスの DNS に IP アドレスを登録と ww.yourdomain.com から subdomain.azurewebsites.net または awverify. から awverify.subdomain. azurewebsites.net を参照する DNS プロバイダーで CNAME リソースレコードを作成してください 3 取得しているドメイン名を記入 4 ボタンをクリックして登録 3 4 備考 備考 : カスタムドメインを設定するには事前にドメイン取得サービスでドメインを取得してください また管理ポータルの スケール タブより app service のプランを [ 共有 ]/[BASIC]/[STANDARD] のいずれかに変更する必要があります 6

17 二章 :Microsoft Azure Web Apps を使った Web サイト作成 応用編 サイトに認証をかける (Active Directory 編 ) 管理ポータルの 構成 タブから構成 / 承認の構成ボタンをクリック をクリックして完了 7

18 二章 :Microsoft Azure Web Apps を使った Web サイト作成 応用編 サイトに認証をかける (HttpAuthModule 編 ) ダウンロード <configuration> <configsections> <section name="httpauthmodule" type="system.configuration.namevaluefilesectionhandler" /> </configsections> <httpauthmodule> <!-- [required] Http Authentication Mode. - Basic: Basic authentication - Digest: Digest authentication - None: No authentication --> <add key="authmode" value="digest"/> <!-- [optional] default is "SecureZone" --> <add key="realm" value="securezone"/> <!-- [required if http auth on] user:pass;user:pass;... --> <add key="credentials" value="admin:pass;"/> <!-- [optional] Digest Auth Nonce Valid Duration Minutes. default is 0 --> <add key="digestnoncevalidduration" value="0"/> <!-- [required if digest auth on] Digest Auth Nonce Salt --> <add key="digestnoncesalt" value="uht9987bbbsax" /> <!-- [optional] If set, specified IPs are only allowed: otherwize All IPs are allowed. value is joined IP Range Combination as following / (equals to /3) - 00:0db8:bd05:0d:88a:fc0:000:0000/6 - :: (equals to ::/8) e.g) ; /6; /6;:: --> <!-- [optional] If set, specified pattern url request skip http auth and IP Restriction. --> <add key="ignorepathregex" value="^/home/ignore$ ^/Ignore.aspx$"/> <!-- [optional] If set,specified IPs requests skip http auth Restriction. value format is same as 'RestrictIPAddresses' --> <add key="ignoreipaddresses" value="7.0.0.;::"/> </httpauthmodule> XML 形式でファイルを作成し ID: 青字 PW: 赤字を任意に修正ファイル名を Web.config WordPress の管理画面等に認証をかけます <add key="httpauth.ignorepathregex" value="^(?!/wp-admin)" /> <add key="httpauth.restrictipaddresses" value="7.0.0." /> <system.webserver> <modules> <add type="httpauthmodule.httpauthmodule" name="httpauthmodule"/> </modules> </system.webserver> </configuration> 参考 : 8

19 二章 :Microsoft Azure Web Apps を使った Web サイト作成 応用編 サイトのステージングサーバーの作成方法 ステージング環境を立てるには 3 ダッシュボードの右サイド概要メニューから新しい展開スロットの追加をクリック 名前を入力 3 複製するソースを選択 4 ボタンをクリックして実行 4 5 備考 : app service のプランが STANDARD 以上の必要があります 9

20 二章 :Microsoft Azure Web Apps を使った Web サイト作成 応用編 サイトのステージングサーバーの作成方法 実行中になっていたら完了です URL にアクセスしてサイトをご確認ください の画面が表示されていましたら作成完了です 0

21 二章 :Microsoft Azure Web Apps を使った Web サイト作成 応用編 ステージング環境と本番環境のスワップ方法 ステージング環境を立てるとスワップボタンが表示されますのでクリックします スワップするソースとターゲットを選択します 3 ボタンをクリックして実行 以上で完了です 3

22 二章 :Microsoft Azure Web Apps を使った Web サイト作成 応用編 サイトのバックアップ方法 ストレージサービスでストレージアカウントを作成します 任意の名前を入力し場所 / アフィニティでお近くのリージョンを選択レプリケーションをローカル冗長 3 アカウント作成ボタンをクリック 3

23 二章 :Microsoft Azure Web Apps を使った Web サイト作成 応用編 サイトのバックアップ方法 Web Apps の管理画面のバックアップをクリック 作成したストレージを選択 フッターメニューの保存をクリック 3 今直ぐバックアップをクリックしてバックアップを開始します 3 3

24 二章 :Microsoft Azure Web Apps を使った Web サイト作成 応用編 Git の立ち上げ方法 ダッシュボードの概要メニューから ローカルリポジトリを選択し 3 ボタンをクリックして実行 4 ユーザー名とパスワードを設定して作成 3 4 4

25 二章 :Microsoft Azure Web Apps を使った Web サイト作成 応用編 Git の立ち上げ方法 Git の URL をコピーしてお使いの Git クライアントからアクセスしてください 5

26 三章 :CMS サイトの構築 WordPress サイトの立ち上げ方法 フッターの新規作成ボタンから COMPUTE WEB アプリ ギャラリーからを選択 CMS WordPress を選択し矢印をクリック 6

27 三章 :CMS サイトの構築 WordPress サイトの立ち上げ方法 任意のサブドメイン名を入力 新しい MySQL を選択 3 お近くのリージョンを選択 4 矢印をクリック 3 4 7

28 三章 :CMS サイトの構築 WordPress サイトの立ち上げ方法 任意の DB 名を入力 お近くのリージョンを選択 3 チェクをいれて矢印をクリック 4 作成中から実行中に変更したら URL をクリックして WordPress を設定し立ち上げ完了です 3 4 8

29 補足 :Microsoft Azure Web Apps とは Microsoft Azure は IaaS と PaaS のサービス クラウドの種類 IaaS PaaS SaaS 物理 仮想化 参考 :

30 補足 :Microsoft Azure Web Apps とは Microsoft Azure は IaaS と PaaS のサービス 参考 :

31 補足 :Microsoft Azure Web Apps とは Microsoft Azure は IaaS と PaaS のサービス 参考 :

32 補足 :Microsoft Azure Web Apps とは Web Apps は PaaS Web Apps 参考 :

33 補足 :Microsoft Azure Web Apps とは Web Apps は PaaS 参考 :