[英]How to deploy React with Laravel to my development server
我很困惑如何設置項目以將項目部署到開發服務器。 將文件上傳到服務器后出現問題。
這是我打開網站網址后瀏覽器顯示的內容。 我閱讀了stackoverflow中的一些文章, 如何在Apache Web服務器上部署React App,並告訴我需要npm運行build。 是的,我嘗試過,但是我的終端機說
缺少構建腳本
我有疑問我需要配置htaccess嗎? 我不知道在laravel中配置還是在反應中配置?
這是我的package.json文件
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"build": "webpack --mode production"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.1.0",
"axios": "^0.18.0",
"babel-eslint": "^8.2.6",
"babel-plugin-transform-class-properties": "^6.24.1",
"babel-preset-react": "^6.23.0",
"babel-preset-stage-0": "^6.24.1",
"bootstrap": "^4.0.0",
"cross-env": "^5.1",
"eslint": "^4.19.1",
"file-loader": "^2.0.0",
"jquery": "^3.2",
"laravel-mix": "^2.0",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"url-loader": "^1.1.1"
},
"dependencies": {
"@types/recompose": "^0.27.0",
"antd": "^3.8.2",
"concurrently": "^4.0.1",
"cors": "^2.8.4",
"datatables.net": "^1.10.19",
"es6-promise": "^4.2.5",
"font-awesome": "^4.7.0",
"google-map-react": "^1.1.0",
"google-maps-react": "^2.0.2",
"isomorphic-fetch": "^2.2.1",
"jwt-auth": "^2.0.1",
"jwt-decode": "^2.2.0",
"react-bootstrap": "^0.32.4",
"react-bootstrap-sweetalert": "^4.4.1",
"react-bootstrap-table": "^4.3.1",
"react-bootstrap-table-next": "^1.2.1",
"react-bootstrap-table2-paginator": "^1.0.3",
"react-bootstrap-table2-toolkit": "^1.1.1",
"react-bs-notifier": "^5.0.0",
"react-filter-search": "^1.0.8",
"react-geolocated": "^2.4.0",
"react-geolocation": "^1.0.4",
"react-google-maps": "^9.4.5",
"react-js-pagination": "^3.0.2",
"react-quill": "^1.3.1",
"react-recaptcha": "^2.3.10",
"react-redux": "^5.0.7",
"react-responsive-data-table": "^1.0.4",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-s-alert": "^1.4.1",
"react-search-input": "^0.11.3",
"routes": "^2.1.0",
"sweetalert": "^2.1.0",
"sweetalert-react": "^0.4.11",
"sweetalert2": "^7.28.4"
}
}
這是我的webpack.config.js
const webpack = require('webpack')
const path = require('path')
const fs = require('fs')
const package = require('./package.json')
const LIBRARY_NAME = 'fuse'
const VERSION = package.version
const AUTHOR = package.author
const HOMEPAGE = package.homepage
const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin
const env = process.env.WEBPACK_ENV
let copyright = fs.readFileSync('COPYRIGHT.txt', 'UTF8')
let outputFile
let plugins = [
new webpack.BannerPlugin({
banner: copyright
.replace('{VERSION}', `v${VERSION}`)
.replace('{AUTHOR_URL}', `${AUTHOR.url}`)
.replace('{HOMEPAGE}', `${HOMEPAGE}`),
entryOnly: true
})
]
if (env === 'build') {
plugins.push(new UglifyJsPlugin({ minimize: true }))
outputFile = `${LIBRARY_NAME}.min.js`
} else {
outputFile = `${LIBRARY_NAME}.js`
}
const config = {
entry: __dirname + './src/index.js',
devtool: 'source-map',
entry: './src',
output: {
path: __dirname + '/dist',
filename: outputFile,
library: 'Fuse',
libraryTarget: 'umd',
umdNamedDefine: true
},
module: {
loaders: [{
test: /(\.js)$/,
loader: 'babel-loader',
exclude: /(node_modules)/
}]
},
plugins: plugins
}
module.exports = config
當我瀏覽頁面時,請看這里
在我npm運行構建后,它看起來像這樣。
package.json
中的腳本缺少npm run build
。 如果要部署npm run prod
。 或者,您可以運行npm run watch
來實時查看代碼更改,但是最好將其用於本地開發。 如果您正在開發laravel mix項目,則需要設置apache配置。
打開文件/etc/apache2/sites-available/000-default.conf
,然后編寫您自己的根目錄路徑
DocumentRoot /var/www/<your directory>/public
接下來,更改您的.htacces文件:打開/var/www/mmc1/public/.htaccess
在頂部寫入以下內容
DirectoryIndex index.php
現在,我們需要使您的服務器識別.htaccess配置。轉到/etc/apache2/apache2.conf
並將“ AllowOverride None
更改為“ AllowOverride All
<Directory /var/www/<your dir>/public>
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
</Directory>
在您的終端上
sudo a2enmod rewrite
//重寫模塊啟用
sudo service restart apache2
//重新啟動服務器
而且會很好...
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.