Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Movable Type for AWS ハンズオン
Search
Takeshi Nick Osanai
February 27, 2019
Technology
0
200
Movable Type for AWS ハンズオン
Takeshi Nick Osanai
February 27, 2019
Tweet
Share
More Decks by Takeshi Nick Osanai
See All by Takeshi Nick Osanai
How DevRel should proceed with the breaking change project?
tosanai
0
120
AWS を利用した ウェブサイトホスティングと PowerCMS X
tosanai
1
840
プラットフォーム事業を推進するための開発者マーケティング
tosanai
0
46
MTクラウドハンズオン資料
tosanai
1
89
Movable Type クラウド版 ハンズオンセミナー
tosanai
0
240
20190508_DevRel_Meetup_Public.pdf
tosanai
0
730
Movable Type クラウド版 ハンズオン資料
tosanai
0
85
20190320_MTCloud_handson.pdf
tosanai
0
80
IndexedDBのラッパー「localoForage」を試してみた
tosanai
0
2.6k
Other Decks in Technology
See All in Technology
急成長中のWINTICKETにおける品質と開発スピードと向き合ったQA戦略と今後の展望 / winticket-autify
cyberagentdevelopers
PRO
1
160
現地でMeet Upをやる場合の注意点〜反省点を添えて〜
shotashiratori
0
530
君は隠しイベントを見つけれるか?
mujyun
0
300
いまさらのStorybook
ikumatadokoro
0
150
10分でわかるfreee エンジニア向け会社説明資料
freee
18
520k
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
IaC運用を楽にするためにCDK Pipelinesを導入したけど、思い通りにいかなかった話
smt7174
1
110
サイバーエージェントにおける生成AIのリスキリング施策の取り組み / cyber-ai-reskilling
cyberagentdevelopers
PRO
2
200
プロダクトエンジニアが活躍する環境を作りたくて 事業責任者になった話 ~プロダクトエンジニアの行き着く先~
gimupop
1
480
pandasはPolarsに性能面で追いつき追い越せるのか
vaaaaanquish
4
4.7k
Amazon FSx for NetApp ONTAPを利用するにあたっての要件整理と設計のポイント
non97
1
160
AWSコンテナ本出版から3年経った今、もし改めて執筆し直すなら / If I revise our container book
iselegant
15
4k
Featured
See All Featured
Gamification - CAS2011
davidbonilla
80
5k
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
A better future with KSS
kneath
238
17k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
150
How GitHub (no longer) Works
holman
311
140k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Designing for humans not robots
tammielis
249
25k
Into the Great Unknown - MozCon
thekraken
31
1.5k
The Pragmatic Product Professional
lauravandoore
31
6.3k
Transcript
Movable Type for AWS ハンズオン 2019年2月27日 シックス・アパート株式会社 長内 毅志
自己紹介 • 長内毅志 • ディベロッパーリレーションマネージャー • エバンジェリスト • AWS認定ソリューションアーキテクト –趣味
ジョギング、野球観戦 英語の勉強 (TOEIC 875, 英検準1級) 家族と過ごすこと
• インターネットに接続できるか • AWSのコンソール画面に入れるか 確認しましょう。 • AWSのアカウントが無い方は、急いで作るか、今回は内容を確認し て、後日試してみてください。
本日のサマリ • AWSとは • AWSの初期設定 • Movable Type の特徴 •
Movable Type 7をAWS上で立ち上げる • 新機能「コンテンツタイプ」 • 環境のクリーンアップ
今回作成する環境 VPC EC2 Internet
AWSとは
AWSとは •Amazon Web Services の略 •Amazonが自社のバックエンド技術をサービスと して提供 •2006年から事業開始 •世界の18地域で展開(2018年)
None
AWSの特徴 •サーバー、ネットワークサービス(IaaS) •画像解析、動画解析(AI) •そのほか、モバイル用、ゲーム用、管理ツールな ど用途別にサービスが細分化 •100以上のサービスがある
AWSの機能? •全部覚えるのは非現実的 •目的に合わせて学習するのが良い •WEB系で言えばIaaS、ストレージ、ネットワー クなど
AWSの初期設定
この項で行うこと •サインイン •管理画面の見方 •リージョンの切り替え •IAMユーザーの作成と設定
サインイン-管理画面の見方
AWSのコンソール •AWSのトップページか らコンソールへサイン インします。
サインインします •サインイン画面で、ID ・パスワードを入力し ます。
• AWSのコンソール画面が表 示されます
AWSコンソール画面の見方
リージョンの切り替え
•右上のプルダウンでリ ージョンを指定します 。今回のハンズオンで は「アジア・パシフィ ック(東京)」を使い ます。
リージョンとは? https://aws.amazon.com/jp/about-aws/global-infrastructure/ 世界中にあるAWSのサービス提供拠点 「どの地域のサーバー・サービスを使うか」
アベイラビリティゾーン]とは? •[地域内に分散している 拠点]、という概念 •リージョンの中にアベ イラビリティゾーンが 複数存在する •略称「AZ」 http://docs.aws.amazon.com/ja_jp/AWSEC2/latest/UserGuide/using-regions-availability-zones.html
IAMユーザーの作成
IAMとは • AWS Identity and Access Managementの略 • AWSの各サービスに対する 操作ユーザーを定義する機能
• IAMのダッシュボードに移動 したら「ユーザー」をクリッ クします。
• 「ユーザーを追加」をクリッ クします。
• ユーザー名を任意に決めます 。 • [アクセスの権限]は [AWSマネジメントコンソール へのアクセス]を選びます。
• [コンソールのパスワード]は [カスタムパスワード]を選び 、任意のパスワードを設定し ます。 • [パスワードのリセットが必 要]のチェックを外します。 • [次のステップ]に進みます。
• [アクセス許可の設定]で[既 存のポリシーをアタッチ]を 選びます。 • [AdministratorAccess] というポリシーを選びます。 • 見つからない場合は、検索フ ォームから探します。
• 次へ進みます。
• [タグの追加]画面では、特に 設定の必要がありません。 • そのまま次へ進みます。
• [確認]画面に移動します。 • [ユーザー名]、[AWSアクセ スの種類]、[管理ポリシー] を確認して、問題なければ[ ユーザーの作成]ボタンをク リックします。
• システム権限を持ったユーザ ーが新規に作成されます。 • [csvのダウンロード]をクリ ックすると、新規のサインイ ン用アカウント情報をダウン ロードできます。 • [サインイン用のURL]をクリ
ックしてみましょう。
• 今作成したユーザーアカウン トによるサインイン画面が表 示されます。 • アカウント名とパスワードを 入力してサインインします。
• 新規ユーザーによるサインイ ンが行われました。 • リージョン設定が東京になっ ているか確認しましょう。
なぜIAMユーザーを作るの? •初期アカウントは「root権限」を持つユーザー •root権限ユーザーの情報はできるだけ秘匿してお いたほうが良い •いつでも情報を変更できる別個の管理者カウント を作ることで、セキュアな運用を保つ
VPCの設定
VPCとは • バーチャル・プライベート・クラ ウドの略 • サブネットをオンライン上で設定 できる • 社内ネットワークの一部のように AWSを使うこともできる
• 現在は、VPC上にしかEC2を構築 することができない
• VPC(Virtual Private Cloud) の設定を行います。 • 検索欄に「VPC」と入力して 、VPCの設定画面に移動しま す。
• VPCのダッシュボードに移動 したら、「VPCウィザードの 起動」を選択します。
• VPCウィザードが開始されま す。「1個のパブリックサブ ネットを持つVPC」を選択し て、次に進みます。
• VPC名とアベイラビリティゾ ーンを設定します。 VPC名はなんでも構いません が、ここでは[handson]と します。アベイラビリティゾ ーンは[ap-northeast-1a]を 選びます。
• VPCが正常に作成されます。
• 左メニューの[VPC]を選び 、一覧画面を表示します。い ま作成したVPC[handson] が表示されています。
Movable Type for AWSを利用した 仮想マシンの構築
EC2とは • Amazon Elastic Compute Cloud の略 (Amazon EC2) •
仮想マシンをAWS上で立ち上げ ることができる • ウェブサーバーだけでなく、さま ざまなサーバーを構築できる
• 左上のアイコンをクリックし て、ユーザーダッシュボード のトップへ戻ります。検索か ら[ec2]と入力して、EC2 の設定画面へ移動します。
• EC2ダッシュボードに移動し ます。[インスタンスの作成 ]を選びます。
• Amazonマシンイメージ (AMI)の選択画面に変わりま す。メニューから「AWS Marketplace」を選びます。
• AWS Marketplace の選択画 面に移動します。検索欄に [Movable Type]と入力し ます。
• Movable Type のAMIが表示 されます。Ver 6 と7の2種 類があるので、バージョンは 7を。 •
ウェブサーバーは「nginx」 を選びます。
• 価格一覧が表示された場合、 右下の[Continue]を押して 次へ進みます。
• [インスタンスタイプの選択 ]画面に移動します。 [t2.micro]を選び、[次 の手順]へ移動します。
• [インスタンスの詳細設定] に進みます。[ネットワーク ]で、先程作成したVPC[ handson]を選びます。[次 の手順]へ進みます。
• [ストレージの追加]に進み ます。初期状態のまま、[次 の手順]へ進みます。
•「タグの追加」をクリックします。
• キーは「Name」、値を[ handson]と記述し、次の手 順へ進みます。
セキュリティグループの設定
セキュリティグループとは •AWSのサービスに設定するファイヤーウォール •接続可能なポート、接続元のIPアドレスの制限な どができる •セキュリティレベルを上げるため、とても大事な 設定です
• [セキュリティグループの設 定]へ移動します。[SSH] [http]の2つが許可されて いることを確認します。送信 元は[0.0.0.0/0]です。 [確認と作成]へ進みます。
• すべての設定が終了したら [作成]をクリックして次へ インスタンスを作成します。
• [キーペア]を作成するかど うかを聞かれます。今回のハ ンズオンではキーペアは利用 しません。 • [キーペア無しで続行]を選び 、チェックボックスにチェッ クを入れて[インスタンスの 作成]を行います。
• インスタンスの作成が開始さ れますので、しばらく待ちま す。
• EC2のダッシュボードに戻り ます。 • 左メニューから[インスタン ス]を選んでみましょう。い ま作成したインスタンスが立 ち上がります。
Elastic IPの設定
Elastic IPとは •グローバルIPアドレスを付与するためのサービス •EC2はシャットダウン=>再起動のたびにIPアド レスが変わる •Elastic IPを使うと、常に一定のグローバルIPが 使え、なにかと便利
• インスタンスの作成が終わっ たら、左メニューから [Elastic IP]を選びます。 [新しいアドレスの割り当て ]を選びます。
• [新しいアドレスの割り当て ]画面に移動するので、割り 当てを実行します。
• Elastic IPにより、グローバ ルIPが一つ割り当てられます 。
• 作成したIPアドレスを選択し て、マウスの右クリックをし ます。[アドレスの関連付け ]を選択します。
• グローバルIPの関連付け画面 に変わります。 • リソースタイプを[インスタ ンス]とします。 • インスタンスの選択欄から、 今作成したインスタンスを選 びます。
• 関連付けボタンを押します。
VPCの作成 •関連付けが終わりました。
インスタンスの起動 • インスタンスの一覧に戻って 、Elastic IPが割り当てられ ていることを確認します。
• インスタンスの一覧を確認し て、「インスタンスID」を確 認します。Movable Type の 起動には、このインスタンス IDを利用します。
• 割り当てられたIPアドレスを ブラウザに打ち込んで、アク セスしてみましょう。 Movable Type の初期画面が 表示されます。
Movable Type とは
Movable Typeとは • 10年以上利用されているブログ・CMS(通称MT) • MTタグ組み合わせでロジック生成 • テンプレートとDBが完全に分離している (MVCライク) •
プラグインで拡張可能 • どんなコードも生成可能
• ブログから数万ページに及び 大規模サイトまで 5万件以上の導入実績 ECサイト イントラサイト・WEB社内報 メディアサイト・企業オウンドメディア 会員制サイト・コミュニティサイト 実績 コーポレートサイト
5万件以上の導入実績 5万件以上! 5万件以上!
商用CMSシェアナンバーワン(富士キメラ総研調べ)
ビジネスユーザーに絶大な支持 日経平均225社の 半数以上がMTユーザー 日経平均225社の 半数以上がMTユーザー
最新10件のブログ記事をリンク付きで生成 <ul> <MT:Entries limit="10"> <li> <a href="<MT:EntryPermalink>"> <MT:EntryTitle> </a> </li>
</MT:Entries> </ul>
特徴1 •静的生成でhtmlを出力 (スタティックパブリッシング) •動的生成も対応可能 (ダイナミックパブリッシング)
•動的、静的生成どちらも対応することで、様々な サーバー構成に対して柔軟に対応できる
基本的な構成 公開サーバー兼 CMSサーバー 管理者 閲覧者 (サイト訪問者)
ステージング環境 ステージング サーバー兼 CMSサーバー 公開 サーバー 管理者 閲覧者 (サイト訪問者)
冗長構成 CMS サーバー 公開 サーバー (冗長構成) ロード バランサ
Movable Type の立ち上げと 公開、更新作業
• [Start Movable Type]を クリックします。インスタン スIDの入力を求められるので 、さきほど控えたインスタン スIDを入力します。
• アカウント情報の設定画面が表示 されます。サインインに使うユー ザーネーム、メールアドレス、パ スワードなどを入力します。「 Use this as…」にチェックを入れ 、「Finish Install」をクリックし
ます。
• すべての設定が終わったら、 Movable Type のインストー ルが始まります。「Sign in to Movable Type」という表
示が出たら、クリックして管 理画面に進みます。
• ダッシュボードが表示されま す。本日のハンズオンのため に、最初のサイトを作成しま す。左メニューから「システ ム」をクリックします。
• システム設定の画面に移動し ます。左メニューから 「サイト」=>「新規」 をクリックします。
• サイトの作成画面に移動しま す。以下の設定をします。 • サイトテーマ =>Rainier • サイト名 =>適宜名前をつける
• 続けて設定します。 • タイムゾーン =>UTC+9 • 使用言語 =>日本語 • すべて設定したら「サイトの作
成」をクリックします。
• 作成が終わると、サイトの操 作画面に移動します。 • 左メニューもしくは全般設定 ページ内の「再構築」をクリ ックします。
• ポップアップウィンドウが開き、再構 築の操作画面が表示されます。 • 再構築とは、Movable Type からhtml を生成するための操作となります。 • 再構築ボタンをクリックします。
• 再構築が終了したら、「サイトを 見る」をクリックします。
• 本日のハンズオンで操作する サイトが公開されているのが 分かります。
• 左のメニューから 「記事」=>「新規」 をクリックします。 • 最初の記事作成画面が表示さ れます。
• タイトルと本文を入力して、右メ ニューの「公開」ボタンをクリッ クします。
• 公開が終わったら、サイトを もう一度見てみましょう。 • 今公開した記事が、新たに反 映されています。
EBSのスナップショットを作成する
EBS(Elastic Block Storage)とは • Amazon EC2 インスタンスと組み合わせ て使用できる、永続的なブロックストレ ージボリューム •
サーバーやPCの「ディスク」に近い • 用途によって「汎用SSD」、高頻度のI/O 向けの「プロビジョンドIOPS」などがあ る
スナップショットとは • EBSのバックアップデータを取得できる 仕組み • 任意のタイミングで作成可能 • S3に保存可能 • 2回目以降のスナップショットは差増分
のみ保存する
• EC2のダッシュボードの左メニューから「ボリューム」をクリ ックします。
• [アタッチ済み情報]のID番号から、先程Movable Type のインスタン ス用EC2に使われているID番号を確認します。 • [チェックボックス]にチェックを入れ、[アクション]を選びます。
• [スナップショットの作成]を 選びます。
• 説明、キー、値を適宜設定して、[スナップショットの作成]をク リックします。
• [スナップショットの作成]が 成功したことを確認します。
• 左メニューから[スナップショット]をクリックします。 • 作成したスナップショットが存在していることを確認します。
• Movable Typeの管理画面か ら、追加で記事を何個か登録 してみましょう。 • 公開サイトに、記事が複数公 開されていることを確認しま す。
•スナップショットから、データを復元します。 •業務利用中のAWSで、EC2が複数ある場合などは 、慎重に操作を行ってください。 •もし操作に自信がない場合、この項目は飛ばして ください。
• 先ほど作成した EC2[handson]を選択します 。 • [アクション]=>[インスタン スの状態]=>[停止]を選びま す。
• インスタンスの停止を行うか どうか、確認メッセージが表 示されます。 • 本日のハンズオン用インスタ ンスで間違いないことを確認 し、[停止する]ボタンをクリ ックします。
• EC2インスタンスが停止したことを確認します。
• 左メニューから[ボリューム]をクリックします。 • 先程のEC2のID番号を確認して、アタッチされているボリュームを 「Detach(デタッチ)」します。
• [スナップショット]に移動し て、先ほど作成したスナップ ショットを選択します。 • [アクション]から[ボリュー ムの作成]を選択します。
• アベイラビリティゾーンが、 EC2と同じ「ap-northeast- 1a」であることを確認しま す。 • キーを[Name]、値を[mt- backup]としてボリュームの 作成を行います。
• ボリュームの作成が成功した ことを確認します。
• 左メニューから[ボリューム] を選びます。 • 先ほどスナップショットから 作成したボリューム[mt- backup]を選び、アクション から[ボリュームのアタッチ] を選びます。
• [インスタンス]は、ハンズオン用に作成したEC2を選びます。 • [デバイス]を[/dev/xvda]という文字列に変更します。 • 確認して[アタッチ]をクリックします。
• アタッチが完了したら、左メニューから[インスタンス]を選びます。 • ハンズオン用のEC2インスタンスを選び、[アクション]=>[インスタ ンスの状態]=>[開始]をクリックします。
• インスタンスの開始を実行し ます。
• インスタンスの状態が[running]になったら、ブラウザで先程公 開・更新を行ったサイトを見てみましょう。 • バックアップを行った状態に戻っていることが確認できたら、 バックアップデータからの復元は成功です。
コンテンツタイプを触ってみる
素材ファイルをダウンロード
• 解凍すると[01_MTGram] [02_recipe] の2フォルダが展開されます
フォルダ内のファイルを確認しましょう •01_MTGram –mtgram.html –サンプル写真
写真ギャラリーを開発する
開発するもの • 写真ギャラリー「MTGram」 • 写真「だけ」を登録していくウェブサービス
• 左メニュー [コンテンツタイプ] =>[新規]を選び、名前を「 MTGram」とします。
• 画面右部から[画像アセット] を選び、中央にドラッグアンド ドロップします。名前を「画像 」と指定します。[このフィー ルドは必須ですか?]をオンに します 。
• ユーザーに新規イメージのア ップロードを許可します。 終わったら[保存]ボタンをク リックします。
• コンテンツタイプがセーブされ たことを確認して、次に進みま す。
• 右部メニューから[デザイン ]=>[テンプレート]を選びま す。画面上部の選択肢から[ インデックス]を選び、新規 作成をクリックします。
• テンプレート名を[MTGram]と します。 • [mtgram.html]の中身をコピー &ペーストします。
• 出力ファイル名を [mtgram.html]とします • [変更を保存]ボタンを押してセ ーブし、[保存と再構築]ボタン をクリックします。
• 再構築が完了したら、右メニューから「公開さ れたテンプレートを確認」リンクをクリックし ます。
• MTGramのサービスページが 公開されています。写真が未 登録の状態なので、登録して いきましょう。
• 右メニューから[コンテンツデ ータ] => [MTGram]を選びま す。 • [MTGramを作成]を選びます 。
• データ入力画面に変わります 。[データ識別ラベル]を入力 します。[画像]から[アセッ トを選択]を選びます。
• 写真挿入画面が表示されるので、 任意の画像をアップロードします 。
• 画像が選択されたことを確認 して、[挿入]ボタンをクリ ックします。
• 画像の挿入が終わったら「公 開」ボタンを押します。
• 公開ができたら、同じ要領で何枚 か写真を登録していきましょう
• 先程公開したインデックステンプレート「MTGram」 のページを確認します。 • 写真ギャラリーが公開されているのがわかります。
None
環境のクリーンアップ
EC2の削除 • EC2の一覧から、本日作成し たインスタンスをチェックし て右クリック。 • [インスタンスの状態] =>[削除] を行います。
Elastic IP の開放 • [Elastic IP]から、本日作成 したElastic IPを選びます。 右クリックして「アドレス関 連付けの解除」を行います。
• すでに関連付けが解除されて いる場合、そのまま次に進み ます。
• アドレスの関連付けが解除さ れたら、もう一度右クリック して、「アドレスの解放」を 選びます。これでElastic IP が解除されます。
• [ボリューム]を選び、本日作成したボリュームを選択します。 • [アクション]から、[ボリュームの削除]を行います。 • 使用中の別ボリュームを削除しないよう、ご注意ください。
• [スナップショット]から、本日作成したスナップショットを選択し ます。 • [アクション]から、[削除]を選び実行します。
• VPCを選び、今日作成した VPCを選択して右クリックし 「VPCの削除」を選択します 。
• 一度サインアウトを行い 「ルートアカウント認証情報 を使用してサインイン」を選 択します。 • 本日最初に使った、AWSの 管理ユーザーでログインし直 します。
• IAMへ移動して、ユーザーか ら本日作成したユーザーを選 び、上部のメニューから「ユ ーザーを削除」を選びます。
本日のまとめ
•AWSにはさまざまなサービスが存在する •Amazon AMIを使うと、Movable Type が簡単に 起動できる •Movable Type は、CMSとして広く使われている