2017年2月21日 Movable Type for AWS ハンズオンの資料です。

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

2. •長内毅志
–2011年～ Movable Typeプロダクトマネージャー
–2014年～ ディベロッパーリレーションマネージャー
–ダンス、ジョギング、家族が大好きです。

3. • インターネットに接続できるか
• AWSのコンソール画面に入れるか
確認しましょう。
• AWSのアカウントが無い方は、急いで作るか、今回は内容を確認して、後
日試してみてください。

4. •https://goo.gl/oGXw0L

5. 本日のサマリ
• VPCを利用したネットワーク設定
• Movable Type for AWSを利用した仮想マシンの構築
• Elastic IP の設定
• セキュリティグループの設定
• Movable Type の立ち上げと公開、更新作業
• S3へのコンテンツ配信(SSHを使用します)
• 環境のクリーンアップ

6. 今回作成する環境
VPC
EC2
S3

7. VPCを利用したネットワーク設定

8. VPCとは
•バーチャル・プライベート・クラウドの略
•サブネットをオンライン上で設定できる
•社内ネットワークの一部のようにAWSを使うこともで
きる
•現在は、VPC上にしかEC2を構築することができない

9. AWSのコンソール
• AWSのトップページからコンソール
へサインインします。

10. サインインします
• サインイン画面で、ID・パスワードを
入力します。

11. • コンソール画面が表示されたら右
上のプルダウンでリージョンを指定
します。今回のハンズオンでは「ア
ジア・パシフィック（東京）」を使いま
す。

12. • VPC(Virtual Private Server)の設
定を行います。
検索欄に「VPC」と入力して、

13. • VPC(Virtual Private Server)の
設定を行います。
検索欄に「VPC」と入力して、
VPCの設定画面に移動します
。

14. • VPCのダッシュボードに移動した
ら、「VPCウィザードの開始」を選
択します。

15. • VPCウィザードが開始されます
。「1個のパブリックサブネットを
持つVPC」を選択して、次に進
みます。

16. • VPC名とアベイラビリティゾーン
を設定します。
VPC名はなんでも構いません
が、ここでは［handson］とします
。アベイラビリティゾーンは[ap-
northeast-1a]を選びます。

17. • VPCが正常に作成されます。

18. • 左メニューの［VPC］を選び、一
覧画面を表示します。いま作成
したVPC［handson］が表示され
ています。

19. Movable Type for AWSを利用した
仮想マシンの構築

20. EC2とは
• Amazon Elastic Compute
Cloudの略
（Amazon EC2）
• 仮想マシンをAWS上で立ち上
げることができる
• ウェブサーバーだけでなく、さ
まざまなサーバーを構築できる

21. • 左上のアイコンをクリックして、
ユーザーダッシュボードのトッ
プへ戻ります。検索から［ec2］
と入力して、EC2の設定画面へ
移動します。

22. • EC2ダッシュボードに移動しま
す。［インスタンスの作成］を選
びます。

23. • Amazonマシンイメージ(AMI)の
選択画面に変わります。メニュ
ーから「AWS Marketplace」を
選びます。

24. • AWS Marketplace の選択画面
に移動します。検索欄に
［Movable Type］と入力します。

25. • Movable Type のAMIが表示さ
れます。今回は「HVM、nginx」
を選びます。

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

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

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

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

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

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

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

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

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

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

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

37. Elastic IPの設定

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

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

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

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

42. • あ

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

44. • グローバルIPの関連付け画面
に変わります。［ネットワークイ
ンターフェース］を選びます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

63. Amazon S3へのコンテンツ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

80. • ユーザー名を任意に決めて、「
次のステップ」へ移動します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

105. 本日のまとめ

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