2017年3月14日 ハンズオン資料です

1. Movable Type for AWS ハンズオン
2017年3月14日
シックス・アパート株式会社
長内 毅志

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. •https://goo.gl/dhRlqB

7. Movable Type とは

8. Movable Typeとは
• 10年以上利用されているブログ・CMS(通称MT)
• MTタグ組み合わせでロジック生成
• テンプレートとDBが完全に分離している
(MVCライク)
• プラグインで拡張可能
• どんなコードも生成可能

9. • ブログから数万ページに及び
大規模サイトまで
5万件以上の導入実績
ECサイト
イントラサイト・WEB社内報
メディアサイト・企業オウンドメディア
会員制サイト・コミュニティサイト
実績
コーポレートサイト
5万件以上の導入実績
5万件以上！

10. ビジネスユーザーに絶大な支持
日経平均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-1]を選びます。

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が表示さ
れます。今回は「HVM、nginx」
を選びます。

36. • 価格一覧が表示された場合、
右下の[Continue]を押して次へ
進みます。

37. • ［インスタンスタイプの選択］画
面に移動します。
［t2.micro］を選び、［次の手順］
へ移動します。

38. • ［インスタンスの詳細設定］に
進みます。［ネットワーク］で、
先程作成したVPC［handson］を
選びます。［次の手順］へ進み
ます。

39. • ［ストレージの追加］に進みます
。初期状態のまま、［次の手順
］へ進みます。

40. • ［Add Tags］へ進みます。値を［
handson］と記述し、次の手順
へ進みます。

41. セキュリティグループの設定

42. セキュリティグループとは
•AWSのサービスに設定するファイヤーウォール
•接続可能なポート、接続元のIPアドレスの制限など
ができる
•セキュリティレベルを上げるため、とても大事な設定
です

43. • ［セキュリティグループの設定］
へ移動します。［SSH］［http］の
2つが許可されていることを確
認します。送信元は［0.0.0.0/0］
です。
［確認と作成］へ進みます。

44. • すべての設定が終了したら
［作成］をクリックして次へイン
スタンスを作成します。

45. • ［キーペア］を作成するかどうか
を聞かれます。キーペアはSSH
接続するときに使います。［新
しいキーペアの作成］を選び、
名前を
［handson］としてダウンロードし
ておきます。［インスタンスの作
成］をクリックします。

46. • インスタンスの作成が開始され
ますので、しばらく待ちます。

47. • インスタンスの作成が完了した
ら、左メニューから［インスタン
ス］を選んでみましょう。いま作
成したインスタンスが立ち上が
ります。

48. Elastic IPの設定

49. Elastic IPとは
•グローバルIPアドレスを付与するためのサービス
•EC2はシャットダウン=>再起動のたびにIPアドレスが
変わる
•Elastic IPを使うと、常に一定のグローバルIPが使え、
なにかと便利

50. • インスタンスの作成が終わったら、
左メニューから
［Elastic IP］を選びます。
［新しいアドレスの割り当て］を選び
ます。

51. • ［新しいアドレスの割り当て］画
面に移動するので、割り当てを
実行します。

52. • Elastic IPにより、グローバルIPが
一つ割り当てられます。

53. • 作成したIPアドレスを選択して
、マウスの右クリックをします。
［アドレスの関連付け］を選択し
ます。

54. • グローバルIPの関連付け画面
に変わります。
• リソースタイプを[インスタンス]
とします。
• インスタンスの選択欄から、今
作成したインスタンスをを選び
ます。
• 関連付けボタンを押します。

55. VPCの作成
• 関連付けが終わりました。

56. インスタンスの起動
• インスタンスの一覧に戻って、
Elastic IPが割り当てられてい
ることを確認します。

57. • インスタンスの一覧を確認して
、「インスタンスID」を確認しま
す。Movable Type の起動には
、このインスタンスIDを利用しま
す。

58. • 割り当てられたIPアドレスをブ
ラウザに打ち込んで、アクセス
してみましょう。Movable Type
の初期画面が表示されます。

59. Movable Type の立ち上げと公開、更新作
業

60. • ［Start Movable Type］をクリッ
クします。インスタンスIDの入
力を求められるので、さきほど
控えたインスタンスIDを入力し
ます。

61. • アカウント情報の設定画面が
表示されます。サインインに使
うユーザーネーム、メールアド
レス、パスワードなどを入力し
て先へ進みます。

62. • Movable Type で管理する最初
のウェブサイトの設定画面が表
示されます。ここでは、最後の「
Time Zone」を、UTC+9の日本
時間に変更します。それ以外
は初期状態で構いません。

63. • すべての設定が終わったら、
Movable Type のインストール
が始まります。「Sign in to
Movable Type」という表示が出
たら、クリックして管理画面に
進みます。

64. • ダッシュボードが表示されます
。[My First Website]を選んで、
ウェブサイトの操作を行います
。

65. • ウェブサイトの操作画面に移動
します。右上に丸矢印の「再構
築ボタン」があるので、これをク
リックします。

66. • 再構築用のポップアップ画面
が表示されます。「再構築」をク
リックして、htmlを生成しましょ
う。

67. • 再構築が完了したら「サイトを
見る」をクリックしてみましょう。

68. • 初期状態のデザインによるウェ
ブサイトが出力されていること
がわかります。

69. • ウェブサイトの管理画面に戻り
、右上の「新規作成」もしくは左
メニューの「記事」内にある「新
規」を選びます。

70. • 記事編集画面が表示されます
ので、最初の記事を書いてみ
ましょう。内容はなんでも構い
ません。入力が終わったら「公
開」ボタンを押します。

71. • 最初の記事が公開されます。ウ
ェブサイトを見てみましょう。

72. • 作成した記事が公開されてい
るのが確認できます。

73. Amazon S3へのコンテンツ

74. S3とは
•Amazon Simple Storage Serviceの略
•あらゆるファイルの保管場所として使える
•ウェブサーバーとしても利用できる

75. S3をウェブサーバーとして使うメリット
•アクセス負荷を気にする必要がない
–事実上ウェブサーバーが落ちない
–99.99%の可用性と、99.999999999%の堅牢性
•料金が安い
•キャンペーンサイトなどに向いている

76. S3でできないこと
•サーバーサイドスクリプトは使えない
–php、Java、Ruby、Perlなどは動かない
•JavaScriptはOK
–ブラウザ上でレンダリングするため

77. S3+Movable Type
•MTは、静的にhtmlを出力する
•S3に配信できる
•実は、とても相性が良い

78. • AWSのダッシュボードから「S3」
を検索して、移動します。

79. • Amazon S3のダッシュボードへ
移動します。「バケットの作成」
をクリックします。

80. • バケットの作成画面で、バケッ
ト名を任意に設定します。リー
ジョンはTokyoを選択します。

81. • [プロパティの設定]画面が表示
されます。そのまま[次へ]を押
します。

82. • [アクセス許可の設定]画面が
表示されます。そのまま[次へ]
ボタンをクリックします。

83. • [確認]画面が表示されたら
[バケットを作成]ボタンを押しま
す。

84. • 作成したS3バケットが確認でき
ます。いま作成したバケット名
をクリックします。

85. • タブから「プロパティ」を選びま
す。「Static website hosting」と
いうタイルをクリックします。

86. • 「このバケットを使用してウェブ
サイトをホストする」を選び、S3
上でウェブサイトを閲覧できる
ように設定します。インデックス
ドキュメントを「index.html」に指
定します。
• 指定が終わったら「保存」を押
して、設定を反映します。

87. • 次に「アクセス権限」の設定を
行います。「アクセス権限」=>「
バケットポリシー」をクリックしま
す。

88. • 以下のURLへ移動します。
https://goo.gl/y4Rz1t
今回利用するアクセスポリシー
があるので、すべてコピーしま
す。

89. • バケットポリシーへ、コピーしたコードを貼り付けます。貼り付ける際、
“Resource”: “arn:aws:s3:::handson-sample/*“
の「handson-sample」を、みなさんが作成したバケット名に変更して、保存を
押します。

90. • AWSのダッシュボードに戻り、「
IAM」を検索して移動します。

91. IAMの設定

92. IAMとは
• AWS Identity and Access
Managementの略
• AWSの各サービスに対する操
作ユーザーを定義する機能
• [S3]だけ操作できる人、
[EC2][S3]両方操作できる人な
ど、細かく権限設定できる

93. • IAMのダッシュボードに移動し
たら「ユーザー」をクリックしま
す。

94. • 「ユーザーを追加」をクリックし
ます。

95. • ユーザー名を任意に決めます
。
• [アクセスの権限]は[プログラム
によるアクセス]を選びます。
• 「次のステップ」へ移動します。

96. • 「アクセス権限」の設定画面に
移動します。「既存のポリシー
を直接アタッチ」を選びます。

97. • 検索ボックスに「S3」を入力す
ると、S3関連のアクセスポリシ
ーが表示されます。ここでは
「AmazonS3FullAccess」
を選びます。

98. • 「AmazonS3FullAccess」を付与
したら、「ユーザーの作成」をク
リックします。

99. • ユーザーの追加が終わりまし
た。ここで、「アクセスキーID」「
シークレットアクセスキー」を忘
れないようにメモしておくか、
CSVファイルをダウンロードし
ます。
• ここで2つの値を控えそこねる
と、2度と表示されません。ご注
意ください。

100. AWS CLIの設定を行い、S3へ配信する

101. AWS CLI
•「AWS コマンドラインインターフェース」の略
•テキストで命令を行うことで、AWSの各種操作ができ
る
•なれるととても便利
•SSHを使います

102. • 次に、AWS CLIの設定を行うた
めに、EC2インスタンスへSSH
接続します。今回立ち上げた
EC2のElasticIPを確認します。

103. • SSH端末ソフトで、EC2へアクセ
スします。ユーザー名は「ec2-
user」。秘密鍵として、先程EC2
作成時に保存したpemファイル
を利用します。
(画面はWindows + TeraTerm
の例です)

104. • EC2インスタンスへSSH接続が
成功しました。

105. • コマンドラインで
「aws configure」と打ち込みま
す。アクセスキーID、シークレッ
トアクセスキーを聞かれるので
、先ほど控えた値を打ち込みま
す。「リージョン」の設定では
「ap-northeast-1」とします。ア
ウトプットフォーマットはそのま
までOKです。

106. • 設定が終わったら
「aws s3 ls」と打ち込んでみまし
ょう。先ほど作成したS3バケッ
トの名前が確認できれば、設
定は正常に行われています。

107. • いよいよS3へデータ送信します。
aws s3 sync /data/file/static
s3://みなさんのバケット名/と入
力しましょう。同期が始まります。
aws s3 sync /data/file/static s3://みなさんのバケット名/

108. • 同期が終わったら、S3のダッシ
ュボードへ移動して、先ほど作
成したバケットをクリックしてみ
ます。

109. • バケット内に、いま同期したファ
イルが保存されているのがわ
かります。

110. • タブから「プロパティ」を選び、
先程設定した
「Static website hosting」をクリ
ックします。

111. • 「エンドポイント」という欄に表
示されているアドレスをコピー
して、ブラウザに貼り付けます
。

112. • EC2で作成したhtmlが、S3上で
、ウェブサイトとして公開されて
いるのが確認できます。

113. 本日作成した環境のクリーンアップ

114. EC2の削除
• EC2の一覧から、本日作成した
インスタンスをチェックして右ク
リック。
• ［インスタンスの状態］
=>［削除］
を行います。

115. Elastic IP の開放
• Elastic IPを選んだ後、本日作
成したElastic IPを選び、右クリ
ックして「アドレス関連付けの解
除」を行います。

116. • アドレスの関連付けが解除さ
れたら、もう一度右クリックして
、「アドレスの解放」を選びます
。これでElastic IPが解除されま
す。

117. • VPCを選び、今日作成したVPC
を選択して右クリックし「VPCの
削除」を選択します。

118. • S3へ移動して、本日作成した
バケットを選び右クリックをして
「バケットの削除」を選びます。
バケット名の入力を求められま
すので、バケット名を入力して、
削除します。

119. • IAMへ移動して、ユーザーから
本日作成したユーザーを選び、
上部のメニューから「ユーザー
を削除」を選びます。

120. 本日のまとめ

121. •AWSにはさまざまなサービスが存在する
•Amazon AMIを使うと、Movable Type が簡単に起動
できる
•S3と組み合わせると、Movable Type の活用場面がさ
らに広がる
•Movable Type は、CMSとして広く使われている