如何使用Laravel将React部署到我的开发服务器

时间:2018-12-11 04:03:51

标签: reactjs laravel

我很困惑如何设置项目以将项目部署到开发服务器。将文件上传到服务器后出现问题。

这是我打开网站URL时浏览器显示的内容。我阅读了stackoverflow How to deploy a React App on Apache web server中的一些文章,并告诉我需要npm运行build。是的,我尝试过,但是我的终端机上说

  

缺少构建脚本

我有疑问是否需要配置htaccess?我不知道在laravel或反应中要在哪里配置?

这是我的package.json文件

import fnmatch
for name in sftp.listdir(remote_path):
    if fnmatch.fnmatch(name, "user_*.csv"):
        print(name)

这是我的webpack.config.js

    {
    "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"
    }
}

当我浏览页面时,请看

Browser shows

我npm运行构建后,它看起来像这样。

after npm run build

1 个答案:

答案 0 :(得分:0)

npm run build package.json中的脚本中丢失了。 如果您要部署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 NoneAllowOverride All

<Directory /var/www/<your dir>/public>
    Options Indexes FollowSymLinks
    AllowOverride All
    Require all granted
</Directory>

在您的终端上

sudo a2enmod rewrite //重写模块启用

sudo service restart apache2 //重新启动服务器

那会很好...