我已经从https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm创建了一个基本的React应用程序,我想在基于Apache的服务器上运行这个测试代码,我知道我需要创建一个可分发的构建,但我不知道如何做到这一点,也找不到明确的说明。
我看过这篇文章React,js on Apache server,但它没有什么比几个指导方针
我已经从https://www.tutorialspoint.com/reactjs/reactjs_jsx.htm创建了一个基本的React应用程序,我想在基于Apache的服务器上运行这个测试代码,我知道我需要创建一个可分发的构建,但我不知道如何做到这一点,也找不到明确的说明。
我看过这篇文章React,js on Apache server,但它没有什么比几个指导方针
9条答案
按热度按时间x7rlezfr1#
首先,在您的react项目中,转到您的package.json文件,并调整以下代码行以匹配您的目标域地址+文件夹:
其次,转到react项目中的terminal并键入:
现在,从新创建的build文件夹中取出所有文件,并将它们上传到your_folder_name,filezilla位于如下所示的子文件夹中:
在浏览器中检查!
mftmpeh82#
最终能够弄清楚,我只是希望它能帮助像我这样的人。
下面是web包配置文件的样子,检查指定的dist目录和输出文件。我缺少指定dist目录路径的方法
然后包json文件
请注意脚本部分和生产部分,生产部分为您提供最终的可部署index.js文件(名称可以是任何内容)
其余的事情将取决于您的代码和组件
执行以下命令序列
npm安装
这应该会得到所有的依赖项(节点模块)
然后
npm运行生产
这应该会得到最终的
index.js
文件,它将包含所有捆绑的代码完成后,将
index.html
和index.js
文件放在www/html或web应用程序根目录下,就这样。voase2hg3#
1.转到项目根目录,例如:
cd /home/ubuntu/react-js
.1.首先构建您的项目:
npm run build
.1.检查构建目录,构建文件夹中将包含以下所有文件:
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
添加以下代码段:
1.在
/var/www/html/build
中创建一个文件:sudo vi .htaccess
个1.重新启动Apache服务器:
sudo service apache2 restart
xzv2uavs4#
在进行npm构建之前,
1)转到React项目根文件夹并打开
package.json
。2)将“主页”属性添加到
package.json
使用相对路径方法可能会警告IDE中出现语法验证错误。但编译期间生成时不会出现任何错误。
3)保存
package.json
,并在终端运行npm run-script build
4)将
build/
文件夹的内容复制到服务器目录。PS:如果你想经常改变你服务器中的构建文件位置,使用相对路径方法很容易。
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
g2ieeal76#
您可以通过Apache代理运行它,但它必须在虚拟目录(例如http://mysite.something/myreactapp)中运行。
这看起来有点多余,但如果你有其他页面不是你的React应用程序的一部分(eidogg. PHP页面),你可以通过端口80提供所有服务,并使它看起来整个事情是一个有凝聚力的网站。
1.)使用npm run或任何用于启动节点服务器的命令启动react应用程序。
2.)编辑httpd-proxy.conf并添加:
3.)重新启动Apache
cgvd09ve7#
正如React的官方docs中所描述的,如果您使用的路由器在引擎盖下使用HTML5
pushState
历史API,您只需要将以下内容添加到react-app的public
目录中的.htaccess
文件中。如果使用相对路径,则按如下方式更新
package.json
:注意:如果您使用的是
react-router@^4
,则可以使用basename
属性在任何<Router>
上作为<Link>
的root用户。mwecs4sa8#
首先,添加一个pom.xml,使其成为一个maven项目,然后构建它。它将在目标文件夹中为您创建一个War文件,然后您可以将其部署到任何您想要的位置。
“http://maven.apache.org/xsd/maven-4.0.0.xsd〉4.0.0 it.megadix创建React应用程序服务小程序0.0.1-快照战争
注意:-如果在运行项目后发现空白页,请清除缓存或重新启动IDE。
pbwdgjma9#
首先使用
sudo apt install apache2
安装apache2
,然后在项目目录中运行commend blow或
然后
在此文件中添加/取消注解以下行
在Appache配置之后,您应该将domin添加到系统中,以便
在此文件中添加您的VPS IP地址,例如,如果您的IP地址为
192.168.1.1
,则现在设置你的名字服务器在你的VPS由你自己如果you know how或只是使用cloudflare或类似的东西。
注意:如果要在localhost中使用,只需运行此
cp build/* /var/www/html/ && sudo systemctl restart apache2