ZEITのnow(v2)でデプロイしたらドメインaliasを最新のデプロイに追従させる

nowでホスティングしていて、例えば『hogefuga-goyani001m.now.sh』みたいなユニークURLにaliasを貼って『awesome.hogefuga.jp』でドメイン設定してあるとする。

なんか変更があってnowコマンドで再度デプロイすると新しく『hogefuga-gree002w.now.sh』のように新しくユニークなURLが発行される。

この状態で『awesome.hogefuga.jp』にアクセスすると、ドメインエイリアスは最初の『hogefuga-goyani001m.now.sh』のほうを指したままで、あたらしい『hogefuga-gree002w.now.sh』を向いてくれない。

最新のデプロイに追従してほしい

結論から言うと

now.json

{
  "version": 2,
  "alias": "awesome.hogefuga.jp"
}

を書いて、

$ now --target production

でtarget指定してデプロイするとOK。

デプロイに成功したら自動でドメインエイリアスを最新のデプロイに再設定してくれるようになって、期待通りの動作をしてくれる。

ドキュメント

このコマンドについて書かれてはいるけど具体的に書かれていないのでわかってからわかるシリーズ。

zeit.co


ドメイン設定するときに参考になった記事

ちなみに僕はnowにドメイン移管せずにサブドメイン運用したかったのだけど、そもそものサブドメイン設定のやりかたについては、こちらの記事が非常にわかりやすかった。

blog.mktia.com

JavaScriptのオブジェクトのキーを角カッコ[brackets]で囲う記法について

オブジェクトのキーが [ ] ←これ に囲われている

見かけたことはありますか?僕はあります。

const obj = {
  [a]: 'foo'
}

こういうやつ

たまに見かけるけど頻繁には見ないのであんまり書くことも少なくて、ついどういう挙動だったか忘れてしまうシリーズ。

毎回なんだっけこれってなって、ググって、「あーそうだったそうだった」ってなってるのでもう自分のブログに書いとけばええやんという気持ち。なので書く。

名称は "Computed Property Names" という

らしい。MDNだと日本語訳で『計算されたプロパティ名』になっている。

挙動はMDNの例がすべてではあるがなんかわかりにくい…

ちなみにES2015から実装されたシンタックスである。

オブジェクトのキーに変数を直接書けて便利

オブジェクトのキー名を変数から参照したい場合があったりする。

"Computed Property Names"が無かった時代(ES5)

気持ちとしてはこう書きたいが……

const name = 'Rose'
const age = 23
const profile = {
  name = age
}

// Expect => {Rose: 23}
// Received => {name: 23}

ダメ

なので

var name = 'Rose'
var age = 23
var profile = {}
profile[name] = age

// profile => {Rose: 23}

キーに変数の中身を割り当てたい場合、ブラケット記法で迂回していた。

"Computed Property Names"がある時代(ES6+)

const name = 'Rose'
const age = 23
const profile = {
  [name] = age
}

// profile => {Rose: 23}

こういうことです

よかったですね。

Computedなだけにメソッド呼んだりもできる

const name = 'Rose'
const age = 23
const profile = {
  [name.toUpperCase()] = age // 大文字にしたい
}

// profile => {ROSE: 23}

toUpperCaseで大文字になって格納されている

よかったですね。

より実用的な例

『関数の引数から渡ってきた値をオブジェクトのキーにしてなんかやりたい』というときとかに使える。

例えばReactでstateの値をトグルしたいときがある。

state = {
  isReady: false,
  isLoading: false
}

toggleState = stateKey => () =>
  this.setState(prevState => ({ [stateKey]: !prevState[stateKey] }))

class componentの一部です

こういう"Computed Property Names"を利用したtoggleStateメソッドを用意しておくと便利で、

render() {
  <>
    <div onClick={this.toggleState('isReady')}>toggleIsReady</div> 
    <div onClick={this.toggleState('isLoading')}>toggleIsLoading</div> 
  </>
}

こういう感じに書けるので記述が少なくなって便利。


"Computed Property Names"、おぼえた。書いたのでもう忘れない気がする。

まあもしまた忘れたらここに自分で書いたんだから読めば来ればいいじゃんということになっている。

みなさんも忘れたら読みに来てください。