httpsサイトからhttpページヘのリンク時のエラー
経緯
これから勉強として新しくwebページを作ろうとしていました。
webサービスを１から作ります！part1
以前書いた記事になります。
その際ですが、cssではなくlessで書いたほうがスムーズに開発をすることができそうでしたので、lessを採用しました。しかし今回lessをトランスパイルする部分は作っていなかったので、cdnでless.min.jsを使うことでlessファイルを扱おうと思いました。調べていく中でURLが見つかったので、そのURLをscriptタグを使って呼び出すことで使うことにしました。
vagrant 上では動作した
vagrant 上でlessファイルを読み込むことができて実際にcssが適用されていたので、特に気にもせずに開発を進めていきました。ある程度の開発をしたので、サーバにデプロイしてみようかなと思い実行したところ、vagrant上での表示と異なっていました。思っていたのと違うと思いましたが、時間もなかったので、次回解決ということでその時は中断しました。
問題点と解決方法
問題点
時間が取れたので、問題点を探ることにしました。原因を特定は直ぐにできました。サーバではhttps化を進めていました。しかし、less.min.jsがおいてあるサーバーのURLがhttpのサーバーでしたので、そこでエラーが起こっていました。choromeの開発者ツールを見ることによってすぐに気づくことができました。
解決方法
ということで、早速検索をして、httpsサーバーのurlを検索して修正を行い、サーバにデプロイしたところvagrant上での表示と同じになっていました。無事解決することができました。
まとめ
今回の問題は、そこまで大きな問題でなくすぐに解決することができました。httpsのサイトからhttpのリンク等を書くときはこれから注意したいと思います。他にも解決方法があると思いますので、時間がある時に再度調べてみたいと思います。