Q&A
コンソールにエラーはでていませんか？
初投稿です。
質問内容がふわっとしたものになっているので、回答もふわっとしてしまうと思いますがそれでもかまいませんので、画面真っ白の原因になっていそうなこと（複数あれば複数）を教えてください。
現在の自分の状況
Vue.js(VueCLIを使っています)とDjango(REST Framework)を使ってWEBアプリを作っています。
ローカル環境である程度動くものができたのでそろそろ公開してみようと思い、VPSを使ってサーバーの設定、本番環境の構築をしています。
ここまでにやったこと
サーバーで使っているソフトウェアはubuntu,gunicorn,nginxです。
基本的にはUdemyにあるDjangoについて解説した動画の通りに、VPSを使ったWEBアプリ公開の手順をそのまま実行しました。
そのおかげで準備したサーバーのIPアドレスと独自ドメインをブラウザで入力すると、画面上にエラーは出ずサーバーに繋がっているようです。
しかし、ローカル環境で用意したアプリの画面は表示されず、ただの真っ白な画面が出てきました。
ページのソースを表示でHTMLを確認したところ、Djangoのindex.htmlが表示されているようです。
ただVueのファイルがちゃんと結びついてないので、なにも表示されないということでしょうか。
いずれにしてもローカル環境ではアプリの画面が表示されていたので本番環境でも動かせるようにしたいです。
教えてほしいこと
前置きが長くなってしまいましたが、画面真っ白の原因として考えられることをおおまかでいいので教えてほしいです。
またこちらはサーバーに関して無知に等しい初心者で、原因究明に必要な情報すらよくわからないので、見当違いな情報を出してごちゃごちゃしてもよくないと思い、詳細な状況は書きませんでした。（そもそもよく分からないので書けません）
ですが、回答者さんの方で詳しく知りたいサーバーの状況（実行してほしいコマンド等）、Django,Vueアプリのファイル構成等リクエスト頂けたらお答えします。
よろしくお願いします。
以下、質問の本筋とは少しそれます
個人的に原因だと思っていること
ブラウザからサーバーにアクセスしてエラーが出ていないということはサーバー側には問題がないのかなと思っています。
とは言いつつ、サーバーの基礎知識もないと感じたのでサーバーを使うなら常識的に知っておくべきことが書かれた本を２冊今日明日で読むつもりです。
画面は真っ白ですが一応HTMLも出力されています。
なのでおそらく、VueとDjango(REST Framework)の連携が上手くいっていないところに原因がありそうです。
なんで連携が上手くいっていないのか、連携が上手くいっていないのは具体的にどのファイルのどの行か、ローカル環境では上手くいったのに本番環境だとどうして上手くいかないのか。
分からないことが分からない状態になっているのが大変ですが、なんとかアプリ公開、そしてちゃんと動くというところまで持っていきたいです。
問題は他にもあった
今回のアプリを公開するうえでもう２つ問題が発生しています。
１つ目は「Djangoの管理画面(/admin)に行くとcssが適用されていない」
settings.pyで
STATIC_ROOT = os.path.join(BASE_DIR, 'static/')
を書いて、manage.py collectstaticを実行しましたが、cssが上手く適用されていません。
２つ目は「サーバーのIPアドレスと独自ドメインでブラウザの挙動が異なる」
IPアドレスを直接ブラウザに入れると画面は真っ白ですが、サーバーに紐づけた独自ドメインをブラウザに入れるとWelcome to nginx!の文字が出てきます。
これは明らかに独自ドメインの設定が上手くいっていないのではないでしょうか。
これを解消する（独自ドメインでもIPアドレスと同様の挙動になるようにする）方法もまだ分かっていません。
この２つに関しては少し時間を置いて解決しなければ、また今度質問を新しく作ろうと考えています。
Failed to load resource: the server responded with a status of 403 (Forbidden)
がstaticファイル内のcss,js,faviconに対して合計５件と、
Unchecked runtime.lastError: The message port closed before a response was received.
がサーバーのIPアドレスに対して１件ありました。
回答2件
0
自己解決
数日かかりましたが自己解決しました。
解決方法は、「サーバーを新しく立てて、この通りにしました。Ubuntuのバージョンも20.04にちゃんと合わせました。」
サーバーを立てた初期段階で起きたエラーは原因を考えてすぐ解決しなかったら、潔く最初からやった方が全然早いと思いました。
結局なにが原因で画面が真っ白になってたかはよく分からないですが、なんとかなってよかったです。
質問の下の方に書いた他２つの問題も全部解消されてスッキリしました。
投稿2021/09/20 08:13
編集2021/09/20 08:15総合スコア21
0
恐らく直接の原因は、HTMLファイルから必要なリソース（.js .css等）を取得する際にエラーになっているからかと思います。
ブラウザの開発者ツールでNetworkのタブを見ると、各リソースがすべてエラー、もしくは代わりにindex.htmlが返されている、などの状況になっていないでしょうか？
この原因の多くは、htmlを返しているサーバー部分や、権限周りの問題となります。
Vueをどのようにサーバーにデプロイしているのかわからないので具体的にはアドバイス出来かねますが、似たような原因の事例（nginxの時）をあげておきます。
https://qiita.com/kt215prg/items/2c0e133d99851b6ca1b5
投稿2021/09/15 04:04
編集2021/09/15 04:04
総合スコア38
URLの方法を試してみましたが、上手くいきませんでした。
URL先のやり方ではrailsを使っていて、djangoに上手く置き換えてできなかったかもしれません。
403forbiddenエラーが出ているので、確かにアクセス権限の部分が怪しいかもしれませんね。
他にもいろいろ調べてみます。
あなたの回答
tips
プレビュー
