メンチカツ

ロースカツが好きです

Vue.jsでカウントアップするタイマーのコンポーネントをつくった

必要に駆られて夜な夜な急遽作ったのですがせっかくなので置いておきます。

props でタイマーのON/OFFをセットするよ。

<!-- Usage -->
<CountUpTimer :on-start="isStarted" />
<template>
  <div class="count-up-timer">
    <div class="time">
      {{ time }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'CountUpTimer',
  props: {
    onStart: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      totalSec: 0,
      timeKeeper: null
    }
  },
  computed: {
    time() {
      const hour = Math.floor(this.totalSec / 3600)
      const min = Math.floor((this.totalSec - hour * 3600) / 60)
      const sec = this.totalSec % 60
      const time = []
      if (hour > 0) time.push(`0${hour}`)
      time.push(`00${min}`.slice(-2))
      time.push(`00${sec}`.slice(-2))
      return time.join(':')
    }
  },
  watch: {
    onStart(started) {
      started ? this.start() : this.stop()
    }
  },
  methods: {
    start() {
      this.timeKeeper = setInterval(() => {
        this.totalSec++
      }, 1000)
    },
    stop() {
      clearInterval(this.timeKeeper)
    }
  }
}
</script>

【メモ】rails consoleで「Can't connect to MySQL server on '127.0.0.1'」

db:migrate は問題なくできる環境で、 rails console からのDB接続ができない。

$ bundle exec rails console

[1] pry(main)> Hoge.all
Mysql2::Error::ConnectionError: Can't connect to MySQL server on '127.0.0.1' (111 "Connection refused")
from /usr/local/bundle/gems/mysql2-0.5.2/lib/mysql2/client.rb:90:in `connect'

おかしいな?DBサーバー名は 127.0.0.1 じゃない値を設定しているのだけども。。

試行錯誤した結果、 springをオフにして実行したらDBにつながりました。

DISABLE_SPRING=1 bundle exec rails console

なんか腑に落ちないけど、同じ症状のひとがいたら試してみてください。

【メモ】docker-compose 環境の Ruby on Rails で bundler が利用できない

Dockerコンテナのなかで rails console すると起動出来ない。

$ rails console
Could not find gli-2.19.0 in any of the sources
Run `bundle install` to install missing gems.

bundle install しても治らない。

$BUNDLE_PATH が上書きされていた。

$ echo $BUNDLE_PATH
/usr/local/bundle # <= 正しいパス

$ cat ~/.bundle/config
---
BUNDLE_PATH: "vendor/bundle" # <= 上書きしてたパス

上書きしてたパスのファイルを削除したら治った!

$ rm ~/.bundle/config

去年も同じネタで嵌まっていた。

来年はこれで嵌まらないようにしたい。

【メモ】Visual Studio CodeでPHP CS Fixerが「php general error」

php-cs-fixer.phar もパス通したのに「php general error」が解決出来ない。

拡張機能の組み合わせの相性が悪かったらしく、インテリセンスを変更したらなおった。

PHP IntelliSense をやめて PHP Intelephense に変更。

docker-composeのNuxt.jsからAPIをコールしたら「[HPM] Error occurred while trying to proxy request」

f:id:easy-breezy:20191025170443p:plain

こういう構成のdocker-composeで、frontendコンテナ(Nuxt.js:localhost:3000)から

backendコンテナ(Laravel:localhost:8000)にAPIリクエストをしたら

[HPM] Error occurred while trying to proxy request /api/hoge from localhost:3000 to http://localhost:8000/

という504エラーが返ってきて、backendまで届いていない。。

これは フロントエンドの nuxt.config.js のproxy設定が間違っていて、

proxy: {
  '/api': {
    target: 'http://localhost:8000/api',
    pathRewrite: {
      '^/api/': '/'
    }
  }
},

を以下のように修正してリスタートしたらなおった。

proxy: {
  '/api': {
    target: 'http://backend:8000/api', # コンテナ名に変更!
    pathRewrite: {
      '^/api/': '/'
    }
  }
},

[HPM] Error occurred while trying to proxy request 、webフロントエンド作るたびに言われてる気がする。

【メモ】docker-composeで起動したNuxt.jsアプリに繋がらない

コンテナでは起動を確認できる( docker-compose exec [コンテナ名] bash で、 curl localhost:8080 とすると起動してればhtmlが返る )のに、ホスト側で見れない。

package.json を以下のように書き換えたら見られるようになった。

# これを
  "scripts": {
    "dev": "nuxt",
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

# こうじゃ!
  "scripts": {
    "dev": "HOST=0.0.0.0 PORT=8080 nuxt", # ココを変えた!
    "build": "nuxt build",
    "start": "nuxt start",
    "generate": "nuxt generate"
  },

【メモ】create-nuxt-appで失敗する

throw new SAOError(`Failed to install ${packageName} in ${cwd}`)

とか出て進まない。メッセージ違うけど、前もあったなこれ・・・

今回はESListを外したら成功しました。成功した組み合わせ置いておきます。

? Choose the package manager Yarn
? Choose UI framework Element
? Choose custom server framework None (Recommended)
? Choose Nuxt.js modules Axios
? Choose linting tools Prettier
? Choose test framework None
? Choose rendering mode Single Page App