저는 webpack을 처음 접했지만 이 기술을 정말로 마스터하고 싶습니다. Python 스크립트를 통해 Flask 애플리케이션을 실행 __init__.py하고 cmd에서 webpack을 실행하여 웹 애플리케이션을 개발합니다 npm run start.
일부 개발을 마친 후 npm run build전체 폴더를 실행하여 .buildUbuntu 서버에 푸시했습니다.
내 프로젝트의 구조는 다음과 같습니다.
├── api.log
├── app.py
├── assets
│ ├── images
│ ├── scripts
│ └── styles
├── build
│ ├── manifest.json
│ └── public
├── db.log
├── flask_webpack_test.iml
├── __init__.py
├── node_modules
│ == bunch of them here
├── package.json
├── package-lock.json
├── __pycache__
│ ├── api.cpython-35.pyc
│ ├── app.cpython-35.pyc
│ ├── config.cpython-35.pyc
│ ├── db_connection.cpython-35.pyc
│ ├── __init__.cpython-35.pyc
│ └── our_logging.cpython-35.pyc
├── templates
│ └── index.jinja2
├── tests
│ ├── conftest.py
│ ├── __init__.py
│ └── test_views.py
├── webpack.config.js
└── wsgi.py
하지만 내 도메인을 방문하면 정적 콘텐츠 없이 일반 HTML만 표시됩니다. 웹 브라우저 콘솔에 표시됩니다.Unchecked runtime.lastError: The message port closed before a response was received.
테스트 프로젝트를 복사했습니다.여기
따라서 포트 2992를 통한 연결이 중단됩니다. 내 Ubuntu 서버에서 이를 켰습니다.
mylist.json
{"assets":"images/dog/noidea.jpg":"images/dog/noidea.b9252d5fd8f39ce3523d303144338d7b.jp,
"app_css.css":"app_css.6e0ed0322fcd44592461.css",
"app_js.js":"app_js.3919e91e57e850f7cebe.js"},
"publicPath":"http://localhost/assets/"}
webpack.config.js:
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var ManifestRevisionPlugin = require('manifest-revision-webpack-plugin');
var rootAssetPath = './assets';
module.exports = {
entry: {
app_js: [
rootAssetPath + '/scripts/entry.js'
],
app_css: [
rootAssetPath + '/styles/main.css'
]
},
output: {
path: './build/public',
publicPath: 'http://localhost/assets/',
filename: '[name].[chunkhash].js',
chunkFilename: '[id].[chunkhash].js'
},
resolve: {
extensions: ['', '.js', '.css']
},
module: {
loaders: [
{
test: /\.js$/i, loader: 'script-loader',
exclude: /node_modules/
},
{
test: /\.css$/i,
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
},
{
test: /\.(jpe?g|png|gif|svg([\?]?.*))$/i,
loaders: [
'file?context=' + rootAssetPath + '&name=[path][name].[hash].[ext]',
'image?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
},
plugins: [
new ExtractTextPlugin('[name].[chunkhash].css'),
new ManifestRevisionPlugin(path.join('build', 'manifest.json'), {
rootAssetPath: rootAssetPath,
ignorePaths: ['/styles', '/scripts']
})
]
};
Python 파일은 HTML을 제공합니다.
from flask import Flask, render_template
from werkzeug.serving import run_simple
from flask_webpack import Webpack
webpack = Webpack()
def create_app(settings_override=None):
"""
Create a test application.
:param settings_override: Override settings
:type settings_override: dict
:return: Flask app
"""
app = Flask(__name__)
params = {
'DEBUG': False,
'WEBPACK_MANIFEST_PATH': './build/manifest.json'
}
app.config.update(params)
# if settings_override:
# app.config.update(settings_override)
webpack.init_app(app)
return app
app = create_app()
@app.route('/')
def index():
return render_template('index.jinja2')
# @app.route('/s')
# def index():
# return render_template('index.jinja2')
if __name__ == '__main__':
app.run(port=5000)
# run_simple('localhost', 5000, app, use_reloader=True, use_debugger=True)
이 문제를 해결하는 데 도움을 줄 수 있는 사람이 있나요? 내 설정에 어떤 문제가 있으며 왜 내 서버에서 웹팩을 실행할 수 없나요?
편집하다
ivan@194-58-97-122:~$ sudo netstat -ntlp | grep LISTEN
tcp 0 0 194.58.97.122:53 0.0.0.0:* LISTEN 303/named
tcp 0 0 127.0.0.2:53 0.0.0.0:* LISTEN 303/named
tcp 0 0 127.0.0.1:53 0.0.0.0:* LISTEN 303/named
tcp 0 0 0.0.0.0:22 0.0.0.0:* LISTEN 326/sshd
tcp 0 0 127.0.0.1:953 0.0.0.0:* LISTEN 303/named
tcp 0 0 0.0.0.0:1500 0.0.0.0:* LISTEN 355/ihttpd
tcp 0 0 0.0.0.0:27017 0.0.0.0:* LISTEN 302/mongod
tcp6 0 0 :::80 :::* LISTEN 385/apache2
tcp6 0 0 :::53 :::* LISTEN 303/named
tcp6 0 0 :::22 :::* LISTEN 326/sshd
tcp6 0 0 ::1:953 :::* LISTEN 303/named
tcp6 0 0 :::443 :::* LISTEN 385/apache2
tcp6 0 0 :::3306 :::* LISTEN 335/mysqld
그리고 방화벽 설정:
ivan@194-58-97-122:~$ sudo ufw status verbose
Status: active
Logging: on (low)
Default: deny (incoming), allow (outgoing), deny (routed)
New profiles: skip
To Action From
-- ------ ----
3306 ALLOW IN Anywhere
2992 ALLOW IN Anywhere
2992/tcp ALLOW IN Anywhere
1191/tcp ALLOW IN Anywhere
22 ALLOW IN Anywhere
22/tcp ALLOW IN Anywhere
3306 (v6) ALLOW IN Anywhere (v6)
2992 (v6) ALLOW IN Anywhere (v6)
2992/tcp (v6) ALLOW IN Anywhere (v6)
1191/tcp (v6) ALLOW IN Anywhere (v6)
22 (v6) ALLOW IN Anywhere (v6)
22/tcp (v6) ALLOW IN Anywhere (v6)