问题在于我可以通过浏览器访问应用程序,但无法获取静态资源(js、jsx和图像)。
我正在使用的技术:
django-webpack-loader 0.2.4
React 0.14
Django 1.8.5
Python 2.7
Django静态文件设置的一部分:
103 # Static files (CSS, JavaScript, Images)
104 # https://docs.djangoproject.com/en/1.8/howto/static-files/
105
106 STATIC_URL = '/static/'
107 STATICFILES_DIRS = (
108 os.path.join(BASE_DIR, 'assets'),
109 )
110
111 WEBPACK_LOADER = {
112 'DEFAULT': {
113 'BUNDLE_DIR_NAME': 'bundles/',
114 'STATS_FILE': os.path.join(BASE_DIR, 'webpack-stats.json'),
115 }
116 }
webpack.config.js 文件:
4 // Dependencies
5 var path = require('path')
6 var webpack = require('webpack')
7 var BundleTracker = require('webpack-bundle-tracker')
8
9 module.exports = {
10 // The base directory (absolute path) for resolving the entry option.
11 context: __dirname,
12
13 entry: './assets/js/index',
14
15 output: {
16 // Where the compiled bundle to be stored.
17 path: path.resolve('./assets/bundles/'),
18 // Naming convention webpack should use.
19 filename: '[name]-[hash].js'
20 },
21
22 plugins: [
23 // Where webpack stores data about bundles.
24 new BundleTracker({filename: './webpack-stats.json'}),
25 // Makes jQuery available in every module.
26 new webpack.ProvidePlugin({
27 $: 'jquery',
28 jQuery: 'jquery',
29 'window.jQuery': 'jquery'
30 })
31 ],
32
33 module: {
34 loaders: [
35 // A regexp that tells webpack user the following loaders on all
36 // .js and .jsx files.
37 {test: /\.jsx?$/,
38 exclude: /ndoe_modules/,
39 loader: 'babel-loader',
40 query: {
41 presets: ['react']
42 }
43 },
44 // use ! to chain loaders
45 { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' },
46 {test: /\.css$/, loader: 'style-loader!css-loader'},
47 // Inline base64 URLs for <=8k images, direct URLs for the rest.
48 {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'}
49 ]
50 },
51
52 resolve: {
53 // Where webpack looks for modules.
54 modulesDirectories: ['node_modules'],
55 // Extensions used to resolve modules.
56 extensions: ['', '.js', '.jsx']
57 }
58 }
Dockerfile 的一部分:
3 COPY start.sh /opt/start.sh
4
5 ADD . /opt/
6
7 RUN /opt/node_modules/webpack/bin/webpack.js --config /opt/webpack.config.js
8
9 RUN chmod +x /opt/start.sh
Django项目的层次结构:
my_project/
├── Dockerfile
├── api
├── assets
├── my_project
├── db.sqlite3
├── manage.py
├── node_modules
├── package.json
├── requirements.txt
├── static
├── templates
├── webpack-stats.json
└── webpack.config.js
有两个运行 Nginx 的服务器 t01 和 t02。t01 用于代理,t02 是 Django 项目所在的地方。代理服务器看起来没问题,因为浏览器上的 URL 可以正常工作,只有静态文件找不到(404 错误)。我手动在服务器上进行静态文件捆绑,因为会生成一个包含绝对路径信息的 webpack-stats.json 文件。
但是,在我的本地计算机上,这个项目可以正常运行。
[编辑]:
我找到了一个解决方法,只需将这个代码添加到 my_project/urls.py 的 urlpatterns 末尾
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)