django-breeze デプロイ

事前準備

conf/settings.py

import os #add

DEBUG=Fasle

ALLOWED_HOSTS = ['127.0.0.1', 'サーバー名']

INSTALLED_APPS = [
  *********,
  'whitenoise',  # add
]

MIDDLEWARE = [
  **********,
'whitenoise.middleware.WhiteNoiseMiddleware', # add

]

STATIC_URL = 'static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

conf/urls.py

from django.contrib import admin
from django.urls import path, include, re_path # add include, re_path 
from django.conf import settings
from django.conf.urls.static import static
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.views.static import serve # add
import re #add

urlpatterns = [
    path(settings.ADMIN_PATH + '/', admin.site.urls), # settings.ADMIN_PATH admin以外でadminに入る設定
    path('markdownx/', include(('markdownx.urls','markdownx'))),
    re_path(r"^%s(?P<path>.*)$" % re.escape(settings.MEDIA_URL.lstrip("/")),
            serve,
            {'document_root': settings.MEDIA_ROOT}),
    path('', include('blog.urls')),
]
urlpatterns += staticfiles_urlpatterns()

# 開発環境でのメディアファイルの配信設定
urlpatterns += static(
    settings.MEDIA_URL,
    document_root=settings.MEDIA_ROOT
)

この後

vscode ターミナルで

npm run build

python manage.py  collectstatic

コードを修正して build + collectstatic し直す場合は

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

ps:

nginx

    location /static {
          alias /var/www/html/static;
      }


    #location /media {
    #   alias /var/www/html/media;
    #}

など設定する場合は
    chmod 777 -R /var/www/html
など設定した   

複数サイトを立ち上げる時 axiosを使うばあいの注意

axios.get('/api/posts/') //'http://127.0.0.1:8080/api/posts/')

ポート8080, 8000, 8001 等i色々使える為

そこでreactでも .envを使う方法

srcフォルダー内に .envつくって以下を記入

VITE_API_URL=127.0.0.1:8080　　//viteのばあい

xxx.jsx側で

const uploadImage = () => {
  const [image, setImage] = useState()
  const [onBtn, setOnBtn] = useState(false)   
  const [data, setData] = useState('')

  const apiUrl = import.meta.env.VITE_API_URL 
  const URL = `${apiUrl}/upload/`

  const Submit=async()=>{
        const fdata = new FormData()
        fdata.append('image', image)
        const requestOptions={
            method:"POST",
            body:fdata,
        }
        const response =await fetch(URL,requestOptions)
        const data=await response.json()
        const imageUrl = data.image
        setData(imageUrl)
    }


}

gunicorn も ソケット形式では複数サイトは無理のようだ

/etc/systemd/system/xxxx.service

[Unit]
Description=gunicorn daemon
After=network.target


[Service]
User={user}
Group=www-data
WorkingDirectory=/home/{user}/djb-blog-pg
# ExecStart=/home/{user}/djb-blog-pg/venv/bin/gunicorn --access-logfile - --workers 3 --bind unix:/home/{user}/djb-blog-pg/conf.sock conf.wsgi:application
ExecStart=/home/{user}/djb-blog-pg/venv/bin/gunicorn  --bind  127.0.0.1:8080 conf.wsgi:application

[Install]
WantedBy=multi-user.target

消すかも知れませんが複数サイトのテストサイト以下にあります

開発中てすとサイト