Quantcast
Channel: Node.jsタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8691

Dockerを使ったVue Laravelの環境構築でつまづいた話

$
0
0
はじめに ajax通信で無限スクロールを実装しようと思い、せっかくならとjQueryを使わずにVue.jsを導入しました。 その際の環境構築で躓いたので記事として共有します。 当方、全くの素人なのでツッコミがあればお願いします。 今回は、PHPコンテナにVue.jsをnpmでインストールする方法で行います。 エラー内容 実際にChrome開発者ツールに出力されたエラーは以下のとおりです。 console Refused to execute script from 'http://127.0.0.1:10080/js/app.js' because its MIME type ('application/octet-stream') is not executable, and strict MIME type checking is enabled. 私が調べた範囲は、いくつかの原因が見つかりました。このエラーが出た際は、Vue.jsが正常に読み込まれているかを確認するのが良さそうです。 私の場合ではPHPコンテナにNode.jsを直接インストールしていたため、再起動時に消えていたことが原因でした。 少し考えればわかることですが、私はここで躓いてしまいました。。。 開発環境 Dockerで構築したLEMP環境です。 docker-compose.yml version: "3.8" services: app: build: ./infra/php volumes: - ./backend:/work web: image: nginx:1.18-alpine ports: - 10080:80 volumes: - ./backend:/work - ./infra/nginx/default.conf:/etc/nginx/conf.d/default.conf working_dir: /work db: build: ./infra/mysql volumes: - db-store:/var/lib/mysql ports: - 33060:3306 pma: image: phpmyadmin/phpmyadmin environment: - PMA_HOST=db - PMA_USER=user - PMA_PASSWORD=password ports: - 8080:80 volumes: - pma-session-store:/sessions volumes: db-store: pma-session-store: こちらの@ucan-labさんの記事を参考に構築しました インフラ ・Nginx 1.18 バックエンド ・Laravel 8.4 ・PHP 7.4 導入するVue.js ・Vue.js 2.6 Dockerは、WSL2のDebianで動かしています。 解決方法 PHPコンテナのDockerfileを編集 以下2行をCOPY --from=composerの下に追記します。 Dockerfile COPY --from=node:12.14 /usr/local/bin /usr/local/bin COPY --from=node:12.14 /usr/local/lib /usr/local/lib バージョンは適宜調整してください。 コンテナの起動 shell : docker-compose up -d --build インストール appコンテナにVueとコンパイラをインストールし直します。 shell : docker-compose exec app bash app : apt update npm install npm install -D vue npm install -D vue-template-compiler npm run dev インストールの確認 app : npm list vue app /work `-- vue@2.6.12 再起動して、Vueが消えていないか確認 shell : docker-compose down docker-compose up -d docker-compose exec app bash app : npm list vue app /work `-- vue@2.6.12 Vue.jsのバージョンが表示されたら成功です!! これでChrome開発者ツールにもエラーは表示されなくなり、正常に動作しました。 参考文献

Viewing all articles
Browse latest Browse all 8691

Trending Articles