form内のbuttonをクリックしたときに処理の途中でページのReloadが行われる

Code
js
2017-03-25

form内のbuttonをクリックするとページがReloadされて、
期待した動作をしてくれない問題にハマっていたのでメモ。

form内のbuttonをクリックした場合のイベントハンドラにて preventDefault() でページのReloadを防ぐ必要がある。

$("button").on("click",function(e){
e.preventDefault();
// 任意の処理
});

docker-syncでDocker-for-Macの遅い問題が解決した

Code
docker
2017-03-24

Dockerコンテナ側とホスト側であるMac間のファイル同期が致命的なぐらい遅かったのですが、docker-sync を使ったらかなり改善されました。

docker-syncとは

ホスト側のファイルをDockerコンテナ側へマウントさせることでファイル同期を実現するのではなく、ファイル変更のタイミングで rsync や union によるファイルの転送を行ってファイル同期を実現するライブラリです。

インストール

    sudo gem install docker-sync
    brew install fswatch
    brew install unison
    curl "https://raw.githubusercontent.com/hnsl/unox/master/unox.py" -o "/usr/local/bin/unison-fsmonitor" && chmod +x /usr/local/bin/unison-fsmonitor
    sudo easy_install pip && sudo pip install macfsevents

docker-syncs.ymlを作成

dockerc-compose.yml と同じディレクトリに docker-syncs.yml を作成してください。

version: '2'
options:
    compose-file-path: 'docker-compose.yml' //使用するdocker-compose.ymlを指定
    verbose: true

syncs:
  MY_VOLUME:
    src: './app'    // 同期元のディレクトリ ./app以下をマウント
    dest: '/app' // 同期先のディレクトリ

docker-compose.ymlを作成

version: '2'
services:
  server:
    build: ./app 
    volumes:
        - MY_VOLUME:/app
…

volumes:
  MY_VOLUME:
      external: true

以上でセットアップは完了です。

$ docker-sync start を実行するとファイルの同期を行ってくれます。デーモンで起動させたい場合は$ docker-sync-daemon startを実行してください。

最近はDocker上で開発しています。
導入した当初は学習コストの高さゆえ苦労しておりましたが、少しずつDockerの便利さを実感しております！

Node.jsを使ってWebブラウザからS3に直接アップロードするサンプルアプリを作った

Code
2017-03-18

s3-uploaderを作りました。ブラウザから直接ファイルをS3にアップロードできます。詳しくはREADMEを読んで下さい。

使い方

S3のバケットを作成

公開アクセスを許可するのを忘れないでください。

Bucket Policyの作成

Bucket Policyを作成してください。

    {
        "Version": "2012-10-17",
        "Statement": [
            {
                "Effect": "Allow",
                "Principal": {
                    "AWS": "*"
                },
                "Action": [
                    "s3:PutObject",
                    "s3:PutObjectAcl"
                ],
                "Resource": "arn:aws:s3:::YOUR_BUCKET_NAME/*"
            }
        ]
     }

server.jsを編集

PROFILE_NAMEを~/.aws/credentialsのプロファイル名, BUCKET_NAMEを先程作成したバケット名に書き換えてください。

アプリを実行

以下のコマンドでアプリを実行してください。

npm install
npm run app
npm run server
open index.html

Certbotを使ってHTTPSに対応する

Code
2017-03-16

SSL/TLS サーバ証明書の取得・更新作業を簡単に行えるCertbotを使用してHTTPSに対応したのでその手順をメモ。OSはalpinelinux,WebサーバにはNginxを使用しています。

Certbotをインストール

Certbotと諸々のパッケージをインストールします。

apk add  --no-cache --update  \
  python python-dev py-pip git wget vim \
  gcc musl-dev linux-headers \
  augeas-dev openssl-dev libffi-dev ca-certificates dialog \
  && rm -rf /var/cache/apk/*

nginxの設定ファイルを編集

今回はwebrootプラグインを使用して証明書の作成、更新を行うのでドメイン名/.well-knwon/acme-challengeのリクエストを受け取ったときに証明書のディレクトリを返すようにします。

http {

	
	server {
	  listen 80;
          location /.well-known/acme-challenge {
              default_type "text/plain";
              root   /etc/letsencrypt;
          }

	      location / {
	        proxy_pass YOUR_SERVER;
	        proxy_http_version 1.1;
	        proxy_set_header Upgrade $http_upgrade;
	        proxy_set_header Connection 'upgrade';
	        proxy_set_header Host $host;
	        proxy_cache_bypass $http_upgrade;
	      }
	}

     server {
        listen 443 ssl;
        server_name ドメイン名;
        ssl_certificate /etc/letsencrypt/live/ドメイン名/fullchain.pem;
        ssl_certificate_key /etc/letsencrypt/live/ドメイン名/privkey.pem;
        location / {
	        proxy_pass YOUR_SERVER;
        }
    }
}

SSL/TLS サーバ証明書の取得

certbotを使用すると秘密鍵・公開鍵・署名リクエスト（CSR）を手動で生成する必要はありません。これらの作業は、Certbot クライアントが自動的に行います。

certbot certonly  --webroot -w /etc/letsencrypt \
  -d ドメイン名 -m メールアドレス --agree-tos -n

証明書の更新を自動で行う

証明書の有効期限は90日なのでそれまでに更新する必要があるのでcronを使って定期的に更新を行います。

$ crontab e

# 毎日午前2時に更新を行う
# min hour day month weekday command
  0   2    *  *     *        certbot renew

どんな場合のときだとNullを返したほうがいいか、深く考えたことがないなと思ったのでいろいろ調べてみた。 Is it better to return NULL or empty values from functions/methods where the return value is not present?にとても有意義な情報がちりばめられていた。その中でも一番上の回答をしているJW8さんが下の内容を投稿していてとても参考になった。

Returning null is usually the best idea if you intend to indicate that no data is available. An empty object implies data has been returned, whereas returning null clearly indicates that nothing has been returned. Additionally, returning a null will result in a null exception if you attempt to access members in the object, which can be useful for highlighting buggy code – attempting to access a member of nothing makes no sense. Accessing members of an empty object will not fail meaning bugs can go undiscovered

要約

データを取得しようとして、データが存在しない場合にnullを返すのは意味があるので適切だけど、存在しないはずのプロパティにアクセスしようとしたりして予期しないエラーのときにnullを返すのはバグを隠蔽しているために不適切。

と書かれてあってとてもしっくりきた。