Author Archives: H.Y

2017-03-16

AMP HTMLプロジェクトをローカルで編集するまで

挨拶

こんにちは!エンジニアのH.Yです。

結構前からAMP(Accelerated Mobile Pages)を導入するページを多く見かけるようになってきましたね。

朝日新聞デジタルさんや毎日新聞さん等々…

弊社Yomerumoでも導入しております。ぜひご覧ください。

さて、AMPにはamp-adという広告描画の仕組みが提供されていますが、これは弊社GMOSSPも昨年4月から対応しております。

今回はこのamp-adにGMOSSPをどのようにして導入したのか?を書いていこうと思います。

前提

  • CentOS6.x系

開発環境準備

環境構築方法はこちらに書かれているのですが、私がどうしたか、を書きます。

ここまで終わったら

http://localhost:8000/examples.build/ads.amp.max.html

にアクセスすれば各社のテスト広告が確認できます。
Ctrl+Cで抜けられます。

開発

https://github.com/ampproject/amphtml/pull/2814

弊社は上記のようなリリースをを行っています。
JS等に変更があれば
gulp build
gulp serve
し直せば変更後の物が確認できるので、思ったよりもカジュアルに開発できます。

実際のリリースは自分のGitHubアカウントにプロジェクトをForkしたものをcloneして編集して
そこにPUSHを行った後本家AMPHTMLにプルリクエストを出しております。

終わりに

いかがでしたか?
みなさんも良ければよく知られたAMPをローカル環境で動かしてみてください!

Category: AMP

2016-09-30

AmazonCloudFrontのInvaridation機能で20万円ぶっ飛ばした話

こんにちは!エンジニアのH.Yです。

皆様はAmazonCloudFront(以下 CF)をご存知でしょうか?
タイトルが不穏ですがこちらに触発されて私も書いてみようとなりました。
社内ブログで「会社に20万損させたよ」というエントリを書かせてもらえる弊社は寛大です。
ありがとうございます。そしてすいませんでした。ご迷惑おかけして申し訳ありません。

Invalidationって?


さて、CFを使用したことがある、という人でもInvalidation機能を使用したことがあるという人はあまり多くない印象があります。
ドキュメントはこちらです。
要は「指定されたパスの各CFエッジサーバに保存されているキャッシュを残りのキャッシュ時間に関係なく削除する機能」というものです。
詳しくはリンク先をご覧ください。

(今回損失を出す際に使用したのはAPIでしたが)Webコンソールを使用することでも本機能を使用することが出来ます。スクリーンショット_2016-09-26_午後7_27_40

 

AWSにログイン後、CFを選択します。スクリーンショット_2016-09-30_午後7_03_31

 

ディストリビューション一覧が表示されますので、キャッシュ削除したいオブジェクトがあるディストリビューションを選択し、「Distribution Settings」を押します。スクリーンショット_2016-09-30_午後7_03_40

 

詳細画面で「Invalidations」を選択し、「Criate Invaridation」を押します。

AWS4

削除したいパスを入力し、「Invalidate」を押せば直ちにオブジェクトのキャッシュ削除が開始されます。

どのようにして20万円損したのか


とあるサイトに動画を下図のような感じで配信する要件がありました。

system

①でFTP/PUTを受ける動画ファイルは不明なタイミングで内容が更新される可能性があります。
その際はCF上の動画キャッシュを更新する必要がある…と、言った状況でした。

と言ったこともあり、どうしようかと思っていたところInvalidationを発見し、料金・危険性等の確認を怠り使用したと言った流れです。

動画更新バッチは5分毎に叩かれ1回毎に約40個のパスをInvalidation処理し、約1ヶ月と少し放置した結果
60(分) * 24(時間) / 5(バッチ更新間隔) * 40(動画ファイル個数) * 35(日) = 約40万リクエスト
1リクエストによって$0.005ドルのコストですから約2000ドルかかってしまったというわけです

反省


結局ある程度古い動画が出ていても10分以内で更新されればいい、という判断が企画側で合ったため
対処方法に関してはCFのCache-Controlを10分程度に設定するだけで済みました…
仕様の確認不足というのもありましたが、それにしてもInvalidation処理の価格面に対する危険性をよく確認しなかったと言うのはエンジニアとして非常によろしくなかったと思っています。
まわりのエンジニアへの相談も不足していました

この機能のみならずですが、よくわからない機能を使用する前は自分での調査ももちろんですが慎重に検討・相談してから使用するよう心がけようと思います…

皆様は私のようなミスをしないよう気をつけてください
ではでは

Category: AWS

2016-03-28

GoogleAppEngine/Go入門

こんにちは!エンジニアのH.Yです。

皆様はGoogleAppEngine(以下 AppEngine)をご存知でしょうか?

自分でサーバ構築を行わずとも、コードを書いて所定の方法でデプロイをするだけでGoogleの強力なインフラ上でWebアプリケーションが作成できてしまう優れものです!

個人的には下記のようなところが素晴らしいと思っています

  • ある程度のアクセスまではずっと無料!
  • アクセス量に応じて自動的にスケーリング
  • GoのWeb環境を簡単に使用することが出来る

詳しくはこちらも御覧ください


個人的にWeb環境のGoを気軽に書けるというのは大きいです。

こういうのって大抵導入が大変でコードを書くまで時間がかかってイヤになっちゃうのですが、AppEngineは比較的簡単なので挫折しにくいですね!

今回はHello Worldをブラウザ上で表示するまでをやっていきます。

操作はWindowsで行いますが、恐らくMacでもほぼ大差ない操作で導入ができると思います!


# Pythonのインストール

https://www.python.org/downloads/

導入に際してPython2.xが必要ですので、上記サイトの「Download Python2.7.11」をダウンロード後起動し、手順に従ってインストールしてください

9bda8777ce40d49eebbdb38b37a4a7d7

インストール後コマンドプロンプトを開き

と出てくればOKです


# SDKのインストール

https://cloud.google.com/appengine/downloads?hl=ja#Google_App_Engine_SDK_for_Go

ここのページに下記のような部分があると思うので、環境に合わせてファイルをダウンロードZIPを解凍して。

93871edd82393717a30d9f8a47f76561

インストール後コマンドプロンプトを開きgoappと打ち

こんな感じでヘルプ一覧が出てくればOKです


# Google Cloud Platformプロジェクトの作成

https://console.cloud.google.com/?hl=ja

Googleアカウントにログインして、GoogleCloudPlatform画面を開くと右上にプロジェクト選択画面があるので「プロジェクトを作成」ボタンをクリックします

672d8a712055795575d0bbe38ca25d0f

すると下記のような画面が出てくるので、プロジェクト名を設定して、「作成」を押します。

この時「プロジェクトID」が後々必要になるのでどこかにメモしておいてください

2536ae018d48b45983021924fb66a1c4


# ソースコードの準備

最低限「main.go」とコンフィグファイルである「app.yaml」が必要です。

https://github.com/ekos/appengine_go_sample

上記にファイルを用意したので、参考にしてください。内容は↓のような感じになっています

「main.go」ですが今回はせっかくなのでフレームワークのmartiniを使用しています。Rubyで言うSinatraに当たるフレームワークらしいです(使ったこと無い)

12行目~14行目が http://example.com/ にマッチするルーティングを表しておりHello worldという文字列を返却してます。

15行目~17行目はサンプルとして http://example.com/hoge/huga へのルーティングが書いてあります。

AppEngineの様々なツールを使用するため外部メソッド内でAppEngineのコンテキストを使用する機会がよくあるので、コンテキストを引き渡す例も同時に書きました。

今回は全てのURLをGoスクリプトで処理するようにhandlersパラメータに書いてあります。

画像などにGoプログラムを通さず静的アクセスさせる場合はここに複数のURLパターンを書くことになります。

versionの整数値はデプロイするときのバージョンを指定することができ、指定したバージョンに即座に切り戻したりなんかが可能です。


# プロジェクトとリソースの紐付け

上記2ファイルを適当なディレクトリに設置し、コマンドプロンプトを開きます

上記の用にコマンドを打ってください。

<PROJECT_ID>には先ほどメモしておいたプロジェクトIDを

/path/to/project にはファイル設置したディレクトリを指定してください。

これを打つと自動的にブラウザが立ち上がり、認証画面が出てきますので、「認証」を押します。


# リソースのダウンロード

先ほどmain.goで使用していた

github.com/go-martini/martini

のような外部のライブラリを使用する場合、事前にローカルにライブラリをダウンロードする必要があります。

コマンドプロンプトを立ち上げ

のように打てばダウンロードできます。


# デプロイ前検証

AppEngine上にファイルをアップする前にローカルで検証することが可能です。

起動している間は

http://localhost:8080/

でアクセスが可能になります。

アクセスするとコマンドプロンプト上にアクセスログ/エラーログが流れ、起動している間にGoファイルを更新するとそれを自動的に検知しコンパイル、即座に確認できます!便利!

「Hello world!」がブラウザ上に表示されてれば成功です!


# デプロイ

下記コマンドでデプロイを行います。

デプロイが完了すれば

https://[PROJECT_ID].appspot.com/

でグローバルアクセスが可能になり、「Hello world!」がデプロイまえ検証と同じく表示されるはずです!


# おわりに

以上、走りでの説明でしたがいかがでしたか?

思ったより簡単に導入が済んでしまう・デプロイが簡単なので、コーディングに集中出来る環境が整うのではないかなと思っています。

みなさんもぜひトライしてみてください!

※ブログ掲載のプログラムのインストールは、自己責任で御願いします。インストール等の結果にかかるハードウェアの不稼働等は、 当ブログでは一切サポートしておりませんので、予め御了承下さい