将Create-React-App部署到多个URL
是指将使用Create-React-App创建的React应用程序部署到多个不同的URL地址上，以便在不同的环境中访问和使用该应用程序。
Create-React-App是一个用于快速创建React应用程序的脚手架工具，它提供了一个基本的项目结构和配置，使得开发者可以更专注于编写应用程序的业务逻辑而不必关心底层的构建配置。
要将Create-React-App部署到多个URL，可以按照以下步骤进行操作：
- 构建应用程序：在部署之前，首先需要使用Create-React-App提供的构建命令将应用程序打包成静态文件。在项目根目录下运行以下命令：
npm run build这将在项目的build目录下生成一个优化过的、可部署的静态文件。
- 部署静态文件：将构建生成的静态文件部署到服务器或云存储服务上。可以使用各种方法来实现，例如将文件上传到云存储服务（如腾讯云对象存储 COS）或将文件复制到Web服务器的公共目录中。
- 配置URL路由：如果需要将Create-React-App部署到多个URL上，可以使用URL路由来实现。可以选择使用React Router等第三方库来管理URL路由。通过配置路由规则，可以将不同的URL映射到不同的React组件或页面。
- 域名解析：如果需要使用自定义的域名来访问部署的应用程序，需要进行域名解析。将域名解析到部署应用程序的服务器IP地址或使用CDN服务。
- 反向代理：如果需要在同一台服务器上部署多个Create-React-App应用程序，并通过不同的URL访问它们，可以使用反向代理来实现。例如，可以使用Nginx等Web服务器配置反向代理规则，将不同的URL映射到不同的应用程序。
总结： 将Create-React-App部署到多个URL需要进行应用程序的构建、静态文件的部署、URL路由的配置、域名解析和反向代理等步骤。通过这些步骤，可以实现在不同URL上访问和使用Create-React-App应用程序。
腾讯云相关产品推荐：
相关·内容
我使用create-react-app编写了我的react应用程序，然后将它部署到Heroku上。在我的应用程序中，我会显示一个iframe来加载另一个网页。我可以在本地运行它，但是当部署到heroku时我会遇到以下错误：
拒绝在帧中显示“some_url”，因为它将“X帧选项”设置为“拒绝”。
当部署到heroku时，我如何配置来解决这个问题。
谢谢
浏览 0提问于2018-06-02得票数 0
我有一个用create-react-app构建的，托管在netlify中。
在这个中，提到了我需要为SPA编写重定向规则。
/* /index.html 200
但是重定向到index.html是不起作用的，因为没有使用该URL呈现任何视图。我还尝试重定向到/，如下所示
[[redirects]]
from = "/*"
to = "/"
但这也不起作用。
如何为create-react-app执行通用重定向
浏览 1提问于2019-05-05得票数 20
回答已采纳
9回答
我正在使用create-react-app开发我的react应用程序，并将其部署到Github页面。我的应用程序在开发过程中工作正常。但是，当我部署时，它成功地部署，但背景映像未能加载。
在index.css文件中加载背景图像：
body::after {
background-image: url("/background-img.jpg");
}
package.json主页
{
"homepage": "http://bigfanjs.github.io/my-repo/",
}
app目录上的背景图像：
| build
|
浏览 4提问于2018-06-23得票数 6
我已经在服务器上渲染了经典的web应用程序。我想在React中创建管理面板作为单页面应用程序。我想从服务器管理面板。我尝试使用create-react-app，但它假定我从根URL提供SPA服务。如何配置create-react-app为"admin"子目录中的app提供服务？在文档中我找到了"homepage"属性，但如果我理解正确的话，它需要完整的url。我不能给出完整的url，因为我的应用程序部署在少数环境中。
浏览 3提问于2018-03-22得票数 59
当我直接访问'‘时，它显示错误'404 not found’，但在从主页('')注销后，它将我重定向到'‘。
这个问题是在我的create-react-app部署之后出现的。我们使用nginx服务器进行部署。
浏览 4提问于2019-02-10得票数 0
如何在Apache /XAMPP服务器上部署构建？
我用create-react-app创建了一个应用程序，我在这个应用程序上有两个页面
当我执行yarn start或npm start时，它工作正常，所有页面在URL导航或按钮单击上都呈现正确。
我执行了构建命令
npm运行构建
它正在生成static和index.html文件夹上的所有build文件。
我将此构建文件夹内容移至www of wamp文件夹，并在url http://localhost上执行，它只显示主页。下一页给出了404 not found error
但是当我执行npm命令的serve模块时，它在http://l
浏览 10提问于2018-01-10得票数 10
回答已采纳
2回答
使用create-react-app部署到Netlify。
问题：
而不是构建用于生产部署的源映射。
具有用于调试的其他构建的源映射。
浏览 1提问于2018-06-11得票数 1
回答已采纳
我是个新手。我想将我的react项目部署到Heroku。为此，我实现了一个简单的express服务器。但是，当我使用node server/server.js运行服务器时，在localhost:3000上的浏览器上没有显示任何内容。我是不是漏掉了什么明显的东西？ 我的项目结构： ? server.js： const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000
浏览 113提问于2020-10-15得票数 0
回答已采纳
我有一个create-react-app项目()，我想使用将其部署到Github页面。在本教程之后，我在package.json中添加了以下内容
但是，如果我运行npm run deploy，它将被发布，
但是页面仍然显示基于README.md的默认内容。我是否需要更改部署目录？
浏览 5提问于2019-05-31得票数 16
回答已采纳
我仍然在学习网络开发和课程，所以，我对每一所学校都有不同的回复。
我在每个大型回购中都有许多小项目，直到我开始使用create-react-app才有问题，因为如果没有部署命令，我就无法部署到gh-pages，删除gh-pages上的其他项目文件夹。是否可能以某种方式将其部署到gh-pages中的子文件夹中？
浏览 0提问于2018-08-19得票数 1
回答已采纳
6回答
我想将我的create-react-app项目部署到GitHub页面。但我有几把秘钥。如何在我的React应用程序中管理这些密钥？
浏览 25提问于2018-12-06得票数 20
我正在使用create-react-app，我应该不同地设置项目的prod env，dev env，然后部署到dev server和prod server(分开) 现在，我找不到解决这个问题的好方法，我正在修改自己的配置值，然后再部署到服务器(prod或dev)。但它是低效和不稳定的。 例如) //config.json ...
"db": {
"prodSchema": "foo_p",
"devSchema": "foo_d",
"username": "dan
浏览 19提问于2019-01-25得票数 2
回答已采纳
我一直在互联网上搜索这个问题，我得到的结果是没有必要创建其他页面，因为react是为改变页面内容的单页面应用程序或解决方案设计的，而不是页面(url)本身。我真正想知道的是:当我用create-react-app创建一个应用程序时，我得到了所有的设置，现在我可以创建一个新的html文件，就像在公共目录中创建的默认index.html一样，并将组件呈现到这个新文件中吗？
浏览 2提问于2019-08-05得票数 0
我想将用create-react-app创建的React项目部署到Heroku服务器上。
简单地按到Heroku会使应用程序在开发模式下部署。
(也许Heroku呼吁启动npm，而不是建立npm？)
我不想使用任何内置包来解决这个问题。
在生产中配置Heroku以构建应用程序的手动方法是什么？
浏览 1提问于2018-05-14得票数 0
我已经使用Azure中的ftp在site/wwwroot/文件夹中部署了create-react-app构建文件夹。但我的web url仍然运行azure的默认页面
我已经使用npm run build命令创建了构建
那么我如何在Azure上部署我的静态create-react-app呢？
我的package.json文件是-
{
"name": "yoke",
"version": "0.1.0",
"private": true,
"dependencies": {
&#
浏览 0提问于2019-06-21得票数 0
我有两个react web应用程序(都是使用create-react-app创建的)，我想将它们部署到同一个域的不同路径上。例如：
myapp.firebaseapp.com/auth myapp.firebaseapp.com/main
我该如何做到这一点？
浏览 0提问于2018-03-08得票数 2
1回答
我已经使用create-react-app创建了一个非常简单的MERN应用程序，没有使用mongo数据库。当我部署到heroku时，我看到的只是一个空白页面。我试过很多东西，但都没有成功。API正确发送电子邮件，页面标题正确，但缺少所有内容。请帮我看一下，这是我第一次部署。
这是代码：<code>C0</code>这是部署：<code>C1</code>
非常感谢
-编辑--
以下是日志：
<code>A2</code>
浏览 8提问于2020-11-14得票数 2
回答已采纳
我对我的项目使用create-react-app，使用docker作为我的开发环境。
现在我想知道如何将我的项目部署到AWS中的最佳实践(我将部署docker)。
也许我的问题是一个空洞的问题，但我真的被它卡住了。
我的docker文件有一个命令yarn start...对于dev，我不需要构建任何东西就足够了，我的包将在内存中运行，但对于QA或PROD，我希望使用npm run build构建，但据我所知，它将创建一个包含应该在prod env上使用的文件的新文件夹。
也就是说，我的问题是:对于这种情况，最佳实践是什么？
谢谢。
浏览 0提问于2017-07-08得票数 1
我在网上搜索了一个关于如何在Microsoft的IIS上部署一个React的解决方案。
我成功地部署了多个Node.JS应用程序，但没有这样的运气。
我尝试过的：
安装
我跑了：npm i -g create-react-app
我创建了一个基本的react应用程序：create-react-app my-app
我在web.config路由中创建了一个名为./public的文件
web.config
<?xml version="1.0"?>
<configuration>
<system.webServer>
浏览 0提问于2018-08-13得票数 15
回答已采纳
我使用create-react-app创建了一个应用程序，设置了TravisCI，并将其部署到Heroku。应用程序部署(服务器正在运行，我已经进入并看到文件)，但是/build文件夹不存在。
根据的说法，这是因为我在/build文件中列出了/build，我可以通过删除该条目来解决问题；然而，建议不要将生成的文件保存在版本控制中。
是否有一种方法可以根据生产需要标记我的/build文件夹？我是不是以正确的方式想这件事？
浏览 1提问于2017-10-12得票数 0
回答已采纳
我已经使用create-react-app开发了一个应用程序，我想部署这个应用程序来跨越Jenkins。
您是否有良好的实践来创建一个jenkins作业，该作业将构建包的节点应用程序并使其可用于某些URL？
谢谢。
浏览 0提问于2017-06-13得票数 2
1回答
我使用的是create-react-app、Travis CI和netlify。我有一个配置文件，如下所示：
require('dotenv').load();
module.exports = {
API_BASE_URL: process.env.REACT_APP_DATABASE_URL || 'http://localhost:8080'
}
当我尝试部署到Netlify时，在Travis中得到以下错误：
Creating an optimized production build...
Failed to compile.
Failed
浏览 0提问于2018-02-21得票数 1
2回答
我正在尝试通过ftp部署我的react应用程序的npm构建版本，以使web服务变蓝。我移动了构建文件夹，但是当我加载应用程序的URL时，默认屏幕将加载Hey Node Developers!。
我可以通过github和kudu部署。但是，我不认为这是一个生产质量的应用程序，因为它不是用npm run build与create-react-app一起构建的。
我已经通过这个蔚蓝的，以及各种博客。我还包括了web.config文件。没有什么能让我的页面正确加载。
我尝试过使用节点版本10.1、10.14和LTS。我尝试过同时使用Linux和。
浏览 1提问于2019-06-26得票数 1
我已经用create-react-app创建了一个React应用程序，我想将它部署到Back4App。
问题是我想要部署build文件夹，而不是public文件夹(我理解这是Back4App /ParsePlatform的默认设置)。
到目前为止，我还没有找到任何方法来配置deploy来使用public文件夹以外的其他任何东西。
有什么解决办法吗？
浏览 1提问于2018-11-17得票数 2
回答已采纳
1回答
我正在向Heroku部署一个React应用程序(15.4.2版)，但我在访问环境变量时遇到了麻烦--如果有任何澄清，我们将不胜感激。
我最初是用create-react-app启动这个应用程序的，但最后却把它弹出，这样我就可以多做一些控制。
在config/env.js中，我设置了我想要的变量API_URL，如下所示：
function getClientEnvironment(publicUrl) {
var processEnv = Object
.keys(process.env)
.filter(key => REACT_APP.test(key))
浏览 3提问于2017-05-23得票数 2
回答已采纳
当涉及到部署全栈应用程序时，我还是个新手。
我正在构建一个基本的react应用程序(用create-react-app创建)，它需要部署在Heroku上，并点击我的Rails后端应用程序接口(独立的repo，已经在Heroku上构建和部署)。是否需要设置http服务器(即Express或Nginx)才能将请求从浏览器路由到后端应用？或者，我是否可以仅依靠默认的webpack生产服务器来处理此问题。
感谢任何人的帮助！！
浏览 8提问于2018-09-07得票数 1
1回答
我已经制作了一个MERN (i.e-Mongo,Express,React,Node.js)应用程序，并希望在Heroku上部署。我使用create-react-app创建了react，文件夹结构如下所示。
React-frontend
---->Node_modules
----->Public
------->src
------->package.json
---------> readme.md
React-backend:
----->Node_modules
------&g
浏览 0提问于2018-03-23得票数 1
我正在尝试为我的GitHub项目页面使用自定义域，该页面位于
我已经差不多了。但目前，显示一个白屏，控制台错误为GET https://tahdo.app/todo/static/css/main.3bffc114.chunk.css net::ERR_ABORTED 404。
我假设这意味着将被替换，而不是用我的自定义域替换整个GH Page URL。我有GitHub指定的4个A记录，并且CNAME按照他们的建议指向votemike.github.io。
补充信息:我正在使用create-react-app和gh-pages部署到GH页面
我做错了什么？
浏览 0提问于2019-06-04得票数 0
我有一个用create-react-app来部署生产构建的Reactive前端--我只做了npm run build。我的应用程序使用了Django Rest FrameWork API后端。
我如何设置应用程序部署在一个服务器上。是否有一种方法可以将React前端存储在Django中并将其路由到它，并让来自前端的请求访问api/视图或端点。
部署这样的东西最好的策略是什么，还是在不同的服务器上拼命地托管前端和后端更好？
基本上:我如何将我的react前端构建合并到Django DRF中进行部署？
浏览 0提问于2018-11-28得票数 7
回答已采纳
我正在尝试使用我的Github存储库将一个create-react-app部署到Heroku，但我在部署时一直收到这个失败的错误：
“->应用程序与buildpack不兼容： bash: /app/tmp/buildpacks/37ed7dcef0d74398ac56add743d1b21da65705805e483325eac5f7b0d4b7437ae2907af6ab6df9bd1b996f869fee5ee8c1a4984f44fe6d8051b8e2e7e2665ca8/bin/detect:没有这样的文件或目录详细信息：！推送失败”
这是我第一次将react应用程序部署到He
浏览 0提问于2018-08-17得票数 1
我有一个与部署我的react应用程序到firebase主机相关的问题，我的react应用程序是用create-react-app创建的，build文件夹已经准备好，我已经成功地将我的应用程序部署到firebase，但没有显示，这是我的firebase.json文件 firebase.json 浏览器中的错误如下：enter image description here 这个应用程序在我的电脑本地运行得很好，有人知道怎么解决这个问题吗？
浏览 15提问于2020-08-03得票数 0
我选择使用express server进行部署，如create-react-app用户指南的部分所述。express服务器设置在一个EC2实例上，前面是一个AWS Elb，SSL在此终止。如何设置http请求到https的重定向？
如果有解决方案，我也对使用Nginx持开放态度。
感谢任何人的帮助。
浏览 0提问于2017-08-05得票数 6
回答已采纳
当我在我的create-react-app项目上进行生产构建并将其部署到Heroku时，我遇到了一个问题。在Heroku上，它仍然使用开发模式。我已经在Heroku上将NODE_ENV更改为production，但它仍然不想在我的项目中设置它。
浏览 6提问于2018-04-27得票数 1
1回答
目前有一个在Github页面上成功部署的Create-React-App项目。几分钟后，我刷新了页面，它不再呈现。我没有做任何改变。以下是出现的控制台错误。以及到repo的链接。 photo 1 photo 2 https://github.com/anthonyhem/page
浏览 20提问于2019-07-04得票数 0
我花了相当多的时间阅读堆栈溢出的问题，却找不到我要找的东西。
我正在创建一个Flask，并在GAE上部署React前端。我的目录结构如下所示：
application_folder
-> api
-> -> app.yaml
-> -> main.py
-> react_frontend
-> -> app.yaml
-> -> {directories after using create-react-app}
促进发展
1.)React应用程序的package.json，我已经设置了一个代理：
"proxy"
浏览 7提问于2020-10-23得票数 3
回答已采纳
1回答
我们正在使用液化库进行数据库版本控制。我们使用它将数据库更改部署到任何层，例如TST、AT和PROD.We构建一次，并将相同的更改部署到任何地方，但我们有一些应该部署到特定层的东西。
例如：
假设我们将app URL存储在DB中，并且每个环境(INT、UAT、PROD)都有自己不同的应用程序URL。我们怎样才能用清算脚本来完成这个任务呢？
浏览 3提问于2016-03-31得票数 1
回答已采纳
1回答
如何将CRA从纱线工作区移除？
、、、、
我正在使用纱线工作区( Monorepo )，我添加了一个已经制作好的create应用程序，但是现在，每次我只需要从Monorepo构建一个项目时，它就会安装create应用程序中的所有东西，即使它不会被使用。
我需要做的是保持从在node_modules中创建react应用程序到它自己的包中的一切，而不是在根node_modules中。
如何从纱线工作区的共享依赖项中删除CRA依赖项？
例如，如果我有一个Monorepo
- packages/
- create-react-app
- fooApp
- sharedApp
在yarn包中运行create-react-app时，我
浏览 3提问于2020-12-15得票数 2
回答已采纳
我想在不导入less的ReactJS应用程序中使用Antd。主要原因是我正在使用create-react-app样板创建我的应用程序。Antd要求我修改webpack.config.js，以编译在任何服务器上部署代码的较少的代码。我不想通过修改node_modules内部的webpack来编写不好的代码，我也没有足够的知识来使用npm弹出。有人能给我建议一个使用Antd和create-react-app的解决方案吗？
浏览 1提问于2020-11-04得票数 2
我需要开发一个React + .Net核心应用程序，它将部署到Azure实例。我的问题是，我读过一些文章，说我需要2个Azure服务来托管应用程序。1:对于React前端2：.Net核心Web API应用程序
我是否需要有2个Azure服务实例才能部署。一个用于React JS，另一个用于.Net核心API？
我计划在Visual studio .Net React模板应用程序中进行开发。在其中，React应用程序和.Net核心Web位于同一项目中。如果我使用这个模板，我是否可以单独部署React应用程序和.Net核心应用程序接口项目？
或者我应该将React JS、JavaScript项目(
浏览 15提问于2021-03-05得票数 0
我正在开发一个由create-react-app创建的React应用程序，我正在准备部署它。
问题是，对于开发，应用程序使用运行在我的开发环境(localhost：{ api })上的api实例，但是对于已部署的应用程序，它应该指向服务器api实例(api.myapp.com)。
当前，主机只是我的网络组件中的一个变量：
const hostname = 'localhost:9876'
我计划使用webpack来生成静态文件，这些文件将由生产前端提供服务，我希望继续使用npm start作为create-react-app设置的开发工具。
设置我的项目的正确方法是什么，这样主
浏览 5提问于2017-08-30得票数 4
回答已采纳
我用vite.js做了一个react构建。在本地主机上构建生产和测试时，一切工作正常。但是当我部署到Netlify或vercel时，我用react-router创建的路由不能通过直接输入它们的url来访问，而只能通过使用应用程序内部的链接从主页('/')访问。 如果我点击应用程序中的路由链接，路由是有效的，但是如果我直接输入url (例如: mypage/about)，我会得到一个404错误。 我查看了vercel支持，他们说配置中可能缺少重定向，例如，默认情况下由create-react-app设置。在CRA中，它看起来像这样 {
"redirects: [
浏览 47提问于2021-03-17得票数 2
我已经创建了react应用程序，但没有使用样板create-react-app。我想用git hub部署它。我可以部署它吗？如果是，有谁能建议步骤吗？
浏览 2提问于2020-08-05得票数 0
2回答
好吧，我以前从来没有实际部署过一个应用程序。我使用create-react-app创建应用程序，当我使用npm run build时，它会给我一个构建文件夹，但当我尝试将代码推送到github代码库时，它会显示所有内容都是最新的。
我现在应该只关心build文件夹吗？我尝试为我的build文件夹创建一个repo，并将其部署到Heroku，但不起作用。
如果github说一切都是最新的，我不确定如何将我的代码升级到github，然后再升级到Heroku。只是在这里寻找一些反馈。以前还没有真正部署过任何东西。
谢谢!
浏览 0提问于2016-11-30得票数 1
这个问题不会特别详细，因为这个问题是非常基本的，并且与Plesk Onyx如何实现节点支持的限制有关。
我正在尝试将使用create- react -app创建的react应用程序部署到安装了Plesk Onyx的服务器上托管的域。我显然不能摆弄核心服务器，因为我可能会破坏其他域。因此，我需要以Plesk能够正确处理的方式安装此应用程序。我遇到的问题是，我在任何地方都找不到如何做到这一点的指南。
Plesk需要一个非常不灵活的项目结构，它与create-react-app强加的结构完全不同。例如，Plesk要求文档根是应用程序根的子级，这与create-react-app设置项目的方式完全相反
浏览 0提问于2018-07-08得票数 8
我使用create-react-app创建了一个react应用程序，并将其部署到Firebase中：
npm run build && firebase deploy
它部署得很好。问题是，在部署之后，应用程序的前一个版本继续显示在浏览器上--就像浏览器在缓存整个应用程序一样。
我看到了关于这个问题的帖子：
我确实需要重新设置浏览器上的缓存，以获得新版本的应用程序。是否有一种方法可以禁用应用程序的浏览器缓存和React或Firebase控制台，或者至少可以确保显示最新的部署？
浏览 2提问于2018-05-30得票数 4
在将我的create-react-app部署到它自己的子域( build目录的内容复制到根目录)后，应用程序可以正常运行，除非重新加载页面，因为它抛出了一个404错误。
我将package.json中的“主页”属性设置为它的子域，即"“。我还尝试将主页设置为"."，甚至将其完全删除。
这是否与子域在我的主机上的配置方式有关？
浏览 2提问于2017-05-05得票数 1
我有一个想要部署到实例上的create-react-app引导项目。现在，我尝试了两种方法来设置部署，最终只设置了端口，而不是主机。
我的项目架构如下
Project
- Frontend
- Backend
我的主要问题是，尽管我可以在create-react-app构建上设置端口，但我不能将主机名设置为0.0.0.0而不是localhost。
在create-react应用程序中，我在启动脚本中硬编码了HOST=0.0.0.0和PORT=443。
我尝试的另一件事是使用一个脚本在端口443上为页面提供服务。Build在端口443上提供服务，而不是在0.0.0.0上。
Create-reac
浏览 27提问于2019-07-16得票数 8
我正在尝试创建一个npm脚本来帮助部署react应用程序(使用create-react-app)，但我需要在环境或json文件上设置S3存储桶url字符串，这样我就可以在不更改package.json脚本内容的情况下将其用于多个存储桶。老实说，我到处都找过了，但还是没能成功。
有谁知道这是不是可以做到，或者我该怎么做？
浏览 10提问于2019-11-05得票数 0
回答已采纳
为什么我的create-react-app显示的是README.md，而不是index.html？
我已经运行了npm运行构建->纱线运行部署，多次检查文件结构，并阅读了大量的文档。找不到任何其他有相同问题的线程。
谢谢。
浏览 2提问于2017-11-17得票数 4
1回答
动态构建静态网站
、、、、
我正在使用React、Express/Node和MongoDB构建一个简单的网站生成器。我构建了一个UI来接收来自多步骤表单的内容和样式参数，以及一个仪表板，用户可以在第二个位置管理设置。所有数据在需要时使用Express在Mongo中保存/获取。我在前台有一个“发布”按钮，可以向后端发送帖子。
然后，相关的快速路由从mongo获取正确的数据，并将其传递给一个函数，该函数使用自定义模板在本地运行"create-react-app“，并将params/content注入到正确的组件。在此之后，它运行构建并将结果部署到子域。
我的问题是:每次用户点击“发布”按钮时，构建静态文件并部署它们，
浏览 19提问于2020-06-06得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
