メンチカツ

ロースカツが好きです

【メモ】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

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

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

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

【メモ】Nuxt.js: axiosでオフライン状態(NetworkError)を捕捉する

axiosでAPIにアクセスするとき、エラーレスポンスをハンドリングすることは出来るんだけど、接続エラーなどの、サーバーからレスポンスが何も帰ってこないエラー(ネットワークエラー)は onError にも onResponse にも入ってこない。

// @/plugins/axios.js

export default function({ $axios }) {
  $axios.onRequest(req => {
    // リクエスト前に呼び出されるコード
  })
  $axios.onResponse(res => {
    // 成功レスポンスを受け取った時に呼び出されるコード
    // 接続エラーはここにこない(レスポンス自体ないから)
  })
  $axios.onError(res => {
    // エラーレスポンスを受け取った時に呼び出されるコード
    // 接続エラーはここにこない(レスポンス自体ないから)
  })
}

一日考えた挙句、そうかリクエスト前にチェックすれば良いんだわということに気が付いた(遅)

window.navigator.onLine で、オンライン状態を確認できるので、onRequest にこのチェックを追加。

developer.mozilla.org

// @/plugins/axios.js
import Vue from 'vue'

export default function({ $axios }) {
  $axios.onRequest(req => {
    if (!window.navigator.onLine) {
      Vue.toasted.error( // オフライン時にAPIリクエストがあったときにtoastを表示するようにした
        '現在オフラインです。'
      )
      return Promise.reject(req)
    }
    // リクエスト前に呼び出されるコード
  })
  $axios.onResponse(res => {
    // 成功レスポンスを受け取った時に呼び出されるコード
  })
  $axios.onError(res => {
    // エラーレスポンスを受け取った時に呼び出されるコード
  })
}

無事捕捉することが出来ました。

【メモ】chromeアップデートしたら Unchecked runtime.lastError: The message port closed before a response was received.

Vue.js 開発環境で、chromeアップデートしたら

Unchecked runtime.lastError: The message port closed before a response was received.

がコンソールに出るようになった。

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

ぐぐる拡張機能のどれかが影響して出ているらしい。

でも、環境によって犯人が異なるみたい。

なので、インストール済みの拡張機能を少しずつオンオフしていくと、私の環境では、犯人は

 SkyChromeExtension

だった。

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

速攻オフって平安を取り戻した。