form内のbuttonをクリックしたときに処理の途中でページのReloadが行われる
form内のbuttonをクリックするとページがReloadされて、
期待した動作をしてくれない問題にハマっていたのでメモ。
form内のbuttonをクリックした場合のイベントハンドラにて preventDefault() でページのReloadを防ぐ必要がある。
$("button").on("click",function(e){ e.preventDefault(); // 任意の処理 });
docker-syncでDocker-for-Macの遅い問題が解決した
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に直接アップロードするサンプルアプリを作った
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に対応する
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