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

wpx232ag  于 2022-11-16  发布在  Apache
关注(0)|答案(9)|浏览(224)

我已经从https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm创建了一个基本的React应用程序，我想在基于Apache的服务器上运行这个测试代码，我知道我需要创建一个可分发的构建，但我不知道如何做到这一点，也找不到明确的说明。
我看过这篇文章React,js on Apache server，但它没有什么比几个指导方针

apache

9条答案

按热度按时间
x7rlezfr

x7rlezfr1#

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

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

其次，转到react项目中的terminal并键入：

npm run build

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

public_html/your_folder_name

在浏览器中检查！

赞(0）分享  回复(0）举报  2022-11-16
mftmpeh8

mftmpeh82#

最终能够弄清楚，我只是希望它能帮助像我这样的人。
下面是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安装
这应该会得到所有的依赖项（节点模块）
然后
npm运行生产
这应该会得到最终的index.js文件，它将包含所有捆绑的代码
完成后，将index.html和index.js文件放在www/html或web应用程序根目录下，就这样。

赞(0）分享  回复(0）举报  2022-11-16
voase2hg

voase2hg3#

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

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

1.将build文件夹复制到apache服务器，即/var/www/html：
sudo cp -rf build /var/www/html
1.转到可用站点目录：
cd /etc/apache2/sites-available/
1.打开000-default.conf文件：
sudo vi 000-default.conf并将DocumentRoot路径重新更改为/var/www/html/build。

1.现在转到Apache配置。
cd /etc/apache2
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]

1.重新启动Apache服务器：
sudo service apache2 restart

赞(0）分享  回复(0）举报  2022-11-16
xzv2uavs

xzv2uavs4#

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

赞(0）分享  回复(0）举报  2022-11-16
cwxwcias

cwxwcias5#

正如在帖子中所说的，React是一种基于浏览器的技术。它只在HTML文档中呈现视图。
为了能够访问您的“React应用程序”，您需要：
1.将React应用捆绑到一个包中
1.让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

赞(0）分享  回复(0）举报  2022-11-16
g2ieeal7

g2ieeal76#

您可以通过Apache代理运行它，但它必须在虚拟目录（例如http://mysite.something/myreactapp）中运行。
这看起来有点多余，但如果你有其他页面不是你的React应用程序的一部分（eidogg. PHP页面），你可以通过端口80提供所有服务，并使它看起来整个事情是一个有凝聚力的网站。
1.)使用npm run或任何用于启动节点服务器的命令启动react应用程序。
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

赞(0）分享  回复(0）举报  2022-11-16
cgvd09ve

cgvd09ve7#

正如React的官方docs中所描述的，如果您使用的路由器在引擎盖下使用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，则可以使用basename属性在任何<Router>上作为<Link>的root用户。

import React from 'react';
import BrowserRouter as Router from 'react-router-dom';
...
<Router basename="/calendar"/>
<Link to="/today"/>
赞(0）分享  回复(0）举报  2022-11-16
mwecs4sa

mwecs4sa8#

首先，添加一个pom.xml，使其成为一个maven项目，然后构建它。它将在目标文件夹中为您创建一个War文件，然后您可以将其部署到任何您想要的位置。
“http://maven.apache.org/xsd/maven-4.0.0.xsd〉4.0.0 it.megadix创建React应用程序服务小程序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。

赞(0）分享  回复(0）举报  2022-11-16
pbwdgjma

pbwdgjma9#

首先使用sudo apt install apache2安装apache2，然后在项目目录中运行commend 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配置之后，您应该将domin添加到系统中，以便

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

现在设置你的名字服务器在你的VPS由你自己如果you know how或只是使用cloudflare或类似的东西。
注意：如果要在localhost中使用，只需运行此cp build/* /var/www/html/ && sudo systemctl restart apache2

赞(0）分享  回复(0）举报  2022-11-16
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备2022004421号-2 NULL123 https://www.null123.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com