はじめに
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開発者ツールにもエラーは表示されなくなり、正常に動作しました。
参考文献
↧