javascript入门_Netlify入门：部署JavaScript应用程序的最简单方法

javascript入门

If you follow articles, podcasts, etc. related to Web Development, you've probably at least heard of Netlify. I've heard about from multiple people and over and over again in my favorite podcast, Syntax (which you should definitely check out!). We'll dive into the details in a sec, but in a nutshell:> Netlify is a hosting platform where you can "build, deploy, and manage modern web projects"

如果您关注与Web开发相关的文章，播客等，您可能至少听说过Netlify 。 我在我最喜欢的播客Syntax中反复听到了很多人的话（您一定要检查一下！）。 我们将在几秒钟内详细介绍细节，但总而言之：> Netlify是一个托管平台，您可以在其中“构建，部署和管理现代Web项目”

There's lots of things that you can do with Netlify, so let's go ahead and dive in! Key note, the Scotch Dashboard is hosted on Netlify!

您可以使用Netlify做很多事情，所以让我们继续前进吧！ 重点说明，苏格兰威士忌仪表板托管在Netlify上！

Disclaimer: This is NOT a sponsored post. We at Scotch just really like Netlify.

免责声明 ：这不是赞助帖子。 我们在苏格兰人就像Netlify一样。

Related Reading: Interested in deploying your first site to Netlify? Deploying Your First Gatsby Site to Netlify.

相关阅读 ：有兴趣将您的第一个站点部署到Netlify吗？ 部署您的第一个盖茨比站点以进行Netlify 。

功能概述 ( Feature Overview )

Netlify's features page does a great job at telling all of its features. The rundown is:

Netlify的功能页面在讲述其所有功能方面做得很好。 损失为：

• Hosting (free!)
  托管（免费！）
• Continuous Deployment from a Git Repo
  从Git仓库持续部署
• Serverless Functions
  无服务器功能
• Identity and Auth
  身份认证
• Forms
  形式

All of these tools together along with your JavaScript single page app written in React, Vue, or Angular gives us much power in building fully featured apps.

所有这些工具以及用React ， Vue或Angular编写JavaScript单页应用程序，使我们在构建功能全面的应用程序时拥有强大的力量。

代管 ( Hosting )

The easiest answer for what Netlify can do for you is host your web applications, specifically static sites. The benefit of static sites are better security, speed/performance, and scalability.

Netlify可以为您做什么的最简单答案是托管Web应用程序，尤其是静态站点。 静态站点的好处是更好的安全性，速度/性能和可伸缩性。

Netlify actually coined the term "JAM" Stack, which stands for JavaScript, APIs, and Markdown.

Netlify实际上创造了术语“ JAM”堆栈，代表JavaScript，API和Markdown。

Netlify♥️静态站点 (Netlify ♥️ Static Sites)

Because your front-end is built independent of your back-end or any necessary APIs, there's a strong decoupling between front-end and back-end. Additionally, because your app comprises solely of a few files, these files can easily be replicated across the world with a CDN. JAM stack is the new hotness, and Netlify is the place to be for hosting.

由于前端的构建独立于后端或任何必需的API，因此前端和后端之间存在很强的去耦。 此外，由于您的应用仅包含几个文件，因此可以使用CDN在世界范围内轻松复制这些文件。 JAM堆栈是新的热点，而Netlify是托管的地方。

The free plan includes:

免费计划包括：

• HTTPS certs
  HTTPS证书
• Custom domain name
  自定义域名
• Continuous deployment
  持续部署

免费的HTTPS和自定义域 (Free HTTPS and Custom Domain)

Most hosts out there have a free version, but Netlify's version stands out with the HTTPS and custom domain name. With almost every other host I've seen, you need to get a paid plan for custom domain name support. Additionally, not only can you use a custom domain on Netlify for free, they also sell domains. This way, you can get your domain name from the same place you host your site. Not bad huh?!

那里的大多数主机都有一个免费版本 ，但是Netlify的版本在HTTPS和自定义域名中脱颖而出。 与我见过的几乎所有其他主机一样，您需要获得自定义域名支持的付费计划。 此外，您不仅可以免费使用Netlify上的自定义域，而且还可以出售域。 这样，您可以从托管站点的同一位置获取域名。 不错吧？！

In addition to the free tier, there are obviously paid ones as well with various different features enabled. Right now, I'm just using the free one with no need for a paid tier. If you'd like to compare the different tiers, you can look at their pricing page.

除了免费套餐之外，显然还有付费的以及启用的各种不同功能。 现在，我只是使用免费的，不需要付费等级。 如果您想比较不同的等级，可以查看它们的定价页面。

持续部署 ( Continuous Deployment )

Netlify is incredibly quick and easy to get started with deploying your website. In fact, the easiest way to do this is to set up continuous deployment using Github, Gitlab, or Bitbucket.

Netlify极其Swift且容易地开始部署您的网站。 实际上，最简单的方法是使用Github，Gitlab或Bitbucket设置连续部署。

Push to GitHub. Netlify deploys. Simple and easy!

推送至GitHub。 Netlify部署。 简单容易！

So, after making an initial connection between your site and your source code, to deploy the latest changes to your site, all you have to do is push those changes and...voila, your site is updated!

因此，在您的站点和源代码之间建立了初始连接之后，要将最新的更改部署到站点上，您要做的就是推送这些更改，然后，您的站点已更新！

The most incredible part about this is that it legitimately took me less than 5 minutes to sign up for an account and deploy my first React application. I simply created a new website, connected it to a Github repo, waited a few seconds, and there it was! While this type of continuous deployment setup is not specific to Netlify (it's actually fairly common), they've done it well and made it incredibly easy.

对此，最不可思议的部分是，我合法地花了不到5分钟的时间注册了一个帐户并部署了我的第一个React应用程序 。 我只是创建了一个新网站，将其连接到Github存储库，等待了几秒钟，就到了！ 尽管这种类型的连续部署设置不是Netlify特有的（实际上相当普遍），但他们做得很好，而且使它变得异常简单。

There are a few additional features of Continuous Deployment in Netlify.

Netlify中还有一些连续部署的其他功能。

First, deploys are atomic, meaning that the entire deploy goes successfully or not at all. Your site will never be left in an unhealthy state.

首先，部署是原子的，这意味着整个部署成功与否。 您的网站永远不会处于不正常状态。

An awesome side effect of atomic deploy is that there is no downtime. Netlify will deploy your code alongside of your old code first. Then, when everything is ready, Netlify simple switches incoming traffic to your newly deployed site instead of the older version, hints the zero downtime.

原子部署的一个令人敬畏的副作用是没有停机时间。 Netlify将首先与旧代码一起部署您的代码。 然后，当一切准备就绪时，Netlify简单地将传入流量切换到新部署的站点，而不是较旧的版本，暗示停机时间为零。

分支部署 (Branch Deploys)

Netlify will lock onto a main branch for production deploys. It can also deploy other branches and give you a URL to test those deploys.

Netlify将锁定主要分支以进行生产部署。 它还可以部署其他分支，并为您提供一个URL以测试这些部署。

For instance, if you had a staging branch, you could push to GitHub and Netlify would give you a place to test it!

例如，如果您有一个staging分支，则可以推送到GitHub，而Netlify将为您提供测试的地方！

Here's branch deploy previews for Scotch dashboard. You can see them on the right and one failed.

这是Scotch仪表板的分支部署预览。 您可以在右侧看到它们，但其中一个失败。

部署回滚 (Deploy Rollbacks)

One more feature is the ability to rollback to a previous deploy. If you deploy new code and something goes wrong, simply choose and older deployment and redeploy that one. With Netlify, you can feel pretty safe with all of these options!

另一个功能是能够回滚到以前的部署。 如果您部署新代码而出了点问题，只需选择较旧的部署并重新部署该代码即可。 使用Netlify，您可以通过所有这些选择感到非常安全！

锁定部署 (Locking Deploys)

One last feature is the ability to "lock down a deploy". This means you can stop your auto publishing (automatic deployments on code pushes) with a specific version. This ensures that subsequent checkins don't override the version you wanted to keep. It might make sense to do this every once in a while so that you can continue to check in code but not actually deploy.

最后一个功能是“锁定部署”的能力。 这意味着您可以停止使用特定版本的自动发布（通过代码推送进行自动部署）。 这样可以确保后续签入不会覆盖您想要保留的版本。 偶尔执行一次此操作可能很有意义，这样您就可以继续检入代码，但不能实际部署。

Netlify CLI ( Netlify CLI )

As with many other hosts, Netlify has a CLI package that can be downloaded from NPM.

与许多其他主机一样，Netlify具有可从NPM下载的CLI软件包 。

After downloading this package globally, you can login to your Netlify account, view your sites, make deploys, etc. You can set up Continuous Deployment by connecting an existing repo or even make manual deploys. This is a great alternative to Continuous Deployment if that option doesn't work for you for some reason.

在全球范围内下载此软件包之后，您可以登录到Netlify帐户，查看站点，进行部署等。您可以通过连接现有的存储库来设置“持续部署”，甚至可以进行手动部署。 如果由于某种原因该选项对您不起作用，那么它是连续部署的理想选择。

For more information, check out the CLI Docs.

有关更多信息，请查看CLI文档 。

无服务器（Lambda）功能 ( Serverless (Lambda) Functions )

If you're interested in a hands on tutorial for creating your first serverless function in Netlify, check out Build and Deploy Your First Serverless Function in Netlify.

如果您对在Netlify中创建第一个无服务器功能的动手教程感兴趣，请查看在Netlify中构建和部署第一个无服务器功能 。

When developing static sites, you don't deal with a back-end directly. You might use a third party solution like Firebase for your backend, but in general, your front-end is very decoupled from whatever back-end services you are using. Because of this, there might be certain pieces of your back-end that you need to create yourself.

在开发静态网站时，您无需直接处理后端。 您可能在后端使用了Firebase之类的第三方解决方案，但通常来说，您的前端与所使用的任何后端服务之间都是脱钩的。 因此，您可能需要自己创建某些后端。

Netlify provides serverless functions (AWS Lambda Functions to be exact) to add additional back-end functionality for your application.

Netlify提供了无服务器功能（准确地说是AWS Lambda函数 ），可以为您的应用程序添加其他后端功能。

With Lambda Functions, you can do anything you need to… save something to a DB, validate data and post to another API, etc. A Lambda Function is more or less a Node endpoint that you can do anything you want with. The amazing thing is that with Netlify, you get 125,000 requests per month to your functions with the free version. I don't know about you guys, but I won't that for a long while :)

使用Lambda函数，您可以执行任何操作...将某些内容保存到数据库，验证数据并发布到另一个API等。Lambda函数或多或少是您可以执行任何操作的Node端点。 令人惊讶的是，使用Netlify，使用免费版本每月可获得125,000个功能请求。 我对你们不了解，但很长一段时间我不会:)

For more information, check out the Functions Docs.

有关更多信息，请查看功能文档 。

形式 ( Forms )

With any website or app, the most common way to get information from a user is through a form. They fill out the form, and when they submit, that data goes to a backend somewhere that handles that information to add something to a DB, register a user, etc. Since, as mentioned above, your front-end is decoupled from your backend, you might not have a server to handle form submits.

对于任何网站或应用程序，从用户那里获取信息的最常见方法是通过表单。 他们填写表单，并在提交时将数据发送到后端，该后端处理该信息以向数据库添加内容，注册用户等。如上所述，由于前端与后端是分离的，您可能没有服务器来处理表单提交。

Netlify provides Forms which allow you, the developer, to conveniently handle form submissions by creating a Lambda Function from above.

Netlify提供了Forms，使开发人员可以通过从上方创建Lambda函数来方便地处理表单提交。

The only downside I can see here is that the limits on Form submissions is significantly lower than Function calls. You are only allowed 100 form submissions with the free tier of Netlify, and will automatically be updated to a paid tier if you go beyong that. To tackle this, I've got a form that submits directly to a Lambda Function that I created instead of using the built in Forms functionality. This way, I don't have to worry as much about the limits.

我在这里只能看到的缺点是，表单提交的限制远低于函数调用。 仅允许您使用Netlify的免费层提交100个表单，如果不这样做，它将自动更新为付费层。 为了解决这个问题，我有一个直接提交给我创建的Lambda函数的表单，而不是使用内置的Forms功能。 这样，我不必担心这些限制。

To learn more, check out the Forms Docs.

要了解更多信息，请查看Forms Docs 。

部署预览 ( Deploy Previews )

When developing code, you might want to test it out "live" without overriding your existing website. In other words, you might want to test out that a new piece of functionality, hosted in Netlify vs. locally, works the way you expect without actually making a new deploy to your site.

开发代码时，您可能想“实时”测试它而不覆盖现有网站。 换句话说，您可能需要测试一下，Netlify与本地托管的一项新功能可以按您期望的方式工作，而无需实际在您的站点上进行新的部署。

Netlify gives you the ability to create Deploy Previews, which will create separate URLs from pushes to branches other than master. These previews are deployed live, but will not override your actual main site.

Netlify使您能够创建“部署预览”，这将创建从推送到主站点以外的分支的单独URL。 这些预览是实时部署的，但不会覆盖您的实际主站点。

Deploy Previews provides an incredible way for you test yourself, or share a live URL with someone else so that they can. You can tell Netlify to do this for every branch that you create or select specific branches. A good example would be a Develop branch to test changes before merging them into master.

部署预览为您提供了一种令人难以置信的方式来测试自己，或者与其他人共享实时URL，以便他们可以使用。 您可以告诉Netlify对您创建的每个分支执行此操作，或选择特定的分支。 一个很好的示例是Develop分支，用于在将更改合并到主版本之前对其进行测试。

For more information, check out the Branches and Deploys section of the Continuous Deployment Docs.

有关更多信息，请查看持续部署文档的“分支和部署”部分。

分割测试 ( Split Testing )

The last feature I want to cover is Split Testing.

我要介绍的最后一个功能是拆分测试。

Split Testing allows you to deploy two different versions of your site so that you can track analytics on which one users enjoy more, leads to more clicks, more purchases, etc.

拆分测试使您可以部署网站的两个不同版本，以便您可以跟踪分析，从而使一个用户享受更多的访问，带来更多的点击，购买更多商品等。

Netlify provides an easy way to do this. You can choose multiple different branches of your code along with a percentage. This percentage represents how often users should be directed to each version of your site. You would want to do this when trying out different versions of UI, placements of buttons and callouts, etc. While it is up to you to track the necessary analytics, Netlify gives you an easy way to split your traffic.

Netlify提供了一种简便的方法。 您可以选择代码的多个不同分支以及一个百分比。 该百分比表示应将用户定向到您网站的每个版本的频率。 在尝试使用不同版本的UI，按钮和标注的位置等时，您可能希望这样做。虽然可以由您来跟踪必要的分析，但Netlify却为您提供了一种简单的方式来拆分流量。

From the code point of you, you can dynamically retrieve which branch users are currently using as shown below. You can then use this information to track necessary analytics.

从您的代码点，您可以动态地检索到当前正在使用的分支用户，如下所示。 然后，您可以使用此信息来跟踪必要的分析。

process . env . BRANCH

To learn more, check out the Split Testing Docs.

要了解更多信息，请查看拆分测试文档 。

回顾 ( Recap )

Netlify is an incredible platform, specifically for hosting static websites. With an incredible free tier, you get access to loads of functionality without having to spend a penny. If you want to see what all the hype is about, sign up for an account and check it out!

Netlify是一个了不起的平台，专门用于托管静态网站。 凭借令人难以置信的免费套餐，您无需花费一分钱即可使用大量功能。 如果您想查看所有宣传内容，请注册一个帐户并签出！

I would love to hear in the comments about the projects you guys are working on and how working with Netlify has been for you.

我很乐意在评论中听到你们正在从事的项目以及与Netlify合作如何为您服务。

Feel free to comment below or reach out to me on twitter, @jamesQquick.

请在下面发表评论，或通过Twitter @jamesQquick与我联系。

翻译自: https://scotch.io/tutorials/get-started-with-netlify-the-simplest-way-to-deploy-your-javascript-apps

javascript入门