(Django) 拆分前端和后端
(Django) Split frontend and backend
我想拆分前面(Brunch) and back (Django)。我有这个文件夹结构:
backend
mydjangoapp
static
mydjangoapp
image
javascripts
stylesheets
index.html
frontend
app
public
image
javascripts
stylesheets
index.html
例如,index.html 中样式表的路径为:
- [后端]
static/mydjangoapp/stylesheets/app.css
- [前端]
/stylesheets/app.css
我使用 前端路径 在本地使用早午餐服务器测试前端,并在部署时使用 后端路径 和 django 应用程序。当前部署过程如下所示:
- 早午餐构建
- 将 public 文件夹的内容移动到
backend/static/mydjangoapp
- 更改index.html、app.js等内的所有路径以匹配后端
静态路径。
不太方便。有没有办法自动完成?我想我可以更改后端的静态路径以匹配前端或编写脚本来执行此操作。但这并不是一个合适的解决方案,对吗?必须有一种方法可以直接从 frontend 文件夹呈现 index.html 并在不更改路径的情况下加载静态文件。尝试过 google,但没有成功。
所以。我做了一些研究并得出了这个解决方案:
1) 我在我的 django 应用程序前面使用了 nginx 服务器并将其配置为解析静态文件,如下所示(nginx 配置文件,http 部分):
server {
listen <%= ENV["PORT"] %>;
server_name _;
keepalive_timeout 5;
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://app_server;
}
location ~* .*\/.+\..+$ {
root path/to/my/static/files;
}
}
所以静态路径与 frontend 中的相同。无需更改这些。 Django 应用程序根本不解析静态文件。它只是加载一个模板。
2) 我写了一个 python 脚本来编译和复制需要的文件到 backend (它位于 frontend root目录):
#!/usr/bin/env python
from subprocess import call
import shutil
import os
BACKEND_FOLDER = "../backend/ui/public"
call(["brunch", "build", "-p"])
shutil.rmtree(BACKEND_FOLDER)
shutil.copytree("public", BACKEND_FOLDER)
print ("Deployed to: " + BACKEND_FOLDER)
现在我需要做的就是运行那个脚本。
您可以使用 post-brunch
或 after-brunch
插件将文件从 frontend/public
复制到您选择的 django 静态目录。
示例after-brunch
exports.config = {
plugins: {
afterBrunch: [
'cp -r public ../backend/static'
// cp -r /from/frontend/path /to/backend/path
]
}
}
示例 post-brunch
exports.config = {
plugins: {
postBrunch: function(files) {
console.log("Run custom javascript code to copy files.")
}
}
}
我想拆分前面(Brunch) and back (Django)。我有这个文件夹结构:
backend
mydjangoapp
static
mydjangoapp
image
javascripts
stylesheets
index.html
frontend
app
public
image
javascripts
stylesheets
index.html
例如,index.html 中样式表的路径为:
- [后端]
static/mydjangoapp/stylesheets/app.css
- [前端]
/stylesheets/app.css
我使用 前端路径 在本地使用早午餐服务器测试前端,并在部署时使用 后端路径 和 django 应用程序。当前部署过程如下所示:
- 早午餐构建
- 将 public 文件夹的内容移动到
backend/static/mydjangoapp
- 更改index.html、app.js等内的所有路径以匹配后端 静态路径。
不太方便。有没有办法自动完成?我想我可以更改后端的静态路径以匹配前端或编写脚本来执行此操作。但这并不是一个合适的解决方案,对吗?必须有一种方法可以直接从 frontend 文件夹呈现 index.html 并在不更改路径的情况下加载静态文件。尝试过 google,但没有成功。
所以。我做了一些研究并得出了这个解决方案:
1) 我在我的 django 应用程序前面使用了 nginx 服务器并将其配置为解析静态文件,如下所示(nginx 配置文件,http 部分):
server {
listen <%= ENV["PORT"] %>;
server_name _;
keepalive_timeout 5;
location / {
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
proxy_set_header Host $http_host;
proxy_redirect off;
proxy_pass http://app_server;
}
location ~* .*\/.+\..+$ {
root path/to/my/static/files;
}
}
所以静态路径与 frontend 中的相同。无需更改这些。 Django 应用程序根本不解析静态文件。它只是加载一个模板。
2) 我写了一个 python 脚本来编译和复制需要的文件到 backend (它位于 frontend root目录):
#!/usr/bin/env python
from subprocess import call
import shutil
import os
BACKEND_FOLDER = "../backend/ui/public"
call(["brunch", "build", "-p"])
shutil.rmtree(BACKEND_FOLDER)
shutil.copytree("public", BACKEND_FOLDER)
print ("Deployed to: " + BACKEND_FOLDER)
现在我需要做的就是运行那个脚本。
您可以使用 post-brunch
或 after-brunch
插件将文件从 frontend/public
复制到您选择的 django 静态目录。
示例after-brunch
exports.config = {
plugins: {
afterBrunch: [
'cp -r public ../backend/static'
// cp -r /from/frontend/path /to/backend/path
]
}
}
示例 post-brunch
exports.config = {
plugins: {
postBrunch: function(files) {
console.log("Run custom javascript code to copy files.")
}
}
}