반응형
프로덕션에서 웹 팩 빌드 파일을 제공하기 위해 ngnix를 사용하는 방법
나는 vue + webpack 프로젝트를 썼고 웹팩-dev-middleware에서는 잘 작동한다.이제 nginx와 함께 배치하고 싶다.내가 하는 일은 웹팩을 쓰는 것이다.build.config.js 및 모든 파일을 dist 폴더로 묶으십시오.그런 다음 dist 폴더를 nginx html 폴더에 복사하고 nginx.conf에 인덱스를 할당한다.그러나 다음과 같은 오류가 있다.
[부유 경고]:구성 요소 마운트 실패: 템플릿 또는 렌더 기능이 정의되지 않음(루트 인스턴스에서 발견됨)
나는 devops/backend에 대한 신참이며 전체적인 빌드 또는 배치 프로세스와 상당히 혼동된다.웹 팩-dev-server 또는 nodej가 프로덕션 환경에서 여전히 필요한가?내 프로덕션 환경 백엔드는 nginx/PHP 및 IIS/입니다.넷, 이제 노드가 전혀 설치되지 않았다.
나의 nginx.conf는
location / {
root html/dist;
index index.html index.htm;
}
그리고 웹팩.build.config.js는
var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var public_dir = "components";
//var ModernizrWebpackPlugin = require('modernizr-webpack-plugin');
module.exports = {
entry: [
path.join(__dirname,'./index.js')
],
output: {
path: path.join(__dirname, '/dist/'),
filename: '[name].js',
publicPath: '/'
},
devtool: 'eval-source-map',
plugins: [
new webpack.optimize.CommonsChunkPlugin('common.js'),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: path.resolve(__dirname, 'index.html'),
inject: true
})
],
resolve: {
root: [path.resolve('./components')],
extensions: ['', '.js', '.css']
},
module: {
loaders: [
]
}
};
빌드할 때 실행
webpack -p --config ./webpack.build.config.js
나는 vue-cli를 사용하여 vuejs 웹 팩 프로젝트를 초기화한다.프로젝트에는 이미 빌드 스크립트가 있으며,
require('./check-versions')()
process.env.NODE_ENV = 'production'
var ora = require('ora')
var rm = require('rimraf')
var path = require('path')
var chalk = require('chalk')
var webpack = require('webpack')
var config = require('../config')
var webpackConfig = require('./webpack.prod.conf')
var spinner = ora('building for production...')
spinner.start()
rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
if (err) throw err
webpack(webpackConfig, function (err, stats) {
spinner.stop()
if (err) throw err
process.stdout.write(stats.toString({
colors: true,
modules: false,
children: false,
chunks: false,
chunkModules: false
}) + '\n\n')
console.log(chalk.cyan(' Build complete.\n'))
console.log(chalk.yellow(
' Tip: built files are meant to be served over an HTTP server.\n' +
' Opening index.html over file:// won\'t work.\n'
))
})
})
건축이 끝나면, 우리는dist
폴더로 만들다내부의 모든 파일 업로드 위치html
Nginx 폴더(기본값) 다음과 같은 전체 경로를 사용하도록 루트 경로 구성:
listen 80;
server_name mydomain www.mydomain;
root /var/www/html;
반응형
'Programing' 카테고리의 다른 글
nuxtjs로 하위 상태를 매핑하는 방법 (0) | 2022.05.17 |
---|---|
Vuejs가 캐싱에 대한 계산된 속성의 저하를 어떻게 아는가? (0) | 2022.05.17 |
내 변수는 C에 저장되어 있는 메모리 내의 위치 (0) | 2022.05.16 |
Java 8에서 지수를 사용하여 스트림을 반복하는 간결한 방법이 있는가? (0) | 2022.05.16 |
SSL 및 인증서 키 저장소 (0) | 2022.05.16 |