如何在Apache Web服务器上部署React App

时间：2017-02-25 20:31:03

标签： javascript apache reactjs

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

我看过这篇文章React,js on Apache server，但它没有多少指南

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

9 个答案:

答案 0 :(得分：28)

最终能够弄明白，我希望它会帮助像我这样的人 以下是Web包配置文件的外观 检查指定的dist目录和输出文件。我错过了指定dist目录路径的方法

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文件（名称可以是任何内容）

休息时间取决于您的代码和组件

执行以下命令序列

  

npm install

这应该让你获得所有的依赖（节点模块）

然后

  

npm run production

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

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

答案 1 :(得分：20)

首先，转到您的packages.json文件夹，并将此行代码与您的真实域名地址相匹配：

"homepage": "https://yourwebsite.com/afolder/",

其次，转到项目文件夹中的终端并输入：

npm run build

现在您将看到项目文件夹结构中有一个构建文件夹。

只有您使用filezilla上传到服务器的那个。

答案 2 :(得分：5)

如帖子所述，React是一种基于浏览器的技术。它只在HTML文档中呈现视图。

为了能够访问您的＆＃34; React App＆＃34;，您需要：

  1. 捆绑您的React应用
  2. 让Apache指向服务器中的html文件，并允许外部访问。

    3. 您可能拥有此处的所有信息：https://httpd.apache.org/docs/trunk/getting-started.html用于Apache服务器，此处用于制作javascript包https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr

答案 3 :(得分：5)

  1. 转到项目根目录cd示例/ home / ubuntu / react-js
  2. 首先在npm run build上构建项目

  3. 正常检查您的构建目录，所有文件将在 构建文件夹。

    asset-manifest.json

    favicon.ico

    manifest.json

    robots.txt

    静态资产

    index.html

    precache-manifest.ddafca92870314adfea99542e1331500.js service-worker.js

4。将build文件夹复制到您的apache服务器，即/ var / www / html 

sudo cp -rf build /var/www/html

  1. 转到网站可用目录

    cd / etc / apache2 / sites-available /

  2. 打开000-default.conf文件

    sudo vi 000-default.conf并更改DocumentRoot路径

    enter image description here

  3. 现在转到apache conf。

    cd / etc / aapche2

    sudo vi apache2.conf

    添加给定的代码段

<Directory /var/www/html>

            Options Indexes FollowSymLinks

            AllowOverride All

            Require all granted

    </Directory>

  1. 在/ var / www / html / build内部创建文件

    sudo vi .htaccess 

Options -MultiViews
    
RewriteEngine On
    
RewriteCond %{REQUEST_FILENAME} !-f

RewriteRule ^ index.html [QSA,L]

9.sudo a2enmod重写

10.sudo systemctl重新启动apache2

  1. 重新启动apache服务器

    sudo服务apache2重新启动

    谢谢，祝你愉快

答案 4 :(得分：2)

您可以通过Apache代理运行它，但它必须在虚拟目录中运行（例如http://mysite.something/myreactapp）。

这看起来有点多余，但是如果你有其他页面不属于你的React应用程序（例如PHP页面），你可以通过端口80提供所有内容，并使其成为一个整体是一个有凝聚力的网站。< / p>

1。）使用npm run或用于启动节点服务器的任何命令启动您的react应用程序。假设它在http://127.0.0.1:8080

上运行

2。）编辑httpd-proxy.conf并添加：

<form name="form_cot" action="<?php echo base_url('article/insert')?>" method="POST" enctype="multipart/form-data">

  <div class="form-group">
  <label for ="tipotrabajo">Tipo de Trabajo: </label>
 <input type="radio" name="tipotrab" value="0" required> Fabricación
 <input type="radio" name="tipotrab" value="1"> Reparación
  </div>

  <div class="form-group">
     <label for ="origenmat">Origen del Material: </label>
 <input type="radio" name="origenmat" value="0" required> Empresa
 <input type="radio" name="origenmat" value="1"> Cliente
  </div>

  <div class="form-group">
    <label for="material">Material</label>
    <input type="text" name="material" value="<?= @set_value('material') ?>" class="form-control" placeholder="Ejemplo: acero,cobre" required>
  </div>
  <div class="form-group">
    <label for="alto">Alto</label>
    <input type="number" name="alto" class="form-control" required>
  </div>
  <div class="form-group">
    <label for="ancho">Ancho</label>
    <input type="number" name="ancho" class="form-control" required>
  </div>
  <div class="form-group">
    <label for="largo">Largo</label>
    <input type="number" name="largo" class="form-control" required>
  </div>
  <div class="form-group">
    <label for="cantidad">Cantidad</label>
    <input type="number" name="cantidad" class="form-control" required>
  </div>
  <div class="form-group">
  <label for="imagen">Imagen Referencia</label>
    <input type="file" name="userfile" required=''>
  </div>



  <center><input type="submit" value="Enviar" name="enviar" class="btn btn-primary"></center>
</form>

3.）重启Apache

答案 5 :(得分：1)

首先，添加pom.xml并将其设为maven项目，然后进行构建。它将在目标文件夹中为您创建一个War文件，之后您可以将其部署到任意位置。

pom.xml http://maven.apache.org/xsd/maven-4.0.0.xsd“> 4.0.0 it.megadix 创建反应应用程序servlet 0.0.1-快照 战争

<properties>
    <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
    <npm.output.directory>build</npm.output.directory>
</properties>

<build>
    <finalName>${project.artifactId}</finalName>
    <plugins>
        <!-- Standard plugin to generate WAR -->
        <plugin>
            <groupId>org.apache.maven.plugins</groupId>
            <artifactId>maven-war-plugin</artifactId>
            <version>2.1.1</version>
            <configuration>
                <webResources>
                    <resource>
                        <directory>${npm.output.directory}</directory>
                    </resource>
                </webResources>
                <webXml>${basedir}/web.xml</webXml>
            </configuration>
        </plugin>

        <plugin>
            <groupId>org.codehaus.mojo</groupId>
            <artifactId>exec-maven-plugin</artifactId>
            <version>1.3.2</version>
            <executions>
                <!-- Required: The following will ensure `npm install` is called
                     before anything else during the 'Default Lifecycle' -->
                <execution>
                    <id>npm install (initialize)</id>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                    <phase>initialize</phase>
                    <configuration>
                        <executable>npm</executable>
                        <arguments>
                            <argument>install</argument>
                        </arguments>
                    </configuration>
                </execution>
                <!-- Required: The following will ensure `npm install` is called
                     before anything else during the 'Clean Lifecycle' -->
                <execution>
                    <id>npm install (clean)</id>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                    <phase>pre-clean</phase>
                    <configuration>
                        <executable>npm</executable>
                        <arguments>
                            <argument>install</argument>
                        </arguments>
                    </configuration>
                </execution>

                <!-- Required: This following calls `npm run build` where 'build' is
                     the script name I used in my project, change this if yours is
                         different -->
                <execution>
                    <id>npm run build (compile)</id>
                    <goals>
                        <goal>exec</goal>
                    </goals>
                    <phase>compile</phase>
                    <configuration>
                        <executable>npm</executable>
                        <arguments>
                            <argument>run</argument>
                            <argument>build</argument>
                        </arguments>
                    </configuration>
                </execution>

            </executions>

            <configuration>
                <environmentVariables>
                    <CI>true</CI>
                    <!-- The following parameters create an NPM sandbox for CI -->
                    <NPM_CONFIG_PREFIX>${basedir}/npm</NPM_CONFIG_PREFIX>
                    <NPM_CONFIG_CACHE>${NPM_CONFIG_PREFIX}/cache</NPM_CONFIG_CACHE>
                    <NPM_CONFIG_TMP>${project.build.directory}/npmtmp</NPM_CONFIG_TMP>
                </environmentVariables>
            </configuration>
        </plugin>
    </plugins>
</build>

<profiles>
    <profile>
        <id>local</id>
        <activation>
            <activeByDefault>true</activeByDefault>
        </activation>
        <build>
            <plugins>
                <plugin>
                    <groupId>org.codehaus.mojo</groupId>
                    <artifactId>exec-maven-plugin</artifactId>

                    <configuration>
                        <environmentVariables>
                            <PUBLIC_URL>http://localhost:8080/${project.artifactId}</PUBLIC_URL>
                            <REACT_APP_ROUTER_BASE>/${project.artifactId}</REACT_APP_ROUTER_BASE>
                        </environmentVariables>
                    </configuration>
                </plugin>
            </plugins>
        </build>
    </profile>

    <profile>
        <id>prod</id>
        <build>
            <plugins>
                <plugin>
                    <groupId>org.codehaus.mojo</groupId>
                    <artifactId>exec-maven-plugin</artifactId>

                    <configuration>
                        <environmentVariables>
                            <PUBLIC_URL>http://my-awesome-production-host/${project.artifactId}</PUBLIC_URL>
                            <REACT_APP_ROUTER_BASE>/${project.artifactId}</REACT_APP_ROUTER_BASE>
                        </environmentVariables>
                    </configuration>
                </plugin>
            </plugins>
        </build>
    </profile>
</profiles>

注意：-如果在运行项目后发现空白页，请清除缓存或重新启动IDE。

答案 6 :(得分：0)

在构建npm之前，
1）转到您的React项目的根文件夹，然后打开package.json。
2）将“首页”属性添加到package.json

  • 如果要提供绝对路径

    "homepage": "http://hostName.com/appLocation",
"name": "react-app",
"version": "1.1.0",

  • 如果要提供相对路径

    "homepage": "./",
"name": "react-app",

    使用相对路径方法可能会在IDE中警告语法验证错误。但是构建是在编译期间没有任何错误的。

3）保存package.json，并在终端运行npm run-script build
4）将build/文件夹的内容复制到您的服务器目录。

PS：如果要频繁更改服务器中构建文件的位置，则很容易使用相对路径方法。

答案 7 :(得分：0)

正如React的官方docs中所描述的那样，如果您使用在后台使用HTML5 pushState历史API的路由器，则只需要在{.htaccess 1}}您的react-app目录。

public

如果使用相对路径，请像这样更新Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L] ：

package.json

注意：如果您使用的是"homepage": ".", ，则可以使用react-router@^4道具在任何<Link>上扎根basename。

<Router>

答案 8 :(得分：-1)

我希望如此对我和谁都有帮助。在我之前的评论是正确的，因为获得了很多帮助，但就我而言，情况几乎没有什么不同。首先，我用package.json写下一个代码"start": "set PORT=80&&react-scripts start"。因为我将Windows和Wampserver64与Apache一起使用。我在那里制作了虚拟主机，并在此虚拟​​主机上从构建 dist 文件夹导出了我在React应用程序中拥有的所有文件。那里工作非常好。然后经过更多测试，然后从Internet服务器进行部署。如果您希望请访问下一个链接http://miodragtrajanovic.com/。这是我在工作中使用的静态网站Bootstrap和React

相关问题
最新问题