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

问题描述

我从 https://www.tutorialspoint.com/reactjs/创建了一个基本的 React 应用程序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,js 在 Apache 服务器上 但它没有没有什么比一些指导方针更多的东西

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

推荐答案

总算弄明白了，希望对我这样的人有帮助.
以下是 webpack 配置文件的样子检查指定的 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 文件(名称可以是任何内容)

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 安装

这应该会为您提供所有依赖项(节点模块)

this should get you all the dependency (node modules)

然后

npm 运行生产

这应该为您提供最终的 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 应用程序根目录下，仅此而已.

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 应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！