[英]How to deploy a create-react-app to a web host (ex. Siteground)?
I'm building a react project using create-react-app and am trying to figure out how to deploy my code to my hosting server on Siteground.我正在使用 create-react-app 构建一个反应项目,并试图弄清楚如何将我的代码部署到我在 Siteground 上的托管服务器。
Does anyone know the best way to do this?有谁知道最好的方法来做到这一点? Do I import my build folder through FTP?
我是否通过 FTP 导入我的构建文件夹? Can I automate the process through GitHub?
我可以通过 GitHub 自动化这个过程吗?
Thanks in advance!提前致谢!
Per the create-react-app
docs, you run npm run build
and basically just take the output and FTP it to your web server.根据
create-react-app
文档,您运行npm run build
并且基本上只是获取输出并将其 FTP 到您的 Web 服务器。
However your question is very broad -- you could automate through GitHub or some other tool, but that's really going to beg opinionated responses on StackOverflow (which isn't the right forum for those kinds of questions).但是,您的问题非常广泛——您可以通过 GitHub 或其他一些工具实现自动化,但这确实会在 StackOverflow(这不是解决此类问题的正确论坛)上寻求自以为是的答复。
npm run build
or yarn build
npm run build
或yarn build
Builds the app for production to the build folder
.将用于生产的应用程序构建到
build folder
。 It correctly bundles React in production mode and optimizes the build for the best performance.它在生产模式下正确地捆绑了 React 并优化了构建以获得最佳性能。
npm run build
creates a build directory with a production build of your app. npm run build
使用应用程序的生产npm run build
创建一个构建目录。 Set up your favorite HTTP server so that a visitor to your site is served index.html, and requests to static paths like /static/js/main.<hash>.js
are served with the contents of the /static/js/main.<hash>.js
file.设置您最喜欢的 HTTP 服务器,以便为您的站点的访问者提供 index.html,并对
/static/js/main.<hash>.js
等静态路径的请求与/static/js/main.<hash>.js
文件。
source: create-react-app来源: 创建反应应用程序
I just uploaded my create-react-app to siteground with FileZilla here is the step by step:我刚刚使用 FileZilla 将我的 create-react-app 上传到了 siteground,这是一步一步的:
npm run build
npm run build
go to cPanel
scroll down and find FTP Accounts
go to cPanel
向下滚动并找到FTP Accounts
public_html
public_html
的新帐户configure FTP client
and under manual setting you've got what you need to connnectconfigure FTP client
,在手动设置下,您已获得连接所需的内容siteManager
then new site
siteManager
然后是new site
host
(in filezilla) === FTP server
(in sitiGround), port
set it as siteground port , protocol and encryption leave it as default host
(in filezilla) === FTP server
(in sitiGround), port
设置为siteground port ,协议和加密保持默认Logon Type
set as normal , user
=== FTP user
(siteGround) and password
the one you've used to create that FTP user Logon Type
设置为 normal , user
=== FTP user
(siteGround) 和password
是您用来创建该 FTP 用户的password
connect
and paste the content of yourApp/build
(from the left side that is your PC) to (the folder at the right hand side) that is your public_html in siteGround
connect
并将yourApp/build
的内容(从左侧是您的 PC)粘贴到(右侧的文件夹)这是您public_html in siteGround
的public_html in siteGround
That's it!就是这样! go to your website and check, the react app should be displayed there
转到您的网站并检查,反应应用程序应该显示在那里
here is the source of this procedure https://www.siteground.com/tutorials/ftp/ Here they use quick connect for fileZilla though, I have more than one site so siteManager is cleaner and stores your credentials for next time这是此过程的来源https://www.siteground.com/tutorials/ftp/这里他们使用 fileZilla 的快速连接,但我有多个站点,因此 siteManager 更干净并存储您的凭据以备下次使用
Usually there are guided strategies from host vendors.通常有来自主机供应商的指导策略。
Example:示例:
Heroku Create React App Build Heroku 创建 React 应用程序构建
Otherwise you'll have to manage it by yourself, registering a custom build script that acts with:否则,您必须自己管理它,注册一个自定义构建脚本,该脚本用于:
npm run build
npm 运行构建
And then move the build folder.然后移动构建文件夹。 If you use Maven you can manage the entire build with plugins like:
如果您使用 Maven,您可以使用以下插件管理整个构建:
If you are using create-react-app
, then you could do:如果您使用的是
create-react-app
,那么您可以执行以下操作:
npm run build
or yarn build
npm run build
或yarn build
build
folder as a result of the previous pointbuild
文件夹内的所有内容.htaccess
file with the following content:.htaccess
文件:
<IfModule mod_rewrite.c> RewriteEngine On RewriteBase / RewriteRule ^index\\.html$ - [L] RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteCond %{REQUEST_FILENAME} !-l RewriteRule . /index.html [L] </IfModule>
Check this great article for more info :) 查看这篇很棒的文章以获取更多信息:)
Hope it helps!希望有帮助!
I have problem deploying on siteground as well the simple solution is to have a git repo for your build and setup your public_html folder on siteground to track that git repo.我在 siteground 上部署也有问题,简单的解决方案是为您的构建创建一个 git repo,并在 siteground 上设置您的 public_html 文件夹以跟踪该 git repo。
make sure to also create确保也创建
.htaccess
with the content something like this内容是这样的
RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [QSA,L]
If you don't have that your routing won't work如果你没有,你的路由将无法工作
Also remember to go Tools->Speed->Caching and flush the cache if you have deployed otherwise before还记得去Tools->Speed->Caching并刷新缓存,如果你之前已经部署过
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.