Javascript 如何在 Apache Web 服务器上部署 React 应用程序
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42461279/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to deploy a React App on Apache web server
提问by vishal dharankar
I have created a basic React App from https://www.tutorialspoint.com/reactjs/reactjs_jsx.htmhere , 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.
我已经从https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm这里创建了一个基本的 React 应用程序，我想在基于 Apache 的服务器上运行这个测试代码，我知道我需要创建一个可分发的构建，但我是无法弄清楚如何做到这一点，也找不到明确的说明。
I have seen this post React,js on Apache serverbut it doesn't have anything more than few guidelines
我在 Apache 服务器上看到过这篇React,js帖子，但它只有一些指导方针
采纳答案by vishal dharankar
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
最终能够弄清楚，我只希望它可以帮助像我这样的人。
以下是 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;
Then the package json file
然后打包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"
}
}
Notice the script section and production section, production section is what gives you the final deployable index.js file ( name can be anything )
注意脚本部分和生产部分，生产部分为您提供最终可部署的 index.js 文件（名称可以是任何内容）
Rest fot the things will depend upon your code and components
其余的事情将取决于您的代码和组件
Execute following sequence of commands
执行以下命令序列
npm install
安装
this should get you all the dependency (node modules)
这应该为您提供所有依赖项（节点模块）
then
然后
npm run production
npm 运行生产
this should get you the final index.jsfile which will contain all the code bundled
这应该会为您提供index.js包含所有捆绑代码的最终文件
Once done place index.htmland index.jsfiles under www/html or the web app root directory and that's all.
完成后index.html，index.js在 www/html 或 web 应用程序根目录下放置和文件，仅此而已。
回答by aldobsom
Firstly, in your react project go to your package.jsonand adjust this line line of code to match your destination domain address + folder:
首先，在你的反应项目中，转到你的package.json并调整这行代码以匹配你的目标域地址 + 文件夹：
"homepage": "https://yourwebsite.com/your_folder_name/",
Secondly, go to terminalin your react project and type:
其次，转到您的反应项目中的终端并键入：
npm run build
Now, take all filesfrom that newly created buildfolder and upload them into your_folder_name, with filezilla in subfolder like this:
现在，从新创建的构建文件夹中取出所有文件并将它们上传到 your_folder_name，在子文件夹中使用 filezilla ，如下所示：
public_html/your_folder_name
Check in the browser!
在浏览器中查看！
回答by Remi Marenco
As said in the post, React is a browser based technology. It only renders a view in an HTML document.
正如帖子中所说，React 是一种基于浏览器的技术。它仅呈现 HTML 文档中的视图。
To be able to have access to your "React App", you need to:
为了能够访问您的“React App”，您需要：
- Bundle your React app in a bundle
- Have Apache pointing to your html file in your server, and allowing access externally.
- 将你的 React 应用打包成一个包
- 让 Apache 指向您服务器中的 html 文件，并允许外部访问。
You might have all the informations here: https://httpd.apache.org/docs/trunk/getting-started.htmlfor the Apache server, and here to make your javascript bundle https://www.codementor.io/tamizhvendan/beginner-guide-setup-reactjs-environment-npm-babel-6-webpack-du107r9zr
您可能在此处拥有所有信息：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
回答by kavinda
Before making the npm build,
1) Go to your React project root folder and open package.json.
2) Add "homepage" attribute to package.json
在进行 npm 构建之前，
1) 转到您的 React 项目根文件夹并打开package.json.
2) 添加“主页”属性到package.json
if you want to provide absolutepath
"homepage": "http://hostName.com/appLocation", "name": "react-app", "version": "1.1.0",if you want to provide relativepath
"homepage": "./", "name": "react-app",Using relative path method may warn a syntax validation error in your IDE. But the build is made without any errors during compilation.
如果你想提供绝对路径
"homepage": "http://hostName.com/appLocation", "name": "react-app", "version": "1.1.0",如果你想提供相对路径
"homepage": "./", "name": "react-app",使用相对路径方法可能会在您的 IDE 中警告语法验证错误。但是在编译过程中构建没有任何错误。
3) Save the package.json, and in terminal run npm run-script build
4) Copy the contents of build/folder to your server directory.
3) 保存package.json, 并在终端运行npm run-script build
4) 将build/文件夹的内容复制到您的服务器目录。
PS: It is easy to use relative path method if you want to change the build file location in your server frequently.
PS：如果您想经常更改服务器中的构建文件位置，使用相对路径方法很容易。
回答by Peter Drinnan
You can run it through the Apache proxy, but it would have to be running in a virtual directory (e.g. http://mysite.something/myreactapp).
您可以通过 Apache 代理运行它，但它必须在虚拟目录中运行（例如http://mysite.something/myreactapp）。
This may seem sort of redundant but if you have other pages that are not part of your React app (e.g. PHP pages), you can serve everything via port 80 and make it apear that the whole thing is a cohesive website.
这可能看起来有点多余，但如果您有其他不属于您的 React 应用程序的页面（例如 PHP 页面），您可以通过端口 80 提供所有内容，并使整个网站看起来像是一个有凝聚力的网站。
1.) Start your react app with npm run, or whatever command you are using to start the node server. Assuming it is running on http://127.0.0.1:8080
1.) 使用 npm run 或任何用于启动节点服务器的命令启动您的 React 应用程序。假设它在http://127.0.0.1:8080上运行
2.) Edit httpd-proxy.conf and add:
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.) Restart Apache
3.) 重启 Apache
回答by Harsh Priyadarshi
First, add a pom.xml and make it a maven project and then build it. It will create a War file for you in the target folder after that you can deploy it wherever you want.
首先，添加一个 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 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 war
<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>
Note:- If you find a blank page after running your project then clear your cache or restart your IDE.
注意：- 如果在运行项目后发现空白页，请清除缓存或重新启动 IDE。
