Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

20161022 mt azure_handson

363 visualizaciones

Publicado el

2016年10月22日 ハンズオン資料です

Publicado en: Software
  • Sé el primero en comentar

20161022 mt azure_handson

  1. 1. Microsoft Azure + Movable Type ハンズオンセミナー 2016年10月22日 シックス・アパート株式会社 長内 毅志 1
  2. 2. 長内毅志 –2011年~ Movable Typeプロダクトマネージャー –2014年~ ディベロッパーリレーションマネージャー エバンジェリスト –趣味 ダンス (ストリート、ジャズ) ジョギング (サブフォー) 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと
  3. 3. 本日のハンズオン内容 3 • Movable Type とは • Microsoft Azure のアカウントアクティベート –Microsoft アカウントの作成 –Azure アカウントの作成 • 仮想マシンの立ち上げ • Movable Type のセットアップ • 環境のクリーンアップ
  4. 4. https://goo.gl/yZtxzn 4
  5. 5. Movable Type とは 5
  6. 6. Movable Type(ムーバブル・タイプ)とは サンフランシスコ生まれの 世界標準CMSパブリッシングプラットフォーム。 世界中のユーザーに使われ15年。 2001年 2016年 Movable Type 1.0 Movable Type 6.3 サンフランシスコのシックス・アパー ト創業者夫妻が自分たちの日記を書く ために開発したブログツール 国内導入実績 ナンバー1。ウェブに とどまらないコンテンツ管理が可能な CMSソフトウェアとして進化中。 Movable Type とは
  7. 7. • ブログから数万ページに及び大規模サイトまで 5万件以上の導入実績 ECサイト イントラサイト・WEB社内報 メディアサイト・企業オウンドメディア 会員制サイト・コミュニティサイト 実績 コーポレートサイト 5万件以上の導入実績 5万件以上!
  8. 8. ビジネスユーザーに絶大な支持 日経平均225社の 半数以上がMTユーザー
  9. 9. 安全性・セキュリティについて 安全性 タグだけでセキュア なサイトを構築 CMSと公開サイト のパスを分離可能 不正ログインに対す るアカウントロック 細かな権限設定 で役割を明確に 安全性が高い 安全性が高い
  10. 10. サポートがある • 開発拠点は日本 • オンラインサポート • 月曜日 - 金曜日 10:00 - 17:00 –(土曜・日曜・年末年始・休祝日を除く) • サポート内容は以下 –http://www.sixapart.jp/movabletype/support/support_rules.html 安心なサポートがある
  11. 11. Movable Type の特徴 11
  12. 12. 特徴 12 • プログラムを書かずにタグだけでいろいろな出力処理 が実装できる • CMSサーバーとコンテンツを分離可能 • 不正ログインに対するアカウントロックやパスワード 設定など、セキュリティ対策に関する機能が豊富 • 国内に取り扱い可能な制作会社が多数存在する
  13. 13. 13 • 完成されたテンプレートエンジン • デザインの変更が容易 • Data APIによるデータ入出力の拡張性 • 静的生成のためさまざまなサーバー構成に対応可能
  14. 14. • さまざまなプログラム言語からREST/JSON方式で Movable Type にア クセスし、データの取得や更新が可能。 • CMSで管理しているデータを、サイト上で自由に呼び出したり、 独自の管理画面やアプリの開発、他のプラットフォームとの連携が 容易に。 Data API
  15. 15. ハンズオン 15
  16. 16. 本日のシナリオ 16 Microsoft Azure 仮想マシン [CMSサーバー兼 ウェブサーバー] ※本日の内容をわかりやすくするために図式化したものであり、 厳密には事実と異なる部分があります。ご了承ください。
  17. 17. 本日のシナリオ(詳細) 17 Microsoft Azure 仮想マシン [CMSサーバー兼 ウェブサーバー] http(80)、SSH(22) のみ通信可能なファイヤーウォール インターネットゲートウェイ (グローバルIP) NAT ※本日の内容をわかりやすくするために図式化したものであり、 厳密には事実と異なる場合があります。ご了承ください。 サブネット
  18. 18. Microsoft Azureアカウントの アクティベーション 18
  19. 19. 19 • やること –Microsoft アカウントの作成 =>サインイン –Azureアカウントの作成 =>サインイン
  20. 20. 20 • https://azure.microsoft.com/ja-jp/ へアクセス • 検索エンジンから「Microsoft Azure」を検索
  21. 21. Microsoft Azure のトップ画面 21 「無料で始める」を クリック
  22. 22. 22 「無料で始める」を クリック
  23. 23. 23 Microsoft アカウントがある方はサインイン 無い方は「新しいアカウントを取得」をクリック
  24. 24. 24 • Microsoft アカウントをお持ちでない方は、アカウン ト作成を行います。 • Microsoft アカウントをお持ちの方は、少しお待ちく ださい
  25. 25. 25 Microsoft アカウントで利用するメールアドレス と、パスワードを入力し、「次へ」をクリック
  26. 26. 26 入力したメールアドレス宛に、セットアップ用の メールが届きます。
  27. 27. 27 最初の「下のリンクをクリックしてアカウントを確認してく ださい」をクリックして、MSアカウントを作成します
  28. 28. 無料パスコードを入力 28 • http://www.microsoftazurepass.com/ へアクセス
  29. 29. 29 国名は「Japan」 下欄に無料体験コードを入力
  30. 30. 30 「Sign in」をクリックして、先程作成した Microsoft アカウントでサインインします
  31. 31. 31 First Name は名、Last Nameは姓を入力 Microsoftアカウントを確認して Submitをクリック
  32. 32. 32 「Activate」をクリックします
  33. 33. 33 国名、名前などを入力します。
  34. 34. 34 連絡先電話番号を入力します
  35. 35. 35 チェックボックスをチェックして、 「サインアップ」をクリックします
  36. 36. 36 入力が全て完了すると、 処理待ちの画面になります。
  37. 37. 37 「サービスの管理を開始する」をクリックします。
  38. 38. 38 Microsoft Azure のポータル画面に移動します
  39. 39. • 本日から30日以内、$100 分まで使用できます。 • $100 使い切るか、30日経過するかで、このコードは 無効となります。 • Azureのアカウントはのこりますので、クレジットカ ード情報を登録すると、引き続き利用できます。 今回の無料体験コードについて 39
  40. 40. 仮想マシン (Virtual Machine) の立ち上げ 40
  41. 41. Virtual Machine(仮想マシン)とは 41 • Azure上で利用できるサーバーイメージ • Windows だけでなく、Linuxなども利用可能 • マーケットプレースで様々なサーバーイメージを入手 できる
  42. 42. 42 「Virtual Machines」をクリックします。
  43. 43. 43 「追加」をクリックします。
  44. 44. 44 「Market Place」の検索欄に [nginx]と入力して検索を行 います。
  45. 45. 45 [nginx]を設定した仮想マシン一覧が表示されます。 名前:nginx、公開元:Docker になっている仮想マシンを選択します。
  46. 46. 46 画面右欄に、仮想マシンの説明が表示されます。 下部にある「作成」をクリックします。
  47. 47. 47 VM disk typeを選択し ます。初期状態 「Premium(SSD)」で かまいません。
  48. 48. 48 ユーザー名を指定しま す。仮想マシンにSSH 接続する際のユーザー 名となります。
  49. 49. 49 認証の種類を選択します。 今回は「パスワード」を 選びます。
  50. 50. 50 「パスワード」 「パスワードの確認」を 入力します。
  51. 51. 51 「リソースグループ」を 作成します。 「新規作成」を選び、 任意の名前を入力し ます。
  52. 52. 52 「場所」を選択します。 「東日本」を選びます。
  53. 53. 53 すべての設定が完了し たら「OK」を選択します。
  54. 54. 54 仮想マシンのサイズを 決定します。初期状態 ではお勧めのサイズが 表示されています。 「すべて表示」をクリック してみましょう。
  55. 55. 55 選択可能な仮想マシン のサイズがすべて表示 されます。今回は 「DS1_V2 Standard」 を選んでみましょう。
  56. 56. 56 「オプション機能の構成」 画面が表示されます。 ここでは何も変更せずに、 下部の「OK」ボタンを クリックします。
  57. 57. 57 仮想マシン、および関連サービスの デプロイが開始されます。完了までに 少し時間がかかるので、待ちます。
  58. 58. 58 デプロイが完了したら、左メニューから 「Virtual Machines」をクリックします。 一覧画面に作成した仮想マシンが表示さ れますので、クリックします。
  59. 59. 59 作成した仮想マシンの詳細情 報が表示します。「概要」を選び、 「パブリックIP」を確認します。
  60. 60. 60 ブラウザに、「Public IP」のアドレスを入力してみましょう。 nginxの初期画面が表示されます。 (htmlが何もない状態なので、エラー画面が出ます。) 仮想マシンに接続して、htmlファイルをアップロードする と、表示されるようになります。
  61. 61. 61 左上の「Microsoft Azure」をクリックすると、ダッ シュボードに戻ります。左のメニューから「すべ てのリソース」をクリックします。
  62. 62. 62 今回の仮想マシン公開に関連するサービス一覧が 表示されます。この中から 「ネットワーク・セキュリティグループ」を選びます。
  63. 63. 63 ネットワークセキュリティの設定画面が表示されま す。ここではセキュリティ規則(ファイヤーウォール) の設定ができます。
  64. 64. 64 「受信セキュリティ規則」の「HTTP(TCP/80)」 を選んでみましょう。
  65. 65. 65 画面右側に詳細設定画面 が表示されます。 「アクション」を「拒否」にし て、上部の保存ボタンを押 し、設定を保存します。
  66. 66. 66 「受信セキュリティ規則」で、HTTPが「Deny」になって いることが確認できます。 もう一度、ブラウザで、仮想マシンのパブリックIPへ アクセス・リロードしてみましょう。
  67. 67. 67 ブラウザで閲覧できていた仮想マシンのウェブサー バーへ、アクセスできなくなっています。 Azureのセキュリティ設定(ファイヤーウォール)が 有効化されたからです。
  68. 68. リソースグループのサービス各役割 68 Microsoft Azure 仮想マシン+ ストレージサービス ネットワークセキュリティグループ パブリックIPアドレス ネットワーク インターフェース ※本日の内容をわかりやすくするために図式化したものであり、 厳密には事実と異なる場合があります。ご了承ください。 仮想ネットワーク
  69. 69. リソースグループ内サービスの各役割 69 Microsoft Azure 仮想マシン [CMSサーバー兼 ウェブサーバー] http(80)、SSH(22) のみ通信可能なファイヤーウォール インターネットゲートウェイ (グローバルIP) NAT ※本日の内容をわかりやすくするために図式化したものであり、 厳密には事実と異なる場合があります。ご了承ください。 サブネット
  70. 70. • サービスを提供するために構築した、サーバー構成一 式(各種サービス一式)をグループ化したもの リソースグループとは 70 ※本日の内容をわかりやすくするために文書化したものであり、 厳密には事実と異なる場合があります。ご了承ください。
  71. 71. Movable Type 用のサーバー環境 設定 71
  72. 72. 72 • Movable Typeの動作環境を設定します。 • 今回はハンズオンのプログラム構成上、スキップしま す。
  73. 73. Movable Type インストールのための環境設定 73 • MovableType.jp(MTの技術ドキュメント) –https://www.movabletype.jp/documentation/ • さくらのナレッジ –http://knowledge.sakura.ad.jp/beginner/2074/
  74. 74. Movable Type のインストール 74
  75. 75. 75 • 配布した用紙の「インストール用URL」をブラウザに 入力してアクセスします
  76. 76. 76 配布用紙の「インストール用URL」へアクセスします。 Movable Type の初期画面が表示されるので 「Movable Type にサインイン」をクリックします。
  77. 77. 77 [開始]をクリックします。
  78. 78. 78 [システムチェック]画面が表示されます。 「次へ」をクリックします。
  79. 79. 79 [データベース設定] の画面に移動します。 データベースは 「MySQL」 データベースサー バーは「localhost」の ままにします。
  80. 80. 80 データベース名、を 手元の用紙を元に 入力します。
  81. 81. 81 ユーザー名は handson パスワードは H6vBAbsZ と入力します。
  82. 82. 82 すべての入力が終わっ たら 「接続テスト」をクリック します。
  83. 83. 83 データベースの接続設定が成功すると、画面が切り替 わります。「次へ」をクリックします。
  84. 84. 84 [システムメールアドレス]の入力画面になります。みなさん がお使いのメールアドレスを入力して「次へ」をクリックしま す。「メール送信プログラム」は今回設定しません。
  85. 85. 85 [Movable Type Proの設定を完了しました。]とメッセージ が表示されたら、「次へ」をクリックします。
  86. 86. 86 ユーザー名、表示名 を入力します。両方 同じで名前でOKです。 ユーザー名は Movable Type のサ インインアカウントに なります。
  87. 87. 87 電子メール欄にメー ルアドレスを入力し ます。 使用言語は「日本 語」のままで変更し ません。
  88. 88. 88 パスワードを入力します。パ スワードは8文字以上で指 定します。Movable Type の サインインを行うときに、 「ユーザー名」とともに使用 します。
  89. 89. 89 アカウント設定が全て終 わったら「次へ」をクリックし ます。
  90. 90. 90 「ウェブサイト名」はそのままで 変更しません。 「ウェブサイトURL」「ウェブサイ トパス」は、用紙を元に入力し ます。 「テーマ」「タイムゾーン」は変 更しません。
  91. 91. 91 すべての設定が終わったら「イ ンストール」をクリックします。
  92. 92. 92 Movable Typeのインストールが 始まります。
  93. 93. 93 インストールが完了したら「Movable Typeにサインイン」 をクリックします。
  94. 94. 94 Movable Typeのユーザーダッシュボードが表 示されたら、インストール完了です。
  95. 95. Movable Type でウェブサイトを 出力・更新する 95
  96. 96. 96 ユーザーダッシュボードから「First Website」をクリックします
  97. 97. 97 「First Website」の操作画面に移動します。 右上の丸矢印アイコンをクリックしてみま しょう。
  98. 98. 98 再構築用ポップアップ画面が表示 されます。「再構築」とは、Movable Type で htmlを出力する処理です。 「再構築」ボタンをクリックしましょう。
  99. 99. 99 「再構築」が始まり、 htmlの出力を行います。 しばらく待ちます。
  100. 100. 100 再構築が終了したら、 「サイトを見る」をクリック します。
  101. 101. 101 最初のウェブサイトが出力されているのが 確認できます。
  102. 102. 102 いま出力したウェブサイトに新しい記事を追加してみま しょう。左メニューの [記事] => [新規] 、もしくは右上黄 色のボタンから [新規作成] => [記事] を選びます。
  103. 103. 103 最初の記事編集画面に移動します。「タイトル」と「本 文」に適当な文字・文章を入力してみましょう。
  104. 104. 104 入力が終わったら画面右 の「公開」ボタンをクリックし ます。
  105. 105. 105 公開が終わったら、画面上部の「記事を見る」か、右上 の四角いアイコンをクリックしてみましょう。
  106. 106. 106 入力・公開した記事が公開されて いることが確認できます。
  107. 107. Movable Typeの管理画面と 基本操作
  108. 108. 管理画面 Movable Type の管理画面はユーザーダッシュボードを起 点に、3層構造になっています。
  109. 109. ウェブサイトとブログの違い • ウェブサイト… 「サイト」「ホームページ」全体を管理する仕組み • ブログ… ウェブサイトの中にある、更新頻度の高いコンテンツを管理する仕組 み 「ブログ」「ニュースリリース」「IR情報」 「新製品紹介」など 参考リンク3: http://www.movabletype.jp/documentation/mt6/websites/
  110. 110. 1つのWebサイトを構成する例
  111. 111. 複数のWebサイトを構成する例
  112. 112. ダッシュボード 左上の三角アイコンをクリックして、操作したいモードを切 り替えながら、ウェブサイトやブログを管理していきます。
  113. 113. 環境のクリーンアップ 113
  114. 114. 114 • 最後に、今日のハンズオンで作成した環境を削除して 終了します。 • Microsoft Azure の管理画面に移動しましょう。
  115. 115. 115 左メニューから「リソースグループ」 を選択し、本日作成したリソースグループをク リックします。
  116. 116. 116 今回のハンズオンで 作成したサービスの 一覧が表示されます。
  117. 117. 117 右画面上部の「削除」 をクリックしましょう。
  118. 118. 118 削除の確認画面が表 示されます。入力欄 に、今回作成したリ ソースグループ名を 入力します。
  119. 119. 119 正しいリソース名を入 力すると「削除」ボタ ンが選択できるように なります。 「削除」ボタンをクリッ クします。
  120. 120. 120 削除中の処理画面が表示され、 今回の環境一式の削除を開始します。
  121. 121. 121 左メニューから「すべてのリソース」を選択しま しょう。何も表示されていなかったら、環境のク リーンアップは終了です。
  122. 122. 122 削除が完了したのに、リソースが表示されている 場合、ブラウザキャッシュの影響が考えられます。 画面上部の「更新」をクリックしてみましょう。
  123. 123. Microsoft Azureと Movable Type を より深く学びたい方のために 123
  124. 124. Microsoft Azure のセミナーもいっぱい「mstep」 124 ※Microsoft パートナープログラムへの登録が必要です mstep で検索
  125. 125. Azure のユーザーグループ「JAZUG」 125 JAZUG で検索
  126. 126. Movable Type 開発者のためのライセンス 126 MT 開発者ライセンスで検索
  127. 127. Movable Type のセミナー情報 127 MT セミナーで検索
  128. 128. Movable Type のユーザーグループ情報 128 MT ユーザーグループで検索
  129. 129. 全国に広がるMTユーザーグループ • MT蝦夷 • MT東北 • MT東京 • MTなごや • MT愛媛 • MT鹿児島 • MT関西 • MT広島 • MT福岡 • MT長野 • MT ∗/ NIIGATA(新潟) • MT SAGA • MT熊本
  130. 130. MTDDC Meetup TOKYO 2015 200人以上が参加
  131. 131. MTDDC Meetup TOKTO 2016 開催 132 11月12日(土)お台場で開催!
  132. 132. • ありがとうございました 133

×