【メモ】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」
こういう構成の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
にこのチェックを追加。
// @/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 => { // エラーレスポンスを受け取った時に呼び出されるコード }) }
無事捕捉することが出来ました。