react全栈_部署全栈React应用

react全栈

One of the greatest things about programming is that there are a huge number of ways to do things. There often is no right or wrong way. I would argue that there is a better and worse way to do things, but that is beside the point. The ability of us, as developers, to create something out of code that can add value to people’s life is second to none!

关于编程的最伟大的事情之一是，有许多种做事的方法。 通常没有正确或错误的方法。 我认为存在一种更好和更差的方法来做事情，但这是没有意义的。 作为开发人员，我们以代码创造出可以为人们的生活增值的东西的能力是首屈一指的！

所以。 许多。 选件 (So. Many. Options)

With all the building and deployment options afforded to developers, choosing the right one can become incredibly overwhelming. Ben Schwartz, a well-known psychologist, calls this “choice paralysis”. He argues that more choices make us less likely to take action and to be less satisfied with our eventual decision.

在为开发人员提供了所有构建和部署选项之后，选择正确的选项可能会令人难以置信。 著名的心理学家本·史瓦兹(Ben Schwartz)将此称为“选择麻痹”。 他认为，更多的选择会减少我们采取行动的可能性，并使我们对最终决定的满意度降低。

With so many options and services in the deployment landscape, it can be quite difficult to narrow them down and make a good choice on what platform, price point, and availability are right for your application. To make matters worse, you might get so caught up in researching the options that you lose all momentum on your project.

在部署环境中有这么多的选项和服务，要缩小它们的范围并在适合您的应用程序的平台，价格点和可用性方面做出很好的选择非常困难。 更糟糕的是，您可能会沉迷于研究选项，以至于您失去了项目的全部动力。

That might be where you’re at now, or you might just be starting out and need some direction. Either way, let’s keep you moving forward and get your deployment started. Just one thing before we start…you have to promise me that once you read this article, you’ll choose a platform and deploy. Deal?Deal!

那可能就是您现在所在的位置，或者您可能只是刚开始并且需要一些指导。 无论哪种方式，让我们继续前进并开始部署。 在我们开始之前，只有一件事……您必须向我保证，一旦阅读本文，您将选择一个平台并进行部署。 交易？交易！

继续前进 (Keep Moving Forward)

I will share some helpful guidance below on how to deploy your React app and a comparison between a few of the most popular platforms and their pros and cons. This isn’t an exhaustive list nor an in-depth how-to guide. But I hope it helps you along your development journey.

我将在下面分享一些有用的指导，以介绍如何部署React应用以及一些最受欢迎的平台及其优缺点之间的比较。 这不是详尽的清单，也不是详细的操作指南。 但我希望它对您的开发过程有所帮助。

With the advent of FaaS or “serverless”, the use of application servers has fallen pretty dramatically. If you aren’t sure what the difference is, let me fill you in. An application server is a server that runs to serve your frontend application (React in our case) and act as middleware. Middleware can be used for a whole host of things, but I tend to use it as a light-weight backend for code that is specifically used in the frontend it’s serving.

随着FaaS或“无服务器”的出现，应用服务器的使用已大大下降。 如果您不确定有什么区别，请允许我填写。应用程序服务器是运行为前端应用程序提供服务的服务器(在本例中为React)并充当中间件。 中间件可以用于很多事情，但是我倾向于将它用作轻量级的后端，专门用于其服务的前端中的代码。

Because of the different needs of serverless and application servers, I’m going to make a list for each type.

由于无服务器服务器和应用服务器的不同需求，我将为每种类型列出一个列表。

部署应用服务器 (Deploy an application server)

Ranking of platforms for deployment with an application server

与应用程序服务器一起部署的平台的排名

1. Render

   渲染

   My first choice is Render, which is the new kid on the block. They’re a fledgling startup that won the 2019 Startup Battlefield at Disrupt. They provide a host of tools including databases, disks, and web hosting with very little or no vendor lock-in. They are also very straight forward about the resources you are paying for and are incredibly easy to use. Render will only deploy with GitHub or GitLab, but it automatically connects to the repo and will auto-deploy on push!

   我的第一选择是Render，它是新手。 他们是一家刚起步的初创公司，在Disrupt赢得了2019年启动战场。 他们提供了很多工具，包括数据库，磁盘和虚拟主机，几乎没有或没有供应商锁定。 他们对于您要购买的资源也非常直截了当，并且非常易于使用。 Render仅与GitHub或GitLab一起部署，但会自动连接到仓库，并在推送时自动部署！

   For use with an application server, their pricing starts at $7 as of the writing of this article.

   对于与应用程序服务器一起使用，在撰写本文时，其起价为7美元。

2. Heroku

   Heroku

   My second choice is Heroku. My least favorite thing about Heroku is that it’s super shady about their servers, or as they call them, Dynos. Nobody really knows what a dyno is, but they’re known for not scaling poorly. Bigger apps can slow down on Heroku, even though you’re paying a premium.

   我的第二选择是Heroku。 关于Heroku，我最不喜欢的事情是它对服务器或他们称为Dynos的服务器超级阴暗。 没有人真正知道什么是测功机，但是以不差缩放而闻名。 大型应用程序可能会减慢Heroku的运行速度，即使您为此付出了高昂的代价。

   Similar to Render, you can use Heroku with no vendor lock-in and auto-deploy from your Github, but not GitLab. Heroku does have a free version, which is great for prototyping or side projects, but their paid tier starts at $7 at the time writing.

   与Render相似，您可以在没有Github上供应商锁定和自动部署的情况下使用Heroku，但不能在GitLab上使用。 Heroku确实有一个免费版本，非常适合用于原型设计或附带项目，但在撰写本文时，其付费层起价为7美元。

3. Back4App

   Back4App

   I have Back4App on this list because it’s widely used and I’ve heard lots of good things about it. To get a picture of how it works I created an account and went to deploy one of my projects. Long story short, I stopped before I got it deployed. Back4 is an astonishingly deep tool that is more than capable to handle an entire enterprise stack. But if you’re looking for an easy and simple process to get your app deployed — this isn’t it. Use Render instead :)

   我在此列表中有Back4App，因为它得到了广泛的使用，并且我听说过很多关于它的好东西。 为了了解其工作原理，我创建了一个帐户，然后部署了我的一个项目。 长话短说，我在部署它之前就停了下来。 Back4是一个功能强大的深层工具，它不仅能够处理整个企业堆栈。 但是，如果您正在寻找一种简单易用的流程来部署您的应用程序，不是吗？ 改用Render :)

部署无服务器应用 (Deploy a serverless app)

Ranking of platforms for deployment with a serverless app

无服务器应用程序部署平台的排名

1. Netlify

   Netlify

   My go-to option for serverless or static site deployments is Netlify. Their free tier is awesome! The platform has an astonishingly large amount of features and they’ve all been easy to use — something I cannot say about all platforms in this list(Back4App). For example, you can integrate a form in your project with Netlify’s form handler giving you the ability to send notifications when a form is submitted and storing them in Netlify for future viewing. All for free! You can also connect Github, GitLab, and BitBucket with subsequent auto-deploys. Easy and free with tons of options — my top choice!

   对于无服务器或静态站点部署，我的首选方法是Netlify。 他们的免费套餐很棒！ 该平台具有大量惊人的功能，而且它们都很容易使用-我无法对列表(Back4App)中的所有平台说些什么。 例如，您可以将项目中的表单与Netlify的表单处理程序集成在一起，从而使您能够在提交表单时发送通知，并将通知存储在Netlify中以供将来查看。 全部免费！ 您还可以将Github，GitLab和BitBucket与后续的自动部署连接。 众多选项让您轻松自如，这是我的最佳选择！

2. Render

   渲染

   The second place goes to Render. It’s easy to use and you can connect Github or GitLab for auto-deploys. They’re the 2019 Startup Battlefield at Disrupt and are taking on giants like AWS and GCP to simplify the developer experience in regards to deployment and hosting. Since Render also can host things like servers and databases, it would make for a great place to host if you’re expanding with an Expressjs API or database. Most things in Render are paid, so if you’d like to spend $0 on your entire full-stack, Firebase might be your jam.

   第二名去渲染。 它易于使用，您可以连接Github或GitLab进行自动部署。 它们是Disrupt的2019年启动战场，并与AWS和GCP等巨头合作，以简化开发人员在部署和托管方面的体验。 由于Render还可以托管服务器和数据库之类的东西，因此如果您使用Expressjs API或数据库进行扩展，它将是一个绝佳的托管场所。 Render中的大多数东西都是付费的，因此，如果您想在整个堆栈上花费$ 0，则Firebase可能是您的难题。

3. Firebase

   火力基地

   Firebase is pretty incredible. It’s only last because, as far as hosting goes, you might have to pay for it if your app is used enough. Hosting your frontend on either Render or Netlify can be 100% free, whereas Firebase might charge you. Firebase will charge if the data transferred or hosted is larger than a specific limit. Meaning that you could get charged or your app shut down if you hit that limit.

   Firebase非常不可思议。 这只是最后一次，因为就托管而言，如果您的应用程序使用足够，则可能需要付费。 在Render或Netlify上托管前端可以是100％免费的，而Firebase可能会向您收费。 如果传输或托管的数据大于特定限制，Firebase将收费。 这意味着如果您达到该限制，您可能会被收取费用或关闭应用程序。

   I actually love Firebase! I use Firestore and Cloud Functions in a lot of my projects, but I’ve never hosted using Firebase because I think there are better options out there. I have a production app that is hosted in Render but uses Firebase for the database and backend. It’s my favorite combination!

   我真的很喜欢Firebase！ 我在很多项目中都使用了Firestore和Cloud Functions，但是我从未托管过Firebase，因为我认为那里有更好的选择。 我有一个Render托管的生产应用程序，但将Firebase用于数据库和后端。 这是我最喜欢的组合！

全栈注意事项 (Full Stack Considerations)

Since your Fullstack application isn’t just the frontend there are few things to consider when deploying. Whether you’re using an application server or going serverless, the needs on your application are the same. You’ll need some kind of API to connect to a backend and database to store your data.

由于您的Fullstack应用程序不只是前端，因此在部署时没有什么要考虑的。 无论您使用的是应用程序服务器还是无服务器的应用程序，其需求都是相同的。 您需要某种API才能连接到后端和数据库以存储数据。

I typically advocate for devs to try managed backends first. Databases like Firebase’s firestore, or AWS Amplify (DynamoDB) can help you move quickly and have to manage less infrastructure. With that in mind below is my top choice for an inexpensive and fast deployment stack.

我通常提倡开发人员首先尝试管理后端。 Firebase的Firestore或AWS Amplify(DynamoDB)之类的数据库可以帮助您快速迁移并减少管理基础架构的次数。 考虑到以下几点，我是廉价，快速部署堆栈的首选。

Here is my top pick for hosting & deployments for your full-stack application.

这是我为全栈应用程序托管和部署的首选。

渲染托管和Firebase后端 (Render Hosting & Firebase Backend)

What’s it for: Serverless hosting & managed backend

用途：无服务器托管和托管后端

It’s no secret that I love Render’s hosting and platform. It takes all the great features from bigger competitors like AWS or Google Cloud and simplifies them down so you don’t need an MBA and 7 days to figure them out. Using Firebase’s Firestore and Cloud Functions as the backend provides you a huge amount of flexibility and takes the complexity of managing a database and API off of you.

我喜欢Render的托管和平台已经不是什么秘密了。 它吸收了较大竞争对手(如AWS或Google Cloud)的所有出色功能，并简化了这些功能，因此您无需MBA和7天的时间就可以解决它们。 将Firebase的Firestore和Cloud Functions作为后端使用，可以为您提供极大的灵活性，并减轻了管理数据库和API的复杂性。

Using Firebase does lock you in, but if you have a well-designed app, changing over to MongoDB with a streaming library like RXJS, won’t be too terribly painful.

使用Firebase确实会锁定您，但是如果您有一个设计良好的应用程序，并且使用RXJS之类的流媒体库切换到MongoDB，也不会感到非常痛苦。

Why I love it:

我为什么喜欢它：

• 100% frontend hosting
  100％前端托管
• Huge free tier for database and API (Firestore & Cloud Functions)
  巨大的免费数据库和API层(Firestore和Cloud功能)
• Backend is managed for you
  后端为您管理
• Get started very quickly
  快速上手

结语 (Wrap up)

There are all kinds of amazing options there for deploying your full-stack application. When I look for a platform to host and deploy, I focus on ease and simplicity. That’s why I haven’t included some tools like Amplify or GCP in my comparison. They are incredible tools, but they have a steep learning curve and require you to take substantial amounts of time learning them.

那里有各种惊人的选项可用于部署您的全栈应用程序。 当我寻找一个托管和部署的平台时，我专注于简便性。 这就是为什么我没有在比较中包括诸如Amplify或GCP之类的工具的原因。 它们是令人难以置信的工具，但是它们的学习曲线陡峭，需要您花费大量时间来学习它们。

I want my deployments and hosting to be quick and easy. After all the work you’ve put into building and testing your app, the last thing you should be doing is learning how to create and manage a VM before you deploy. There is a time and place for VMs and enterprise tooling, but often we just need a simple way to get our ideas and code to the public.

我希望我的部署和托管能够快速简便。 在完成构建和测试应用程序的所有工作之后，您应该做的最后一件事是在部署之前学习如何创建和管理VM。 VM和企业工具存在时间和地点，但是通常我们只需要一种简单的方法即可将我们的想法和代码公开。

I hope you found this helpful! Now, go forth and deploy!

希望对您有所帮助！ 现在，继续部署！

翻译自: https://medium.com/javascript-in-plain-english/options-for-deploying-full-stack-react-app-7078c4d12b71

react全栈