【Django入門】DjangoアプリをWeb開発環境で開発、公開するまでの手順-ステップ1(PaizaCloud)

※ 当サイトではアフィリエイト広告を利用しています。リンクは広告リンクも含みます。

この記事は約23分で読めます。

無料のWeb開発環境PaizaCloudでDjangoアプリを開発する簡単な手順になります。
この記事ではDjangoのプログラムの内容の解説はありません。
Djangoアプリをサーバー(Heroku)でデプロイ(公開)するために
必要な知識手順を簡単かつ詳細に解説していきます。
簡単なサンプルプログラムを用意してありますので、それを動かします。

私はまだ学習初めて日が浅いので解説内容について誤解しているところもあるかもしれません。
しかし初心者目線の解説になってますのでわかりやすいと思います。(2026/5/15その後、経験積んだので加筆してます。)

初心者が開発環境構築、Herokuへデプロイできることを目的にしています。(2026/5/15Herokuに関しては2022/11月末から有料になって、その後つかってないので確認しておりません。)

また静的ファイルについて重点的に書いていますので
そこではまっている人にも参考になると思います。
完成品お名前.comVPSにデプロイ
完成品Renderデプロイ(表示するまで数分かかることがあります。毎月20日~月末は停止します。)
2回に分けてます。続きはこちら。

【Django入門】DjangoアプリをWeb開発環境で開発、公開するまでの手順-ステップ2(GitHub、Git、Heroku)
PaizaCloudからGitHubとGitを使いHerokuへデプロイする方法です。GitとGitHubに関してはPaizaCloudからHerokuへデプロイするためにコードの移動手段として利用しますので、それぞれの詳しい解説はありませ…

Herokuは無料プランがなくなってしまったので今はこちらにデプロイしています。

Djangoの簡単なアプリ(Hello World!)作成からデプロイまでRenderで実践できます。

【Django入門】Render(無料プラン)のQuickstartsをWindows11でやってみる
RenderのQuickstarts/DjangoをpipとWindows11でやってみました。初心者は公式が書いてるやり方以外は、やらない方がいいと思います。しかし今回、私の環境では公式通りの手順でできないため、ご紹介するような形になって…

2022/12にパソコン買ったので今はパソコンに開発環境構築して使っています。下の記事参照。
ただ最初にPaizaCloudの環境でやってよかったのは、開発環境構築が失敗して動かないのか、プログラムがおかしくて動かないのかの切り分けが比較的容易な点です。開発の要領がわかるようになるので、自分のパソコンで開発環境構築するのも容易になります。何が必要で、これなんのために必要なのかとか、そういうところ。
ローカル環境でやりたい場合は、こちら↓を参考にしてください。

【Docker】Windows11でプログラミング環境構築(Python、Django、Vue)
パソコン買ったのでプログラミング環境を整えました。その様子です。Python、Django、Vueの環境を設定していきます。Docker導入でハマった点と解決策をご紹介します。追記(2023/11):最近、Docker DesktopがWi…

2024年現在は有料のVPSにデプロイしています。

お名前ドットコムVPSへ移行への道

2024/4お名前.comのレンタルサーバーからVPSへ移行したときの記録になります。

広告
MINISFORUM日本公式ストア

Djangoを動かす環境比較

ローカル環境、PaizaCloud、Herokuを比較すると

ローカル環境
Dockerなど
PaizaCloudHeroku
開発環境構築多少難しい簡単公開のみ(開発環境なし)
サービス(アプリ)の一般公開できない有料無料(有料もある) 有料
コードの保存できる無料だと1日無料でできる
パソコンスペックある程度必要
特にストレージ容量
関係ない関係ない

以上の無料、簡単、低スペックパソコンでもOKの観点から
PaizaCloudで開発、Herokuで公開の方法をおすすめとして、これから紹介します。
Herokuは2022/11/28から有料になりました😿。別のところ見つかったので記事にしました。
コードの保存が問題になりますが無料のGitとGitHubを使用すれば大丈夫です。
もうひとつPaizaCloudの無料版の欠点は、使わないとすぐ止まるというところです。
かなり使いづらいですが慣れます。止まった時はこちらを参考にしてください。(土日、止まりっぱしの時がたまにあります。)

Pythonで作ったものを公開(デプロイ)、Webサービスの基礎すべて無料でやってみた!【Django】
PythonでWebサービスを作り無料サーバーにアップするところまで紹介します。パソコンにインストすることなく無料のWEBサービスのみ使用大手でよくある無料だけどクレジットカード登録しないとアカウントができないとかもない。Django(We…

使用するもの
無料登録 PaizaCloud、Heroku、GitHub
無料ダウンロード Git、HerokuCLI(2022/4/中旬までは、この二つは不要でした。)

大まかな流れです。

  1. PaizaCloudで開発、動作確認
  2. コードをGitHubに保存
  3. 自分のパソコンのGitにコードをクローン(ダウンロード)
  4. 自分のパソコンのHeroku CLIでHerokuへデプロイ(アップロード)公開

PaizaCloudの環境構築

無料登録と数クリックだけで完了します。

PaizaCloud は無料インストールなしでPython、Djangoが使えます。
PaizaCloudに登録したら新規サーバー作成
サーバー名を適当な名前で入力
初期インストール&設定するものを選択してください」で
 Web開発:Djangoを選択
 データベース:PostgreSQLを選択もしくは何も選択しないでいい。
データベースを使用する場合(今回は使用しない)
PostgreSQLを選択しておかないと後でHerokuへデプロイできません。
新規サーバー作成で完了です。

503 Service Temporarily Unavailableとエラーが出てるかもしれませんが
関係ありません。エラーメッセージを閉じてください。
さっきも書きましたがPaizaCloudの無料プランは使いづらいです。
止まったらこちらを参考に使ってください。

これでコンテナが用意できました。
コンテナとは自分のパソコンに作った仮想環境と同じで
プログラムを実行できる環境と私はとらえています。
コンテナを調べるとやたらと難しい説明が多いですが使う分には、
こんなとらえ方で十分だと思います。
目次へ

プロジェクト、アプリ作成、settings.py変更

プロジェクト作成

PaizaCloudの左にあるターミナルをクリック
以下のコードを入力

hajimete_pjという名前でプロジェクトの作成
django-admin startproject hajimete_pj 

hajimete_pjディレクトリへ移動
cd hajimete_pj

このディレクトリの移動は重要です。
なぜなら以下のpythonで実行するmanage.pyはこのディレクトリにあるからです。
プロジェクトのディレクトリにいることを確認して操作してください。

アプリ作成

hajimete_appという名前でアプリ作成
python manage.py startapp hajimete_app

settings.py変更

settings.py変更
hajimete_pj/hajimete_pj/settings.pyをダブルクリック

以下のように2か所変更
・ホストを全部許可する。
・アプリを追加

ALLOWED_HOSTS = [] → ALLOWED_HOSTS = ['*']
(settings.pyのDEBUG = Trueのときは[]でもエラーにならないが、Falseにすると[]のままだとエラーになります。)

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
  'hajimete_app.apps.HajimeteAppConfig',      

#補足説明1 'hajimete_app', だけでも動きますが、Djangoの公式チュートリアルでhajimete_app/apps.pyにあるclass HajimeteAppConfig(AppConfig):のクラス名を追加
となっていたのでこうしています。

今後ファイルを変更したら各Window左上の保存をクリック。
車両通行止めと同じマークが出ている場合は保存完了してます。
ディレクトリを追加したのに表示されていない場合は▼をクリックして1回閉じ
▶をクリックすると出てきます。

今のディレクトリの状態はこうなってるはずです。

またINSTALLED_APPS = [に追加するものはアプリですが。
アプリとはpython manage.py startappで追加されたディレクトリ全体のものを指します。
自分で作ったpythonファイル(例jisaku.py)を追加したい場合、
ここに書かなければいけないのか悩むかもしれませんが。必要ないです。
それはアプリとして扱いません。
そういうファイルはアプリディレクトリ(hajimete_app)の下にファイル(jisaku.py)を追加して
ほとんどの場合views.pyで
from . import jisaku
という形で使ってください。
関数の呼び出し方は、こちらの記事が参考になります。
Pythonで”TypeError: ‘module’ object is not callable”エラー

サンプルコード

プロジェクト(hajimete_pj)のurls.pyを変更

from django.contrib import admin
from django.urls import path,include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('',include("hajimete_app.urls")),
]

アプリ(hajimete_app)のurls.pyは最初ないので
hajimete_appを右クリックして新規ファイル作成でurls.py作成
中身を以下にします。

from django.urls import path
from . import views

app_name    = "hajimete_app"
urlpatterns = [ 
    path('', views.HajimeteView.as_view(), name="index"),
]

views.pyを変更

from django.shortcuts import render
from django.views import View

class HajimeteView(View):
    def get(self, request, *args, **kwargs):

        return render(request,"hajimete_app/index.html")

hajimete_appを右クリック、新規ディレクトリでtemplatesディレクトリ作成
できたtemplatesを右クリック、hajimete_appディレクトリ作成

templates/hajimete_appを右クリックして新規ファイル作成でindex.html作成
中身を以下にします。

<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”UTF-8″>
<title>初めてのDjango</title>
</head>
    <body>
        <h2>初めてのDjango</h2>
    </body>
</html>
ターミナルでpython manage.py runserverでプログラムが実行できます。
PaizaCloudの右の8000をクリックすると
(ローカル環境の場合http://127.0.0.1:8000/にアクセス)
初めてのDjangoと表示します。

目次へ

静的ファイルとは

次にDjangoを使う上でポイントとなる静的ファイルについて実際にプログラムを作って体験します。

静的ファイルとはCSS、画像、JavaScriptファイルのことです。
静的ファイルはstaticというディレクトリの下に入れなければいけません。
なぜそんなことをしないといけないかというと
Djangoが動いているサーバーから静的ファイルを配信すると
負担が大きくて全体の処理スピードが落ちてしまうためです。
そのため静的ファイルだけ集めて
ほかのサーバーから配信するようになっています。
なのでアプリを作るときはstaticディレクトリの下に静的ファイルを配置します。

それでは静的ファイル(画像、CSS、JavaScript)を追加したサンプルコードを作ります。

css、img、js

hajimete_appディレクトリを右クリックしてstaticディレクトリを作ります。

staticディレクトリを右クリックして新規ファイル→ファイル名main.css作成
staticディレクトリを右クリックして新規ファイル→ファイル名main.js作成

この画像を右クリックして「名前を付けて保存」でtest.webpで保存してください。

いらすとやの画像を利用してます。

staticディレクトリを右クリックしてアップロード→用意したtest.webpをアップロード
(paizacloudではなくローカル環境の場合、staticディレクトリにおいてください。)
index.html、main.css、main.jsを以下のように書き換えてください。

index.html

{% load static %}
<!DOCTYPE html>
<html lang=”ja”>
<head>
    <meta charset=”UTF-8″>
    <title>初めてのDjango</title>
    <link rel="stylesheet" href="{% static 'main.css' %}">
</head>
    <body>
        <div id="test">ボタンを押すと</div>
        <button id="btn">OK</button>
        <script src="{% static 'main.js' %}"></script>
	<br>
        <img src="{% static 'test.webp' %}"  id="test" >
    </body>
</html>

main.css

#test{
    color: red;
    background-color: yellow;
}

main.js

'use strict';
const test = document.getElementById('test');
const btn = document.getElementById('btn');
btn.addEventListener('click',() =>{
    test.textContent = 'JavaScriptが動いて書き換えた';
})
ターミナルでCTRL+Cで一旦停止してください。
そうしないと静的ファイルが読み込まれないので。
python manage.py runserverでプログラムが実行できます。
PaizaCloudの右の8000をクリックすると表示します。
(ローカル環境の場合http://127.0.0.1:8000/にアクセス)

補足3
今回は実験しやすいようにstaticディレクトリの下に直接ファイルを置きましたが
実際はstaticの下にhajimete_appその下にcss、js、imgディレクトリを作ったほうが
実際にプログラムを作っていくときは扱いやすいです。
htmlでは”{% static ‘main.css’ %}”→”{% static ‘hajimete_app/css/main.css’ %}”となります。

補足4
HTMLは静的ファイルではないのか?
Webで静的、動的という言葉から一般的に静的=html、css
動的=JavaScriptと連想されますが。
Djangoの場合HTMLの中にDjangoで使うコードが入ってます。
{%staticとか。
つまりDjangoでいう静的ファイルとはDjangoを介さないで
そのまま配信できる(別のサーバーから送ってもいい)ファイルのことです。
htmlはDjangoで使うのでstaticではなくtemplatesディレクトリに入ってます。

静的ファイルを本番環境で扱う設定

本番環境で扱うにはsettings.pyの変更やライブラリのインストールなどが必要です。
順番に見ていきます。
手っ取り早く先に進みたい方は青色の部分(手順0~4)だけ実行してください。
目次へ

STATIC_URL

先ほど実行したプログラムのポイントはindex.htmlにDjango特有のものがついています。
index.html冒頭の{% load static %}これは静的ファイルを使うときにつける。
静的ファイルを指定するところを“{% static ‘test.webp’ %}”のようにしています。

静的ファイルがどこからきているか確認します。
実行した画面のアドレスバーをコピペして新しいタブに貼り付けて移動してください。
具体的にはアドレスバー https://localhost-******.paiza-user-free.cloud:8000/を
新しいタブにコピペしてEnter
PaizaCloudで開いてる画面でやるとキャッシュされてるようでうまく実験できません。

画像がどこから配信されてるか確認します。
おばあさんの画像(test.webp)を右クリックし「画像のリンクをコピー」をクリックします。
メモ帳に貼り付けて確認すると
https://localhost-****.paiza-user-free.cloud:8000/static/test.webpとなってます。
(ローカルの場合http://localhost:8000/static/test.webp)
次にsettings.pyのSTATIC_URL = ‘/static/’を
STATIC_URL = ‘/tekitou/’に替えて上と同じことをやってください。
https://localhost-sumoayui-2.paiza-user-free.cloud:8000/tekitou/test.webpになります。
(ローカルの場合http://localhost:8000/tekitou/test.webp)
つまりsettings.pyのSTATIC_URL =が静的ファイルの配信先の設定になります。

しかしこの段階ではSTATIC_URL =に何を設定しても
静的ファイルの配信先はアプリの下のstaticディレクトリに固定されています。
この紐づけを切るにはsettings.pyのDEBUG = Trueを
DEBUG = False(本番)にして実行すると紐づけが切れます。

手順0
settings.pyのDEBUG = Trueを
DEBUG = Falseに変更


キャッシュに残ってると変わらないのでshift+F5を押してスパーリロードしてください。
そうすると静的ファイルのリンクが切れて画像が表示されません。css、jsも。
STATIC_URL =が分かったと思うのでSTATIC_URL = ‘/static/’に戻してください。
目次へ


Whitenoise

静的ファイルは、本番環境では静的ファイル配信用のサーバーから配信するのが一般的です。
Middleware(ミドルウェア)にWhitenoiseを入れるとDjangoから配信できるようになります。WhiteNoiseの強みは「事前に効率よく圧縮ファイルを作っておく機能(Storage)」と、「アクセスしてきたブラウザの能力に合わせて、最適なファイルを仕分けして送る機能(Middleware)」の2つがセットになっている点にあります。

DEBUG=True(開発時)と StaticFilesStorage(本番想定)の違い

通常、Djangoは DEBUG の値によって静的ファイルを探す場所(配信元)を裏で切り替えています。

  • DEBUG = True のとき(開発環境):collectstatic(後述) をしていなくても、各アプリのフォルダ内(app/static/ など)から、Djangoがリアルタイムにファイルを探索して配信します。
  • DEBUG = FalseStaticFilesStorage(WhiteNoiseなし):Djangoはもう各アプリのフォルダを探しに行きません。collectstaticSTATIC_ROOTstaticfiles ディレクトリ)に一斉に集められたファイルだけを見て配信しようとします。

⚠️ 重要な注意点(Djangoの標準仕様)

実は、Django単体(WhiteNoiseなし)だと、DEBUG=False にした瞬間に静的ファイルを配信する能力自体をオフにしてしまう仕様になっています。「静的ファイルの配信はNginxやApacheなどのWebサーバーがやるべきだ」という設計思想だからです。

そのため、WhiteNoiseを入れずに DEBUG=False にすると、staticfiles から配信されるどころか、404エラーになって静的ファイルが一切読み込めなくなります。


WhiteNoiseの本当の役割(Storage と Middleware)

そこで登場するのがWhiteNoiseです。
「WhiteNoiseの機能は、storageに圧縮ファイルを作るだけでなく、配信時にも選択して送れるようになるということです。」

WhiteNoiseは以下の2つのコンポーネント(部品)がコンビを組んで仕事をしています。

① STATICFILES_STORAGE(保存時の仕事)

  • collectstatic をした時に、ハッシュ値を付けたり、GzipやBrotliで圧縮されたファイル(.gz, .br)をあらかじめ生成して staticfiles に保存します。

② MIDDLEWARE(配信時の仕事)

  • Djangoに静的ファイルの配信能力を「復活」させます(これがあるから、Nginxがなくても DEBUG=False で静的ファイルが映ります)。
  • さらに、ブラウザからアクセスが来た時に「リクエストヘッダ(Accept-Encoding)」をチェックします。
    • ブラウザが「Brotli対応だよ」と言ってきたら、あらかじめ作っておいた .br ファイルを選択して送る。
    • ブラウザが「古いから圧縮は無理だよ」と言ってきたら、生のファイルを選択して送る。

では、Whitenoiseを使う手順です。

手順1
ターミナルで
CTRL+Cで停止させ
pip install whitenoise

静的ファイルを一箇所に集めた場所staticfiles(STATIC_ROOT)

静的ファイルは自分で作ったもの以外にも元々存在する静的ファイルをがあります。
それらを1か所(staticfilesディレクトリ)に集め、
そのフォルダごと静的ファイル配信用の別サーバーへ移動させます。
今回のようにwhitenoiseを使う場合もstaticfilesディレクトリに集めるところは同じです。

手順2
hajimete_pjを右クリックで静的ファイルを集めるためのディレクトリ
staticfilesディレクトリを作ってください。
手順3
settings.py変更
①MIDDLEWARE = [にwhitenoise追加
'whitenoise.middleware.WhiteNoiseMiddleware',

②1番下に3行追加
import os
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.StaticFilesStorage'

STATIC_ROOT =でstaticfilesディレクトリの場所を指定しています。
指定の仕方がややこしいですがosというpythonのライブラリを利用しています。簡単に言えばBASE_DIRのうしろに ‘staticfiles’をくっつけてます。
詳しくはos.pathでググってください。

STATIC_ROOT の値を確認するために無理やり表示させてみます。
settings.pyを以下ように替えて実行するとターミナルに表示されます。
(この段階ではstaticfilesに何も入ってないので画像等は表示しなくなります)

print("static_rootは以下です。")
print(STATIC_ROOT)

実行後の表示
static_rootは以下です。
/home/ubuntu/hajimete_pj/staticfiles
となってました。
(ローカルの場合C:\Users\user\hajimete_pj\staticfiles)
また、staticfilesより上の階層がBASE_DIRということになります。

paizaの場合、左側のツリーを見れば同じことが分かります。
今はこうなってますが赤字部分は動的に変わるのでHerokuへもっていくと変わるはずです。
確認が終わったらviews.pyは元に戻してください。

STATICFILES_STORAGE

STATICFILES_STORAGE とは、一言で言うと「集めた静的ファイル(CSS、画像、JSなど)を、どこに、どのようなルールで保存・配信するか」を決める設定です。通常、Djangoの collectstatic コマンド後述を実行した際の挙動をこの設定でコントロールします。whitenoiseを使う場合は、staticfilesにある静的ファイルをSTATICFILES_STORAGE =の設定したプログラムを使って静的ファイルを配信しています。
ただ設定値の情報が2種類あってwhitenoiseのものを使うかDjangoのものを使うかです。

PaizaCloudで
STATICFILES_STORAGE = 'whitenoise.storage.CompressedManifestStaticFilesStorage'にするとServer Error(500)がでます。
なのでこちらを使っています。Herokuもこれで大丈夫です。
STATICFILES_STORAGE = 'django.contrib.staticfiles.storage.StaticFilesStorage'

2つの設定の違いは、「配信の効率化(圧縮・キャッシュ)」「本番環境での利便性」にあります。


django.contrib.staticfiles.storage.StaticFilesStorage

これはDjangoのデフォルト設定です。

  • 挙動: STATIC_ROOT で指定したフォルダに、ファイルをそのままコピーします。
  • 特徴:
    • 何の加工もしません(圧縮なし)。
    • ファイル名もそのままです。
  • デメリット: ブラウザにキャッシュが残っている場合、CSSを更新してもユーザーの画面が変わらない(古いキャッシュを見続けてしまう)という問題が起きやすいです。また、WhiteNoiseを使っている意味がほとんどなくなります。

whitenoise.storage.CompressedManifestStaticFilesStorage

WhiteNoiseを導入した際の推奨設定(高機能版)です。

この設定にすると、主に以下の2つの魔法がかかります。

① 圧縮 (Compressed)

ファイルを Gzip や Brotli という形式で自動的に圧縮したコピーを作成します。ブラウザが対応していれば、サイズの小さい圧縮版を送信するため、サイトの読み込みが速くなります。

② マニフェストとハッシュ化 (Manifest)

ファイル名に内容に基づいた「ハッシュ値」を付け加えます(例: style.cssstyle.a1b2c3d4.css)。

  • メリット: ファイルの中身を書き換えるとハッシュ値(ファイル名)が変わるため、ブラウザのキャッシュ問題を完璧に回避できます。
  • 仕組み: Djangoは staticfiles.json という対応表(マニフェスト)を作成し、テンプレート内の {% static 'style.css' %} を自動的にハッシュ後のファイル名に置換してくれます。

比較表

特徴Django標準 (StaticFilesStorage)WhiteNoise (CompressedManifest…)
ファイル圧縮なしあり(高速化)
ファイル名そのままハッシュ付与(キャッシュ対策)
主な用途開発環境・シンプルな構成本番環境(推奨)
別途設定不要WhiteNoiseのインストールが必要

補足:どちらを使うべきか?

WhiteNoiseをpipしたなら、間違いなく whitenoise.storage.CompressedManifestStaticFilesStorage を使うべきです。

ただし、Django 4.2以降では、設定方法が STORAGES 辞書形式に変更されています。最新の書き方は以下のようになります:

Python

# Django 4.2+ の書き方
STORAGES = {
    "staticfiles": {
        "BACKEND": "whitenoise.storage.CompressedManifestStaticFilesStorage",
    },
}

補足5
Django(Python)でディレクトリの区切りのような扱いで/ではなく.を見ます。これはパッケージの中にあるモジュールやクラス、関数、オブジェクトの場所を指定しています。
.でつながれてるのを見ると難しいことをやってそうに見えます。
settings.pyでは両端だけ見て途中は無視。
左の何のライブラリ(パッケージ)と右端の何ということだけ注目していればいいと思います。

静的ファイルを一箇所に集める(python manage.py collectstatic)

目次へ
静的ファイルを1か所に集め方

手順4
静的ファイルを一箇所に集めるコマンドをターミナルで実行
python manage.py collectstatic

これで実行して確認できます。
また、STATICFILES_STORAGEにCompressedManifestStaticFilesStorage を指定した場合は「元のファイルを上書きして潰す」のではなく、「元のファイルはそのまま残し、それとは別に圧縮版のファイルを新しく作る」という挙動をします。

staticfiles フォルダの中をもう一度よく観察してみると、その秘密が分かります。


フォルダの中に「3つのファイル」ができていませんか?

例えば、元のファイルが style.css だった場合、collectstatic を実行すると、staticfiles フォルダの中には以下のように3つのファイル(+α)が生成されます。

  1. style.css(元のファイルそのもの)
    • これが、いまあなたが「普通に見えている」ファイルです。
    • 中身は圧縮されておらず、通常のテキストなので普通に読めます。
  2. style.css.gz(Gzip圧縮されたファイル)
    • 元のファイルをGzipという方式で圧縮したものです。バイナリデータになっているため、テキストエディタで開くと文字化けします。
  3. style.css.br(Brotli圧縮されたファイル)
    • さらに高圧縮なBrotliという方式で圧縮されたファイルです。こちらも中身は読めません。
  4. style.a1b2c3d4e5f6.css(ハッシュ値付きファイル)
    • キャッシュ対策のために、ファイル名にランダムな文字列(ハッシュ値)がついたものです。これの圧縮版(.gz.br)も一緒に作られます。

なぜ元のファイルを残しておく必要があるのか?

「全部圧縮しちゃえばいいのに、なぜ元の生ファイルを残すの?」と思いますよね。理由は「ブラウザへの優しさ(互換性)」です。

世の中のすべてのブラウザが、最新の圧縮形式(Brotliなど)に対応しているわけではありません。

  • 最新のブラウザがアクセスしてきた時:WhiteNoise(またはNginx)は、「このブラウザは圧縮版が読めるな」と判断し、サイズが小さくて軽い style.css.brstyle.css.gz を送信します。
  • ものすごく古いブラウザがアクセスしてきた時:圧縮版を送ってしまうと画面が崩れてしまうため、安全のために圧縮されていない元の style.css を送信します。

このように、どんな環境のブラウザが来ても対応できるように、DjangoとWhiteNoiseは「生ファイル」と「各種圧縮ファイル」のセットを一堂に集めているのです。


補足6
XFREEというサーバーから静的ファイル配信実験しようと思いましたが
画像が表示されませんでした。
右クリックして画像のリンクを確かめるとXFREEからになっています。
これは混合コンテンツが原因でhttps://のページにhttp://(XFREEはSSL対応なしのため)のコンテンツがあると
表示できないようにプラウザがしています。

無料レンタルサーバーの使い方【初心者向け】プログラミングしたものをサーバーにアップロードする方法
プログラミング勉強し始めてHTML、CSS、JavaScript、PHPで作ったものを実際にネットにのせて試したくはないですか?開発環境内だけで動作させても実際はどんな感じになるのか?サーバーにアップロードしてみましょう。無料でできます。勉…
アクセスカウンターの設置ができない原因は混合コンテンツ
ブログにアクセスカウンターを設置しようとしてググったら良さそうなのがあって、それをブログに貼り付けたら表示しないということはないでしょうか。原因の一つは混合コンテンツです。アクセスカウンターの設置ができない件を通して混合コンテンツについて具…
【Django入門】DjangoアプリをWeb開発環境で開発、公開するまでの手順-ステップ2(GitHub、Git、Heroku)
PaizaCloudからGitHubとGitを使いHerokuへデプロイする方法です。GitとGitHubに関してはPaizaCloudからHerokuへデプロイするためにコードの移動手段として利用しますので、それぞれの詳しい解説はありませ…

続きはこちらの記事

MENTAやってます(ichige)
イチゲをOFUSEで応援する(御質問でもOKです)
目次へ

コメント

タイトルとURLをコピーしました