我正在 Dockerizing 我的 Django/React 應用程式,但是在讓靜態檔案顯示在 prod 服務器上時遇到了問題。
專案目錄:
.
├── README.md
├── backend
│ ├── Dockerfile
│ ├── Dockerfile.prod
│ ├── backend
│ ├── entrypoint.prod.sh
│ ├── entrypoint.sh
│ ├── manage.py
│ ├── requirements.txt
│ └── static
├── docker-compose.ci.yml
├── docker-compose.prod.yml
├── docker-compose.yml
├── frontend
│ ├── Dockerfile
│ ├── Dockerfile.prod
│ ├── README.md
│ ├── build
│ ├── node_modules
│ ├── package-lock.json
│ ├── package.json
│ ├── public
│ ├── src
│ └── webpack.config.js
└── nginx
├── Dockerfile
└── nginx.conf
組態檔
upstream backend {
server backend:8000;
}
server {
listen 80;
location / {
root "/var/www/frontend";
}
location /api/ {
proxy_pass http://backend;
proxy_set_header Host $http_host;
}
location /admin/ {
proxy_pass http://backend;
proxy_set_header Host $http_host;
}
location /static/ {
alias /backend/static;
}
}
Django 靜態設定:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
docker-compose.ci.yml(構建影像):
version: "3.8"
services:
backend:
build:
context: ./backend
dockerfile: Dockerfile.prod
image: "${BACKEND_IMAGE}"
command: gunicorn backend.wsgi:application --bind 0.0.0.0:8000
volumes:
- static_volume:/backend/static
- media_volume:/backend/media
expose:
- 8000
env_file: .env
frontend:
build:
context: ./frontend
dockerfile: Dockerfile.prod
image: "${FRONTEND_IMAGE}"
volumes:
- frontend_build:/frontend/build
nginx:
build:
context: ./nginx
image: "${NGINX_IMAGE}"
ports:
- 80:80
volumes:
- static_volume:/backend/static
- frontend_build:/var/www/frontend
depends_on:
- backend
- frontend
volumes:
frontend_build:
static_volume:
media_volume:
在 Chrome Dev Tools 的網路選項卡中,它在嘗試加載靜態時顯示此 URL:
請求地址:http://ipaddress/static/admin/css/nav_sidebar.cs
uj5u.com熱心網友回復:
backend在構建期間收集在容器內的靜態檔案被隱藏,static_volume當您運行docker-compose.
當您在目錄頂部安裝卷時,您只能看到卷的內容,而不是之前目錄中的檔案。
要解決這個問題,你可以
collectstatic掛載卷后運行。即服務器啟動后nginx在構建時將 Django 生成的靜態檔案復制到容器中(不再需要使用卷)
轉載請註明出處,本文鏈接:https://www.uj5u.com/net/391256.html
標籤:姜戈 码头工人 nginx docker-compose
上一篇:如何將來自具有不同時間戳屬性的多個AzureIoT設備的資料引入同一個AzureTimeSeriesInsights環境?
下一篇:兩個<h4>、<img>和<p>標簽被分組在單獨的s中,我對img使用了浮動,使用<br>將彼此分開但它們仍然重疊
