20180821_MT_AWS_Handson_public.pdf

2018年8月21日 Movable Type for AWS のハンズオン資料です

Transcript

1. Movable Type for AWS ハンズオン 2018年8月21日 シックス・アパート株式会社 長内 毅志
2. •長内毅志 –2011年～ Movable Typeプロダクトマネージャー –2014年～ ディベロッパーリレーションマネージャー エバンジェリスト –趣味 ダンス (ストリート、ジャズ) ジョギング (サブフォー) 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと
3. • インターネットに接続できるか • AWSのコンソール画面に入れるか 確認しましょう。 • AWSのアカウントが無い方は、急いで作るか、今回は内容を確認し て、後日試してみてください。
4. 本日のサマリ • Movable Type とは何か • VPCを利用したネットワーク設定 • Movable Type for AWSを利用した仮想マシンの構築 • Elastic IP の設定 • セキュリティグループの設定 • Movable Type の立ち上げと公開、更新作業 • S3へのコンテンツ配信(SSHを使用します) • 環境のクリーンアップ
5. 今回作成する環境 VPC EC2 S3
6. Movable Type とは
7. Movable Typeとは • 10年以上利用されているブログ・CMS(通称MT) • MTタグ組み合わせでロジック生成 • テンプレートとDBが完全に分離している (MVCライク) • プラグインで拡張可能 • どんなコードも生成可能
8. • ブログから数万ページに及び 大規模サイトまで 5万件以上の導入実績 ECサイト イントラサイト・WEB社内報 メディアサイト・企業オウンドメディア 会員制サイト・コミュニティサイト 実績 コーポレートサイト 5万件以上の導入実績 5万件以上！ 5万件以上！
9. 商用CMSシェアナンバーワン(富士キメラ総研調べ)
10. ビジネスユーザーに絶大な支持 日経平均225社の 半数以上がMTユーザー 日経平均225社の 半数以上がMTユーザー
11. 最新10件のブログ記事をリンク付きで生成 <ul> <MT:Entries limit="10"> <li> <a href="<MT:EntryPermalink>"> <MT:EntryTitle> </a> </li> </MT:Entries> </ul>
12. 特徴1 •静的生成でhtmlを出力 (スタティックパブリッシング) •動的生成も対応可能 (ダイナミックパブリッシング)
13. •動的、静的生成どちらも対応することで、様々な サーバー構成に対して柔軟に対応できる
14. 基本的な構成 公開サーバー兼 CMSサーバー 管理者 閲覧者 (サイト訪問者)
15. ステージング環境 ステージング サーバー兼 CMSサーバー 公開 サーバー 管理者 閲覧者 (サイト訪問者)
16. 冗長構成 CMS サーバー 公開 サーバー （冗長構成） ロード バランサ
17. VPCを利用したネットワーク設定
18. VPCとは •バーチャル・プライベート・クラウドの略 •サブネットをオンライン上で設定できる •社内ネットワークの一部のようにAWSを使うこ ともできる •現在は、VPC上にしかEC2を構築することができ ない
19. AWSのコンソール • AWSのトップページからコンソ ールへサインインします。
20. サインインします • サインイン画面で、ID・パスワー ドを入力します。
21. • コンソール画面が表示されたら 右上のプルダウンでリージョン を指定します。今回のハンズオ ンでは「アジア・パシフィック （東京）」を使います。
22. • VPC(Virtual Private Cloud) の設定を行います。 • 検索欄に「VPC」と入力して 、VPCの設定画面に移動しま す。
23. • VPCのダッシュボードに移動し たら、「VPCの作成」を選択し ます。
24. • VPCウィザードが開始されま す。「1個のパブリックサブ ネットを持つVPC」を選択し て、次に進みます。
25. • VPC名とアベイラビリティゾ ーンを設定します。 VPC名はなんでも構いません が、ここでは［handson］と します。アベイラビリティゾ ーンは[ap-northeast-1a]を 選びます。
26. • VPCが正常に作成されます。
27. • 左メニューの［VPC］を選び 、一覧画面を表示します。い ま作成したVPC［handson］ が表示されています。
28. [リージョン][アベイラビリティゾーン]とは • リージョンは、世界の[どの地域] のAWSを使うか、という概念 • アベイラビリティゾーンは[地域 内に分散している拠点]、という 概念 • リージョンの中にアベイラビリテ ィゾーンが複数存在する http://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/using-regions-availability-zones.html
29. Movable Type for AWSを利用した 仮想マシンの構築
30. EC2とは • Amazon Elastic Compute Cloudの略 （Amazon EC2） • 仮想マシンをAWS上で立ち上げ ることができる • ウェブサーバーだけでなく、さ まざまなサーバーを構築できる
31. • 左上のアイコンをクリックし て、ユーザーダッシュボード のトップへ戻ります。検索か ら［ec2］と入力して、EC2 の設定画面へ移動します。
32. • EC2ダッシュボードに移動し ます。［インスタンスの作成 ］を選びます。
33. • Amazonマシンイメージ (AMI)の選択画面に変わりま す。メニューから「AWS Marketplace」を選びます。
34. • AWS Marketplace の選択画 面に移動します。検索欄に ［Movable Type］と入力し ます。
35. • Movable Type のAMIが表示 されます。Ver 6 と7の2種 類があるので、バージョンは 7を。 • ウェブサーバーは「nginx」 を選びます。
36. • 価格一覧が表示された場合、 右下の[Continue]を押して 次へ進みます。
37. • ［インスタンスタイプの選択 ］画面に移動します。 ［t2.micro］を選び、［次 の手順］へ移動します。
38. • ［インスタンスの詳細設定］ に進みます。［ネットワーク ］で、先程作成したVPC［ handson］を選びます。［次 の手順］へ進みます。
39. • ［ストレージの追加］に進み ます。初期状態のまま、［次 の手順］へ進みます。
40. • 「タグの追加」をクリックします。
41. • キーは「Name」、値を［ handson］と記述し、次の手 順へ進みます。
42. セキュリティグループの設定
43. セキュリティグループとは •AWSのサービスに設定するファイヤーウォール •接続可能なポート、接続元のIPアドレスの制限な どができる •セキュリティレベルを上げるため、とても大事な 設定です
44. • ［セキュリティグループの設 定］へ移動します。［SSH］ ［http］の2つが許可されて いることを確認します。送信 元は［0.0.0.0/0］です。 ［確認と作成］へ進みます。
45. • すべての設定が終了したら ［作成］をクリックして次へ インスタンスを作成します。
46. • ［キーペア］を作成するかど うかを聞かれます。キーペア はSSH接続するときに使いま す。［新しいキーペアの作成 ］を選び、名前を ［handson］としてダウンロ ードしておきます。［インス タンスの作成］をクリックし ます。
47. • インスタンスの作成が開始さ れますので、しばらく待ちま す。
48. • インスタンスの作成が完了し たら、左メニューから［イン スタンス］を選んでみましょ う。いま作成したインスタン スが立ち上がります。
49. Elastic IPの設定
50. Elastic IPとは •グローバルIPアドレスを付与するためのサービス •EC2はシャットダウン=>再起動のたびにIPアド レスが変わる •Elastic IPを使うと、常に一定のグローバルIPが 使え、なにかと便利
51. • インスタンスの作成が終わった ら、左メニューから ［Elastic IP］を選びます。 ［新しいアドレスの割り当て］ を選びます。
52. • ［新しいアドレスの割り当て ］画面に移動するので、割り 当てを実行します。
53. • Elastic IPにより、グローバル IPが一つ割り当てられます。
54. • 作成したIPアドレスを選択し て、マウスの右クリックをし ます。［アドレスの関連付け ］を選択します。
55. • グローバルIPの関連付け画面 に変わります。 • リソースタイプを[インスタ ンス]とします。 • インスタンスの選択欄から、 今作成したインスタンスを選 びます。 • 関連付けボタンを押します。
56. VPCの作成 • 関連付けが終わりました。
57. インスタンスの起動 • インスタンスの一覧に戻って 、Elastic IPが割り当てられ ていることを確認します。
58. • インスタンスの一覧を確認し て、「インスタンスID」を確 認します。Movable Type の 起動には、このインスタンス IDを利用します。
59. • 割り当てられたIPアドレスを ブラウザに打ち込んで、アク セスしてみましょう。 Movable Type の初期画面が 表示されます。
60. Movable Type の立ち上げと公開、更新 作業
61. • ［Start Movable Type］を クリックします。インスタン スIDの入力を求められるので 、さきほど控えたインスタン スIDを入力します。
62. • アカウント情報の設定画面が表示 されます。サインインに使うユー ザーネーム、メールアドレス、パ スワードなどを入力します。「 Use this as…」にチェックを入れ 、「Finish Install」をクリックし ます。
63. • すべての設定が終わったら、 Movable Type のインストー ルが始まります。「Sign in to Movable Type」という表 示が出たら、クリックして管 理画面に進みます。
64. • ダッシュボードが表示されま す。本日のハンズオンのため に、最初のサイトを作成しま す。左メニューから「システ ム」をクリックします。
65. • システム設定の画面に移動し ます。左メニューから 「サイト」=>「新規」 をクリックします。
66. • サイトの作成画面に移動しま す。以下の設定をします。 • サイトテーマ =>Rainier • サイト名 =>適宜名前をつける
67. • 続けて設定します。 • タイムゾーン =>UTC+9 • 使用言語 =>日本語 • すべて設定したら「サイトの作 成」をクリックします。
68. • 作成が終わると、サイトの操 作画面に移動します。 • 左メニューもしくは全般設定 ページ内の「再構築」をクリ ックします。
69. • ポップアップウィンドウが開き、再構 築の操作画面が表示されます。 • 再構築とは、Movable Type からhtml を生成するための操作となります。 • 再構築ボタンをクリックします。
70. • 再構築が終了したら、「サイトを 見る」をクリックします。
71. • 本日のハンズオンで操作する サイトが公開されているのが 分かります。
72. • 左のメニューから 「記事」=>「新規」 をクリックします。 • 最初の記事作成画面が表示さ れます。
73. • タイトルと本文を入力して、右メ ニューの「公開」ボタンをクリッ クします。
74. • 公開が終わったら、サイトを もう一度見てみましょう。 • 今公開した記事が、新たに反 映されています。
75. コンテンツタイプを触ってみる
76. 素材ファイルをダウンロード
77. • 解凍すると[01_MTGram] [02_recipe] の2フォルダが展開されます
78. フォルダ内のファイルを確認しましょう •01_MTGram –mtgram.html –サンプル写真
79. 写真ギャラリーを開発する
80. 開発するもの • 写真ギャラリー「MTGram」 • 写真「だけ」を登録していくウェブサービス
81. • 左メニュー [コンテンツタイプ] =>[新規]を選び、名前を「 MTGram」とします。
82. • 画面右部から[画像アセット] を選び、中央にドラッグアンド ドロップします。名前を「画像 」と指定します。[このフィー ルドは必須ですか？]をオンに します 。
83. • ユーザーに新規イメージのア ップロードを許可します。 終わったら[保存］ボタンをク リックします。
84. • コンテンツタイプがセーブされ たことを確認して、次に進みま す。
85. • 右部メニューから[デザイン ]=>[テンプレート]を選びま す。画面上部の選択肢から[ インデックス]を選び、新規 作成をクリックします。
86. • テンプレート名を[MTGram]と します。 • [mtgram.html]の中身をコピー &ペーストします。
87. • 出力ファイル名を [mtgram.html]とします • [変更を保存]ボタンを押してセ ーブし、[保存と再構築]ボタン をクリックします。
88. • 再構築が完了したら、右メニューから「公開さ れたテンプレートを確認」リンクをクリックし ます。
89. • MTGramのサービスページが 公開されています。写真が未 登録の状態なので、登録して いきましょう。
90. • 右メニューから[コンテンツデ ータ] => [MTGram]を選びま す。 • [MTGramを作成]を選びます 。
91. • データ入力画面に変わります 。[データ識別ラベル]を入力 します。[画像]から［アセッ トを選択］を選びます。
92. • 写真挿入画面が表示されるので、 任意の画像をアップロードします 。
93. • 画像が選択されたことを確認 して、［挿入］ボタンをクリ ックします。
94. • 画像の挿入が終わったら「公 開」ボタンを押します。
95. • 公開ができたら、同じ要領で何枚 か写真を登録していきましょう
96. • 先程公開したインデックステンプレート「MTGram」 のページを確認します。 • 写真ギャラリーが公開されているのがわかります。
98. Amazon S3へのコンテンツ配信
99. S3とは •Amazon Simple Storage Serviceの略 •あらゆるファイルの保管場所として使える •ウェブサーバーとしても利用できる
100. S3をウェブサーバーとして使うメリット •アクセス負荷を気にする必要がない –事実上ウェブサーバーが落ちない –99.99%の可用性と、99.999999999%の堅牢性 •料金が安い •キャンペーンサイトなどに向いている
101. S3でできないこと •サーバーサイドスクリプトは使えない –php、Java、Ruby、Perlなどは動かない •JavaScriptはOK –ブラウザ上でレンダリングするため
102. S3+Movable Type •MTは、静的にhtmlを出力する •S3に配信できる •実は、とても相性が良い
103. • AWSのダッシュボードから 「S3」を検索して、移動し ます。
104. • Amazon S3のダッシュボー ドへ移動します。「バケット の作成」をクリックします。
105. • バケットの作成画面で、バケ ット名を任意に設定します。 リージョンはTokyoを選択し ます。
106. • [プロパティの設定]画面が表 示されます。そのまま[次へ] を押します。
107. • [アクセス許可の設定]画面が 表示されます。そのまま[次 へ]ボタンをクリックします 。
108. • [確認]画面が表示されたら [バケットを作成]ボタンを押 します。
109. • 作成したS3バケットが確認 できます。いま作成したバケ ット名をクリックします。
110. • タブから「プロパティ」を選 びます。「Static website hosting」というタイルをク リックします。
111. • 「このバケットを使用してウ ェブサイトをホストする」を 選び、S3上でウェブサイト を閲覧できるように設定しま す。インデックスドキュメン トを「index.html」に指定し ます。 • 指定が終わったら「保存」を 押して、設定を反映します。
112. • 次に「アクセス権限」の設定 を行います。「アクセス権限 」=>「バケットポリシー」 をクリックします。
113. • 以下のURLへ移動します。 https://goo.gl/y4Rz1t 今回利用するアクセスポリシーがある ので、すべてコピーします。
114. • バケットポリシーへ、コピーしたコードを貼り付けます。貼り付ける際 “Resource”: “arn:aws:s3:::handson-sample/*“ の「handson-sample」を、みなさんが作成したバケット名に変更して 、保存を押します。
115. • AWSのダッシュボードに戻 り、「IAM」を検索して移動 します。
116. IAMの設定
117. IAMとは • AWS Identity and Access Managementの略 • AWSの各サービスに対する 操作ユーザーを定義する機能 • [S3]だけ操作できる人、 [EC2][S3]両方操作できる人 など、細かく権限設定できる
118. • IAMのダッシュボードに移動 したら「ユーザー」をクリッ クします。
119. • 「ユーザーを追加」をクリッ クします。
120. • ユーザー名を任意に決めます 。 • [アクセスの権限]は[プログ ラムによるアクセス]を選び ます。 • 「次のステップ」へ移動しま す。
121. • 「アクセス権限」の設定画面 に移動します。「既存のポリ シーを直接アタッチ」を選び ます。
122. • 検索ボックスに「S3」を入 力すると、S3関連のアクセ スポリシーが表示されます。 ここでは 「AmazonS3FullAccess」 を選びます。
123. • 「AmazonS3FullAccess」を 付与したら、「ユーザーの作 成」をクリックします。
124. • ユーザーの追加が終わりまし た。ここで、「アクセスキー ID」「シークレットアクセス キー」を忘れないようにメモ しておくか、CSVファイルを ダウンロードします。 • ここで2つの値を控えそこね ると、2度と表示されません 。ご注意ください。
125. AWS CLIの設定を行い、S3へ配信する
126. AWS CLI •「AWS コマンドラインインターフェース」の略 •テキストで命令を行うことで、AWSの各種操作 ができる •なれるととても便利 •SSHを使います
127. • 次に、AWS CLIの設定を行う ために、EC2インスタンスへ SSH接続します。今回立ち上 げたEC2のElasticIPを確認 します。
128. • SSH端末ソフトで、EC2へア クセスします。ユーザー名は 「ec2-user」。秘密鍵とし て、先程EC2作成時に保存し たpemファイルを利用します 。 (画面はWindows + TeraTermの例です)
129. Mac の方 •https://goo.gl/S7JQGy
130. • EC2インスタンスへSSH接続 が成功しました。
131. • コマンドラインで 「aws configure」と打ち込 みます。アクセスキーID、シ ークレットアクセスキーを聞 かれるので、先ほど控えた値 を打ち込みます。「リージョ ン」の設定では 「ap-northeast-1」としま す。アウトプットフォーマッ トはそのままでOKです。
132. • 設定が終わったら 「aws s3 ls」と打ち込んで みましょう。先ほど作成した S3バケットの名前が確認で きれば、設定は正常に行われ ています。
133. • いよいよS3へデータ送信しま す。 aws s3 sync /data/file/static s3://みなさんのバケット名/と 入力しましょう。同期が始ま ります。 aws s3 sync /data/file/static s3://みなさんのバケット名/
134. • 同期が終わったら、S3のダ ッシュボードへ移動して、先 ほど作成したバケットをクリ ックしてみます。
135. • バケット内に、いま同期した ファイルが保存されているの がわかります。
136. • タブから「プロパティ」を選 び、先程設定した 「Static website hosting」 をクリックします。
137. • 「エンドポイント」という欄 に表示されているアドレスを コピーして、ブラウザに貼り 付けます。
138. • EC2で作成したhtmlが、S3 上で、ウェブサイトとして公 開されているのが確認できま す。
139. 実践的な運用のためのTIPS
140. 独自ドメインを利用したサイト運用の場合 •S3で独自ドメインを利用したサイトを運営する 場合、バケット名をドメイン名と同一にする必要 があります。 •http://docs.aws.amazon.com/ja_jp/AmazonS3 /latest/dev/website-hosting-custom-domain- walkthrough.html
141. 例：example.comというサイトを運用する場合
142. https://で始まるSSLによる運用の場合 •S3+CloudFrontが必要となります •S3=>CloudFront へコンテンツをデリバリー •AWS Certificate Manager を使ってCloudFront へSSL設定
143. 本日作成した環境のクリーンアップ
144. EC2の削除 • EC2の一覧から、本日作成し たインスタンスをチェックし て右クリック。 • ［インスタンスの状態］ =>［削除］ を行います。
145. Elastic IP の開放 • Elastic IPを選んだ後、本日 作成したElastic IPを選び、 右クリックして「アドレス関 連付けの解除」を行います。
146. • アドレスの関連付けが解除さ れたら、もう一度右クリック して、「アドレスの解放」を 選びます。これでElastic IP が解除されます。
147. • VPCを選び、今日作成した VPCを選択して右クリックし 「VPCの削除」を選択します 。
148. • S3へ移動して、本日作成し たバケットを選び右クリック をして「バケットの削除」を 選びます。バケット名の入力 を求められますので、バケッ ト名を入力して、削除します 。
149. • IAMへ移動して、ユーザーか ら本日作成したユーザーを選 び、上部のメニューから「ユ ーザーを削除」を選びます。
150. 本日のまとめ
151. •AWSにはさまざまなサービスが存在する •Amazon AMIを使うと、Movable Type が簡単に 起動できる •S3と組み合わせると、Movable Type の活用場面 がさらに広がる •Movable Type は、CMSとして広く使われている