如何在 Apache HTTP Server 上部署应用程序

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

我已经看到了这个后 对 Apache 服务器上的 js 做出反应，但它没有任何超过几个指导方针

165543 次浏览
小开

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

要使用「反应应用程式」 ，你需要:

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

这里可能有所有的信息: Apache 服务器的 https://httpd.apache.org/docs/trunk/getting-started.html，以及制作 javascript 包 https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr的信息

小开
最佳答案

最终还是弄明白了，我只希望能帮到像我这样的人。
下面是 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 安装

这应该可以得到所有的依赖项(节点模块)

那么

运行生产

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

完成后，将 index.html和 index.js文件放在 www/html 或 web 应用程序根目录下，就这样。

小开

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

这可能看起来有点多余，但是如果你有其他不属于你的 React 应用程序的页面(比如 PHP 页面) ，你可以通过80端口提供所有的东西，让它看起来是一个有凝聚力的网站。

1)使用 npm run 启动响应应用程序，或者使用用于启动节点服务器的任何命令。假设它在 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

小开

首先，在你的反应项目到你的 包裹 Json文件，并调整这行代码，以匹配您的目标域地址 + 文件夹:

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

其次，在你的反应项目中进入 晚期并输入:

npm run build

现在，拿走所有文件从那个新创建的 建造文件夹并将它们上传到 Your _ file _ name ，子文件夹中的 filezilla 如下:

public_html/your_folder_name

检查浏览器！

小开

在进行 npm 构建之前,
1)转到 React 项目根文件夹并打开 package.json。
2)在 package.json中加入“主页”属性

  • 如果要提供 绝对的路径

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

  • if you want to provide relative path

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

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

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

PS: 如果您想频繁地更改服务器中的构建文件位置，那么可以很容易地使用相对路径方法。

小开

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

Pom.xml Http://maven.apache.org/xsd/maven-4.0.0.xsd”> 4.0 Megadix Create-response-app-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。

小开
  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

  1. 将构建文件夹复制到 Apache 服务器，即 /var/www/html:

    sudo cp -rf build /var/www/html

  2. 转到网站-可用目录:

    cd /etc/apache2/sites-available/

  3. 打开 000-default.conf文件:

并将 DocumentRoot 路径更改为 /var/www/html/build。

Screenshot of the correct DocumentRoot setting

  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

小开

正如在 React 的官方 医生中描述的那样，如果你使用的路由器使用的是 HTML5 pushState历史 API，你只需要将下面的内容添加到你的 response-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"/>
小开

首先用 sudo apt install apache2安装 apache2，然后在 proj dir 中运行推荐打击

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

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

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 由您自己如果 你懂的或只是使用 Cloudflare 或类似的东西。

注意: 如果您想在 localhost 中使用，只需运行此 cp build/* /var/www/html/ && sudo systemctl restart apache2


提交答案