0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

サーバレスでサンタを追いかけよう!

Posted at

Merry Christmas !

ホッホゥー 良い子のみんな明日は待ちに待ったクリスマスじゃぞ。
ワシは今日からみんなにプレゼントを配るのに大忙しじゃ。

…ということでServerless Adventカレンダー(2)12/24にエントリした以上はクリスマスっぽいことをせねばならぬという謎の使命感でネタを考えました。

何かサンタっぽいもの…ということで

  • AWS Rekognitionでサンタと髭面泥棒を見分ける「Santa or Thief」
    • →Rekognitionの個人識別能力が素晴らしすぎてサンタさんも泥棒も個人個人になってしまって断念
  • サンタさんにお願いするといつの間にやらAmazonに注文されているサービス
    • →そもそもAmazonをWrapするサービスを世に出すと怒られそう

というくだらないネタを考えて断念しました。

ということでGoogle Santa TrackerAWS S3 WebHostingで動かすという「マジそれサーバーレス扱いかよ!」というネタで挑みます。そして砕け散ります。

前提

以下のものが必要です。

  • Docker
  • node.js v4以上

まずは自分の手元で確かめる

$ git clone https://github.com/NewGyu/qiita-xmas.git
$ cd qiita-xmas
$ docker-compose up
:
:
Attaching to xmas_santa_1, xmas_viewer_1
xmas_santa_1 exited with code 0

これによって行われることは、

  1. santatrackerのソースのビルド
    10分くらいかかるので気長に待ちましょう
  2. ビルドされたものをnginxでホスティング

です。

Attaching to ...が出たら完了で、 http://localhost:3000 にアクセスしましょう。

サンタさんを公開する

S3バケットを作る

自分のドメイン名を設定する

infra/template/index.jsの下記の部分を自分の所有するドメインに変更してください。

index.js
const DomainName = "xmas.kinoboku.net";

※事前にRoute53にHostedZoneを作ってNSレコード、SOAレコードを登録しておいてください。

参考: http://qiita.com/sadayuki-matsuno/items/4c371ba984d9b22b3737#2%E3%81%8A%E5%90%8D%E5%89%8Dcom%E3%81%ABroute53%E3%81%AEdns%E3%82%92%E7%99%BB%E9%8C%B2%E3%81%97%E3%81%A6%E3%82%B5%E3%83%96%E3%83%89%E3%83%A1%E3%82%A4%E3%83%B3%E3%82%92%E5%A7%94%E4%BB%BB%E3%81%99%E3%82%8B

CloudFormationの実行

S3バケットとRoute53のDNSレコードを作ります。

$ cd ./infra
$ npm install
$ AWS_PROFILE=newgyu npm start deploy

※ AWS_PROFILEに設定する値は自分の~/.aws/credentialsの定義に合わせてください

これでS3バケットが作成され、PublicなWebHostingが可能な状態となります。

S3にsanta-trackerの成果物を配置する

$ AWS_PROFILE=newgyu docker-compose -f publish.yaml up

これによって行われることは、

  1. santatrackerのソースのビルド
    10分くらいかかるので気長に待ちましょう
  2. ビルドされたものをs3 syncでS3バケットに配置

です。

http://xmas.kinoboku.net/ にアクセスするとSanta Tracker が動作します。

だがしかし!

悔しながら青い画面が出たきりでサンタさんの村は出てきません。。マジつらい。

ChromeのDeveloper Consoleを見ると

elements_en.js:16280
Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value)(intermediate value)(...) is not a function(…)(anonymous function) @ elements_en.js:16280

というメッセージが出ておりビルドしたSanta Trackerのソースにエラーがあるようです。
Santa Trackerのビルドはgulpfile.jsを見ていただくとわかるようにClosure Compilerで連結+minifyをしています。ここの処理で作られるelements_en.jsに何か問題があるようです。力尽きてしまったのでどなたか教えていただけると幸いです。

2015年版のSanta Trackerのソースには公式READMEどおりに素直にビルドできないいくつかの問題がありました。Dockerfileの中でパッチを当てて吸収したつもりなのですが、対処方法に間違っているところがあるのかもしれません。

Dockerfileでやっているパッチ内容を簡単に解説します。

1. 実はgulp-cliが必要

公式説明ではnpm installだけでいいぜ、となっているのですが、package.jsonのpost installでgulp-cliを必要としています。

2. Dockerコンテナ内でrootユーザーで動かすにはbowerにオプション指定が必要

bower installは非rootユーザー前提にしているらしく、rootユーザーで実行するには--allow-rootオプションが必要でした。
(これは私がDockerですべてを片付けようとして、めんどくさいからrootユーザーを使ったが故の問題です)

3. closure-compilerのjarにバージョン番号が付いている

gulp-closure-compiler./components/closure-compiler/compiler.jar というファイルを期待しているのですが、bowerでインストールした場合にファイル名が異なるようでシンボリックリンクを作りました。

4. そもそもコンパイルでコケる

Googleの担当によると「2016年版で直しとくよ!」ということらしい。


ということで結果的には残念ながらサンタ村が出てこないというトホホな事態に陥りましたが、みなさん良いクリスマスを!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?