如何在 Apache Web 服务器上部署 React 应用程序

Question

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

我在 Apache 服务器上看到过 React,js这个帖子，但它没有什么比几条准则

Answer 1

首先，在您的 react 项目中，转到您的package.json并调整这行代码以匹配您的目标域地址 + 文件夹：

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

其次，转到您的反应项目中的终端并输入：

npm run build

现在，从新创建的构建文件夹中取出所有文件并将它们上传到your_folder_name ，在子文件夹中使用 filezilla ，如下所示：

public_html/your_folder_name

在浏览器中检查！

Answer 2

最终能够弄清楚，我只是希望它会帮助像我这样的人。
以下是 webpack 配置文件的外观，检查指定的 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 安装

这应该为您提供所有依赖项（节点模块）

然后

npm 运行生产

这应该会为您提供最终的index.js文件，该文件将包含捆绑的所有代码

完成后，将index.html和index.js文件放在 www/html 或 Web 应用程序根目录下，仅此而已。

Answer 3

1. 转到您的项目根目录，例如： cd /home/ubuntu/react-js 。
2. 首先构建您的项目： npm run build 。
3. 检查您的构建目录，以下所有文件都将在构建文件夹中可用：

   asset-manifest.json
   favicon.ico
   manifest.json
   robots.txt
   static 
   assets
   index.html
   precache-manifest.ddafca92870314adfea99542e1331500.js 
   service-worker.js 

4. 将构建文件夹复制到您的 apache 服务器，即/var/www/html ：

   sudo cp -rf build /var/www/html

5. 转到站点可用目录：

   cd /etc/apache2/sites-available/

6. 打开000-default.conf文件：

sudo vi 000-default.conf并将 DocumentRoot 路径重新更改为/var/www/html/build 。

7. 现在转到 Apache 配置。

cd /etc/apache2

sudo vi apache2.conf

添加以下代码段：

 <Directory /var/www/html> Options Indexes FollowSymLinks AllowOverride All Require all granted </Directory>

8. 在/var/www/html/build中创建一个文件：

   sudo vi .htaccess

 Options -MultiViews RewriteEngine On RewriteCond %{REQUEST_FILENAME} !-f RewriteRule ^ index.html [QSA,L]

9. 重启 Apache 服务器：

   sudo service apache2 restart

Answer 4

在进行 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：如果您想经常更改服务器中的构建文件位置，使用相对路径方法很容易。

Answer 5

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

为了能够访问您的“React App”，您需要：

1. 将你的 React 应用打包成一个包
2. 让 Apache 指向您服务器中的 html 文件，并允许外部访问。

您可能在这里拥有所有信息： 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

Answer 6

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

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

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

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

ProxyRequests On
ProxyVia On
<Proxy *>
  Order deny,allow
  Allow from all
  </Proxy>

ProxyPass /myreactapp http://127.0.0.1:8080/
ProxyPassReverse /myreactapp  http://127.0.0.1:8080/

3.) 重启 Apache

Answer 7

正如 React 的官方文档中所描述的那样，如果您使用在底层使用 HTML5 pushState历史 API 的路由器，您只需将以下内容添加到您的 react-app 的public目录中的.htaccess文件中。

Options -MultiViews
    RewriteEngine On
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.html [QSA,L]

如果使用相对路径更新package.json ，如下所示：

"homepage": ".",

注意：如果您使用react-router@^4 ，您可以使用任何<Router>上的basename来根<Link> > 。

import React from 'react';
import BrowserRouter as Router from 'react-router-dom';
...
<Router basename="/calendar"/>
<Link to="/today"/>

Answer 8

首先，添加一个 pom.xml 并使其成为一个 maven 项目，然后构建它。 它将在目标文件夹中为您创建一个 War 文件，然后您可以将其部署到您想要的任何位置。

pom.xml http://maven.apache.org/xsd/maven-4.0.0.xsd"> 4.0.0 it.megadix create-react-app-servlet 0.0.1-SNAPSHOT 战争

<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。

Answer 9

首先使用sudo apt install apache2 apache2然后在 proj dir 中运行comment blow

npm run build

或者

yarn run build

然后

sudo cp -rf build/* /var/www/html/mySite;
cd /etc/apache2/sites-available/;
sudo cp 000-default.conf mySite.conf;
sudo nano /mySite.conf

在这个文件中添加/取消注释这些行

ServerName myDomin.com
ServerAlias www.myDomin.com
DocumentRoot /var/www/html/mySite

在 appache 配置之后，您应该将您的域添加到您的系统中，以便

sudo nano /etc/hosts

在此文件中添加您的 VPS IP 地址，例如，如果您的 IP 地址是192.168.1.1所以

127.0.0.1       localhost myDomin.com
192.168.1.1       myDomin.com www.myDomin.com

如果您知道如何或只是使用 cloudflare 或类似的东西，现在请自行在您的 VPS 中设置您的名称服务器。

注意：如果你想在 localhost 中使用，只需运行这个cp build/* /var/www/html/ && sudo systemctl restart apache2