Browserify から Webpack に移行した

ES2015 + React の開発環境を Browserify で構築していたけど、 近いうち CSS もバンドルすることになりそうなので、 Webpack に移行することにした。

ブログに手順をメモしておく。 新規にプロジェクトを作成するときも同じ手順でいけるはず。

npm で必要なパッケージをインストール。

# 実際は 1 行
$ npm install --save-dev webpack \
  webpack-dev-server \
  babel-core \
  babel-loader \
  babel-preset-es2015 \
  babel-preset-react \
  file-loader

Webpack の設定ファイル webpack.config.js はこんな感じで書いてみた。

module.exports = {
  entry: {
    javascript: __dirname + "/src/index.jsx",
    html: __dirname + "/src/index.html"
  },

  output: {
    path: __dirname + "/dist",
    filename: "bundle.js"
  },

  module: {
    loaders: [
      {
        test: /\.js[x]?$/,
        exclude: /node_modules/,
        loader: "babel",
        query: {
          presets: ["react", "es2015", "stage-1"]
        }
      },
      {
        test: /\.html$/,
        loader: "file?name=[name].[ext]"
      }
    ]
  },

  devtool: "source-map",

  resolve: {
    extensions: ["", ".js", ".jsx"]
  }
};

あわせて package.jsonscripts も修正しておく。

{
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  }
}

これで npm run build でビルドが、`npm start' で開発サーバーが起動できるようになった。 webpack-dev-server 便利。

Elasticsearch でバルクインサート

Elasticsearch の Python クライアントを使って、 CloudWatch からダウンロードしたメトリクスの データポイントを 1 件ずつ登録していたけど、さすがに遅い。 遅すぎる。

我慢して使えるレベルではなかったので、 Elasticsearch のバルクインサートを使って高速化を試みた。

# -*- coding: utf-8 -*-
import os
import sys
import json
from elasticsearch import Elasticsearch, helpers

ELASTICSEARCH_URL = "localhost:9200"
METRICS_ROOT_DIR = "/var/log/perform/my-app-name"
INSTANCES = [
    "rds",
]
METRICS = [
    "CPUUtilization",
    "DatabaseConnections",
    "DiskQueueDepth",
    "FreeableMemory",
    "FreeStorageSpace",
    "ReadIOPS",
    "WriteIOPS",
    "ReadLatency",
    "WriteLatency",
    "NetworkReceiveThroughput",
    "NetworkTransmitThroughput",
]


es = Elasticsearch(ELASTICSEARCH_URL)


def post_instance_metrics(dir_path, instance):
    for metric in METRICS:
        file_path = os.path.join(dir_path, metric + ".json")
        with open(file_path) as f:
            data = json.load(f)

            # バルクインサートするデータを作成
            actions = []
            for datapoint in data["Datapoints"]:
                actions.append({
                  "_index": instance,
                  "_type": metric,
                  "_id": datapoint["Timestamp"],
                  "_source": datapoint
                })

            # バルクインサート!!!!!
            helpers.bulk(es, actions)


for instance in INSTANCES:
    metrics_dir = os.path.join(METRICS_ROOT_DIR, instance)
    post_instance_metrics(metrics_dir, instance)

バルクインサートに変えることで、 30 分くらいかかっていたのが 1 分くらいに短縮した。 30 倍速い。 赤い彗星もビックリだ。

ASP.NET Core アプリケーションの Docker コンテナを Heroku で動かしてみた

はじめに

ASP.NET Core アプリケーションを Docker で動かすことができた。

tnakamura.hatenablog.com

そういえば、Heroku で任意の Docker コンテナを動かすことができるようになっていたな。 まだベータ版な上、制限もあるみたいだけど。

もしかしたら ASP.NET Core アプリケーションの Docker イメージを Heroku にデプロイして動かせるかも? やってみた。

いきなり結論

結論として Empty Web Application は動かすことができた。 Hello World を HTTP レスポンスのボディに書き込むだけのやつ。 ASP.NET Core MVC は動かせなかった。

なので、以下では Empty Web Application を動かした手順を書いていく。

Docker をインストール

Docker は正式版になったばかりの Docker for Mac を使う。

docs.docker.com

Empty Web Application を作成

yo でプロジェクトを新規作成する。

$ yo aspnet

     _-----_     ╭──────────────────────────╮
    |       |    │      Welcome to the      │
    |--(o)--|    │  marvellous ASP.NET Core │
   `---------´   │        generator!        │
    ( _´U`_ )    ╰──────────────────────────╯
    /___A___\   /
     |  ~  |
   __'.___.'__
 ´   `  |° ´ Y `

? What type of application do you want to create? Empty Web Application
? What's the name of your ASP.NET application? HelloAspNetCore
   create HelloAspNetCore/.gitignore
   create HelloAspNetCore/Program.cs
   create HelloAspNetCore/Startup.cs
   create HelloAspNetCore/project.json
   create HelloAspNetCore/web.config
   create HelloAspNetCore/Dockerfile
   create HelloAspNetCore/Properties/launchSettings.json
   create HelloAspNetCore/README.md


Your project is now created, you can use the following commands to get going
    cd "HelloAspNetCore"
    dotnet restore
    dotnet build (optional, build will also happen when it's run)
    dotnet run

生成された Dockerfile を修正

Heroku の Docker 対応はまだ制限があって、Dockerfile には CMD が必須。 また、ポートは Heroku が割り当てるやつを使わないといけない。

yo で生成したプロジェクトの Dockerfile を次のように修正した。

FROM microsoft/dotnet:latest

COPY . /app

WORKDIR /app

RUN dotnet restore

RUN dotnet build

#EXPOSE 5000/tcp

CMD dotnet run --server.urls http://0.0.0.0:$PORT

Heroku プラグインをインストール

heroku toolbelt をインストールしていなければ、インストールしておく。

toolbelt.heroku.com

heroku-container-registry プラグインを使う。

$ heroku plugins:install heroku-container-registry

Heroku にデプロイ

<app_name> には Heroku 上で作成したアプリケーション名を指定する。 自分はテスト用に作ったアプリケーションを使いまわすことが多いのもので。

$ heroku container:login
$ heroku container:push web --app <app_name>

を実行すると、Dockerfile をもとに Docker イメージが作成され、 それが Heroku の Docker レジストリにプッシュされているように見える。

$ heroku open --app <app_name>

でブラウザを起動すると、Hello world が表示された。

f:id:griefworker:20160824001313p:plain

ちなみに ASP.NET Core MVC

yo で ASP.NET Core MVC のプロジェクトを生成して、 同じように Dockerfile を修正してデプロイしてみたが、 アプリケーションの起動に失敗していた。

heroku logs でログを見たところ、NuGet パッケージのリストアで失敗していた模様。 パッケージを resolve できてないみたいだった。

Empty Web Application から1つずつパッケージを増やしていって、 どのパッケージが原因か特定しようとしたけど、 さすがに数が多くて時間切れ。

そもそも、なんでリストアが実行されたんだろう? NuGet パッケージダウンロード済みの Docker イメージをデプロイしたんじゃないのか? Docker の勉強が足りてないんで、自分のやり方が悪かった可能性も十分ある。

時間が空いたときに再挑戦、するかもしれない。

エルボラーチョ

大名にあるメキシコ料理店『エルボラーチョ』は、 夜のみの営業な上に、小さい子供連れで行くようなところじゃない。 行きたい店だったけど当分縁が無さそうだなと思っていたら、 PARCO 新館にも出店してるじゃありませんか。 こちらはランチもやっていたので、会社の昼休みに行ってみた。

なにぶんメキシコ料理初めてなもので、何を食べるべきなのか皆目見当が付かなかった。 ここは無難に一番人気の『鶏モモ肉のメキシカンソテー』を注文。

鶏肉は表面がパリッと焼いてあって香ばしかった。 そのまま食べても美味いし、サルサソースをつけてトルティーヤで巻いて食べても美味い。 トルティーヤって意外と厚みあるんだな。もっとペラペラなのかと思っていた。 サルサソースは程よいスパイシーさ。

これにサラダとスープも付いていた。予想以上のボリュームでお腹はもうパンパン。 メキシコ料理初めて食べたけど、結構口に合うもんだね。

関連ランキング:バル・バール | 天神駅西鉄福岡駅(天神)天神南駅

きわみやごはん

行きたい店のストックがだいぶ無くなってきたので、 ジュンク堂でグルメ本をパラパラめくっていたら、 たまたま目に入った『きわみやごはん』の『和牛肉とろ飯』の写真に心奪われてしまった。

『きわみやごはん』は PARCO 新館にある、『極みや』の系列店。 夜なら並ぶことは無さそうだし、昼と夜で値段変わらないみたいなので行ってみた。 お目当てはもちろん『和牛肉とろ飯』。

肉は生ではなくて、低温調理されたローストビーフらしい。 つまりローストビーフ丼みたいなものか。 ご飯の上に肉を敷いて、中央に卵を載せたら完成。

肉とろは、まさにトロのような口溶け。 マグロのトロは何度か食べたことあるけど、まさしくあんな感じ。 肉とろだけ食べても美味いし、ご飯と一緒に頬張っても美味い。 そして卵の黄身を潰してまぜたら、濃厚な卵かけご飯の完成。 これまた絶品だった。 卵の主張が結構強いので、黄身を潰す前に十分肉とろを味わっておいたほうがいい。

関連ランキング:和食(その他) | 天神駅西鉄福岡駅(天神)天神南駅

釜喜利うどん

豊前裏打会の麺に出会ってから、自分の中で空前のうどんブームが起きている。 今回は前から気になっていた『釜喜利うどん』に行ってみた。

気温が暑いので、冷たい『すだちかけうどん』にするか迷ったけど、 定番の『ごぼう天うどん』と『ミニカツ丼』のセットを注文。

麺は裏打会とはまた違っていて、もちっとしていた。のど越しもいい。 汁はかなり上品な味わい。最初薄味だなと思ったら、飲み進めるうちに舌に感じる旨味が増していった。

ミニカツ丼は、こちらもうどん屋のカツ丼としては上品な味付け。 カツ揚げ具合が申し分ない。 そして特に肉質が良い。ヒレ肉なのかな。超好みのカツだった。

ごぼう天うどん美味しかった。でもそれ以上にカツ丼が気に入った。 最近食べたカツ丼の中で一番美味かった。 次はカツ丼を食べにくるかもしれないな。

関連ランキング:うどん | 赤坂駅薬院大通駅西鉄福岡駅(天神)

稚加榮

ヘルシーなものが食べたい。 体が魚や野菜を求めている気がする。 魚や野菜でヘルシーといったら和食だな。

大名にある料亭『稚加榮』の和定食を食べに行ってみた。 和定食は限定 500 食なので開店 5 分前に行ったら、既に 10 人以上並んでいて焦ったが、 席数が多かったので開店直後に入れた。

今回のランチタイムは和定食のみの提供だったので、それを注文。 刺身に天ぷら、煮魚に茶碗蒸し、揚げだし豆腐に味噌汁、あとご飯。 豪華だ。

さすが料亭だけあって、味付けはどれも上品で美味かった。 煮魚なんかは冷めても、まったく味濃く感じることなく、最後まで美味しくいただけた。 チューブ入りの明太子もかけ放題で、ご飯のおかわりをしようか本気で悩んだ。 明太子は稚加榮が一番好きだな。

ランチで 1400 円というのは個人的に高い。 でもこの質と量で 1400 円というのはかなり安い。 大満足。 中央の生簀は子供も喜びそうだし、今度は家族で行くとしよう。

関連ランキング:魚介・海鮮料理 | 赤坂駅天神駅西鉄福岡駅(天神)