如何在Apache Web服务器上部署React App [英] How to deploy a React App on Apache web server

问题描述

我已经从 https://www.tutorialspoint.com/reactjs/创建了一个基本的React App reactjs_jsx.htm 在这里，我想在基于Apache的服务器上运行这个测试代码，我知道我需要创建一个可分发的构建，但我无法弄清楚如何做到这一点并且无法找到明确的指令。

I have created a basic React App from https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm here , I want to run this test code on Apache based server, I know that I need to create a distributable build but I am not able to figure out how to do that and couldnt find clear instructions.

我看过这篇文章 React，在Apache服务器上的js 但它没有任何超过指导的内容

I have seen this post React,js on Apache server but it doesn't have anything more than few guidelines

如果可以指导一些明确的指示或指示，我将不胜感激。
P.S.我知道apache是​​如何工作的PHP开发人员

If one can guide with some clear pointers or instructions I will be grateful. P.S. I know how apache works am a PHP developer

推荐答案

最终能够弄明白，我希望它能帮助像我这样的人我。$
以下是web pack配置文件应如何看起来像
检查指定的dist目录和输出文件。我错过了指定dist目录路径的方法

Ultimately was able to figure it out , i just hope it will help someone like me.
Following is how the web pack config file should look like check the dist dir and output file specified. I was missing the way to specify the path of dist directory

const webpack = require('webpack');
const path = require('path');
var config = {
    entry: './main.js',

    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'index.js',
    },

    devServer: {
        inline: true,
        port: 8080
    },
    resolveLoader: {
        modules: [path.join(__dirname, 'node_modules')]
    },
    module: {
        loaders: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader',

                query: {
                    presets: ['es2015', 'react']
                }
            }
        ]
    },
}

module.exports = config;

然后包json文件

{
  "name": "reactapp",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack --progress",
    "production": "webpack -p --progress"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "webpack": "^2.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.0.20",
    "babel-loader": "^6.0.1",
    "babel-preset-es2015": "^6.0.15",
    "babel-preset-react": "^6.0.15",
    "babel-preset-stage-0": "^6.0.15",
    "express": "^4.13.3",
    "webpack": "^1.9.6",
    "webpack-devserver": "0.0.6"
  }
}

注意脚本部分和生产部分，生产部分是为您提供最终可部署的index.js文件（名称可以豆ything）

Notice the script section and production section, production section is what gives you the final deployable index.js file ( name can be anything )

剩下的东西将取决于你的代码和组件

Rest fot the things will depend upon your code and components

执行以下命令序列

npm install

npm install

这应该可以帮助你依赖（节点模块）

this should get you all the dependency (node modules)

然后

npm run production

npm run production

这应该会得到最终的 index.js 文件，其中包含所有捆绑的代码

this should get you the final index.js file which will contain all the code bundled

完成后， index.html 和 index.js www / html下的文件或web app根目录，这就是全部。

Once done place index.html and index.js files under www/html or the web app root directory and that's all.

这篇关于如何在Apache Web服务器上部署React App的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！