Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

•長内毅志 –2011年～ Movable Typeプロダクトマネージャー –2014年～ ディベロッパーリレーションマネージャー エバンジェリスト –趣味 ダンス (ストリート、ジャズ) ジョギング (サブフォー) 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

今回作成する環境 VPC EC2 S3

Slide 6

Slide 6 text

Movable Type とは

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

商用CMSシェアナンバーワン(富士キメラ総研調べ)

Slide 10

Slide 10 text

ビジネスユーザーに絶大な支持 日経平均225社の 半数以上がMTユーザー 日経平均225社の 半数以上がMTユーザー

Slide 11

Slide 11 text

最新10件のブログ記事をリンク付きで生成

Slide 12

Slide 12 text

特徴1 •静的生成でhtmlを出力 (スタティックパブリッシング) •動的生成も対応可能 (ダイナミックパブリッシング)

Slide 13

Slide 13 text

•動的、静的生成どちらも対応することで、様々な サーバー構成に対して柔軟に対応できる

Slide 14

Slide 14 text

基本的な構成 公開サーバー兼 CMSサーバー 管理者 閲覧者 (サイト訪問者)

Slide 15

Slide 15 text

ステージング環境 ステージング サーバー兼 CMSサーバー 公開 サーバー 管理者 閲覧者 (サイト訪問者)

Slide 16

Slide 16 text

冗長構成 CMS サーバー 公開 サーバー （冗長構成） ロード バランサ

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

• VPCのダッシュボードに移動し たら、「VPCの作成」を選択し ます。

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

[リージョン][アベイラビリティゾーン]とは • リージョンは、世界の[どの地域] のAWSを使うか、という概念 • アベイラビリティゾーンは[地域 内に分散している拠点]、という 概念 • リージョンの中にアベイラビリテ ィゾーンが複数存在する http://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/using-regions-availability-zones.html

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

• Movable Type のAMIが表示 されます。Ver 6 と7の2種 類があるので、バージョンは 7を。 • ウェブサーバーは「nginx」 を選びます。

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

• 「タグの追加」をクリックします。

Slide 41

Slide 41 text

• キーは「Name」、値を［ handson］と記述し、次の手 順へ進みます。

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

Elastic IPの設定

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

• アカウント情報の設定画面が表示 されます。サインインに使うユー ザーネーム、メールアドレス、パ スワードなどを入力します。「 Use this as…」にチェックを入れ 、「Finish Install」をクリックし ます。

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

• ダッシュボードが表示されま す。本日のハンズオンのため に、最初のサイトを作成しま す。左メニューから「システ ム」をクリックします。

Slide 65

Slide 65 text

• システム設定の画面に移動し ます。左メニューから 「サイト」=>「新規」 をクリックします。

Slide 66

Slide 66 text

• サイトの作成画面に移動しま す。以下の設定をします。 • サイトテーマ =>Rainier • サイト名 =>適宜名前をつける

Slide 67

Slide 67 text

• 続けて設定します。 • タイムゾーン =>UTC+9 • 使用言語 =>日本語 • すべて設定したら「サイトの作 成」をクリックします。

Slide 68

Slide 68 text

• 作成が終わると、サイトの操 作画面に移動します。 • 左メニューもしくは全般設定 ページ内の「再構築」をクリ ックします。

Slide 69

Slide 69 text

• ポップアップウィンドウが開き、再構 築の操作画面が表示されます。 • 再構築とは、Movable Type からhtml を生成するための操作となります。 • 再構築ボタンをクリックします。

Slide 70

Slide 70 text

• 再構築が終了したら、「サイトを 見る」をクリックします。

Slide 71

Slide 71 text

• 本日のハンズオンで操作する サイトが公開されているのが 分かります。

Slide 72

Slide 72 text

• 左のメニューから 「記事」=>「新規」 をクリックします。 • 最初の記事作成画面が表示さ れます。

Slide 73

Slide 73 text

• タイトルと本文を入力して、右メ ニューの「公開」ボタンをクリッ クします。

Slide 74

Slide 74 text

• 公開が終わったら、サイトを もう一度見てみましょう。 • 今公開した記事が、新たに反 映されています。

Slide 75

Slide 75 text

コンテンツタイプを触ってみる

Slide 76

Slide 76 text

素材ファイルをダウンロード

Slide 77

Slide 77 text

• 解凍すると[01_MTGram] [02_recipe] の2フォルダが展開されます

Slide 78

Slide 78 text

フォルダ内のファイルを確認しましょう •01_MTGram –mtgram.html –サンプル写真

Slide 79

Slide 79 text

写真ギャラリーを開発する

Slide 80

Slide 80 text

開発するもの • 写真ギャラリー「MTGram」 • 写真「だけ」を登録していくウェブサービス

Slide 81

Slide 81 text

• 左メニュー [コンテンツタイプ] =>[新規]を選び、名前を「 MTGram」とします。

Slide 82

Slide 82 text

• 画面右部から[画像アセット] を選び、中央にドラッグアンド ドロップします。名前を「画像 」と指定します。[このフィー ルドは必須ですか？]をオンに します 。

Slide 83

Slide 83 text

• ユーザーに新規イメージのア ップロードを許可します。 終わったら[保存］ボタンをク リックします。

Slide 84

Slide 84 text

• コンテンツタイプがセーブされ たことを確認して、次に進みま す。

Slide 85

Slide 85 text

• 右部メニューから[デザイン ]=>[テンプレート]を選びま す。画面上部の選択肢から[ インデックス]を選び、新規 作成をクリックします。

Slide 86

Slide 86 text

• テンプレート名を[MTGram]と します。 • [mtgram.html]の中身をコピー &ペーストします。

Slide 87

Slide 87 text

• 出力ファイル名を [mtgram.html]とします • [変更を保存]ボタンを押してセ ーブし、[保存と再構築]ボタン をクリックします。

Slide 88

Slide 88 text

• 再構築が完了したら、右メニューから「公開さ れたテンプレートを確認」リンクをクリックし ます。

Slide 89

Slide 89 text

• MTGramのサービスページが 公開されています。写真が未 登録の状態なので、登録して いきましょう。

Slide 90

Slide 90 text

• 右メニューから[コンテンツデ ータ] => [MTGram]を選びま す。 • [MTGramを作成]を選びます 。

Slide 91

Slide 91 text

• データ入力画面に変わります 。[データ識別ラベル]を入力 します。[画像]から［アセッ トを選択］を選びます。

Slide 92

Slide 92 text

• 写真挿入画面が表示されるので、 任意の画像をアップロードします 。

Slide 93

Slide 93 text

• 画像が選択されたことを確認 して、［挿入］ボタンをクリ ックします。

Slide 94

Slide 94 text

• 画像の挿入が終わったら「公 開」ボタンを押します。

Slide 95

Slide 95 text

• 公開ができたら、同じ要領で何枚 か写真を登録していきましょう

Slide 96

Slide 96 text

• 先程公開したインデックステンプレート「MTGram」 のページを確認します。 • 写真ギャラリーが公開されているのがわかります。

Slide 97

Slide 97 text

No content

Slide 98

Slide 98 text

Amazon S3へのコンテンツ配信

Slide 99

Slide 99 text

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

Slide 100

Slide 100 text

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

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

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

Slide 104

Slide 104 text

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

Slide 105

Slide 105 text

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

Slide 106

Slide 106 text

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

Slide 107

Slide 107 text

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

Slide 108

Slide 108 text

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

Slide 109

Slide 109 text

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

Slide 110

Slide 110 text

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

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

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

Slide 114

Slide 114 text

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

Slide 115

Slide 115 text

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

Slide 116

Slide 116 text

IAMの設定

Slide 117

Slide 117 text

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

Slide 118

Slide 118 text

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

Slide 119

Slide 119 text

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

Slide 120

Slide 120 text

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

Slide 121

Slide 121 text

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

Slide 122

Slide 122 text

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

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

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

Slide 125

Slide 125 text

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

Slide 126

Slide 126 text

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

Slide 127

Slide 127 text

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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

Mac の方 •https://goo.gl/S7JQGy

Slide 130

Slide 130 text

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

Slide 131

Slide 131 text

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

Slide 132

Slide 132 text

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

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

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

Slide 136

Slide 136 text

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

Slide 137

Slide 137 text

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

Slide 138

Slide 138 text

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

Slide 139

Slide 139 text

実践的な運用のためのTIPS

Slide 140

Slide 140 text

独自ドメインを利用したサイト運用の場合 •S3で独自ドメインを利用したサイトを運営する 場合、バケット名をドメイン名と同一にする必要 があります。 •http://docs.aws.amazon.com/ja_jp/AmazonS3 /latest/dev/website-hosting-custom-domain- walkthrough.html

Slide 141

Slide 141 text

例：example.comというサイトを運用する場合

Slide 142

Slide 142 text

https://で始まるSSLによる運用の場合 •S3+CloudFrontが必要となります •S3=>CloudFront へコンテンツをデリバリー •AWS Certificate Manager を使ってCloudFront へSSL設定

Slide 143

Slide 143 text

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

Slide 144

Slide 144 text

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

Slide 145

Slide 145 text

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

Slide 146

Slide 146 text

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

Slide 147

Slide 147 text

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

Slide 148

Slide 148 text

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

Slide 149

Slide 149 text

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

Slide 150

Slide 150 text

本日のまとめ

Slide 151

Slide 151 text

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