翻译|《JavaScript Everywhere》Chapter17DeployingWebApplications写在最上面大家好，我是前端开发工程师毛小友。翻译一本英文技术书籍。为了提高大家的阅读体验，对句子的结构和内容进行了微调。如果大家发现本文有什么不妥之处，或者有什么意见和建议，可以在评论区留言，或者加我的微信：code_maomao，欢迎交流，互相学习。(σ???)σ..:*☆哎哟不错第17章部署Web应用当我刚开始专业做Web开发的时候，“部署”就是通过FTP客户端从本地电脑上传文件到Web服务器。没有构建步骤或管道，这意味着我计算机上的原始文件与Web服务器上的相同。如果出现问题，我会疯狂地修复它，或者通过用旧文件的副本替换它来回滚更改。当时，这种狂野的西部方式运作良好，但也导致了大量站点停机和意外问题。在当今的Web开发世界中，我们的本地开发环境和Web服务器有着截然不同的需求。在我的本地计算机上，我想查看更改的文件并调试对未压缩文件的即时更改。在我的Web服务器上，我只想查看部署和压缩文件后的更改。在本章中，我们将探索一种将静态应用程序部署到Web的方法。静态网站Web浏览器解析HTML、CSS和JavaScript以生成我们使用的网页。与Express、Rails和Django等框架在请求时为页面生成标记服务器端不同，静态网站只是存储在服务器上的HTML、CSS和JavaScript的集合。构建前端的复杂性可以从包含标记的单个HTML文件到编译模板语言、多个JavaScript文件和CSS预处理器的复杂前端构建过程。归根结底，静态网站就是这三种文件类型的集合。请注意，我们的应用程序是静态Web应用程序。它包含一些HTML标签、CSS和JavaScript。我们的构建工具Parcel将我们编写的组件编译成浏览器可读的文件。在本地开发中，我们运行一个网络服务器并使用Parcel的热模块替换功能来动态更新这些文件。如果我们查看package.json文件，您会看到我包含了两个部署脚本："scripts":{"deploy:src":"parcelbuildsrc/index.html--public-url./","deploy:final":"parcelbuildfinal/index.html--public-url./"}要构建应用程序，请打开终端应用程序，进入包含项目的Web目录的根目录，然后运行构建命令：#如果你还没有进入web目录，一定要cd进入它$cdProjects/notedly/web#从src目录构建文件$npmrundeploy:src目录，在终端中运行npmrundeploy:src将如上所述从您的代码生成一个构建的应用程序。如果您希望使用与示例代码捆绑在一起的应用程序的最终版本，请使用npmrundeploy:final，它将在最终应用程序目录中构建代码。在本章的其余部分，我将演示一种部署静态构建的应用程序的方法，这些应用程序也可以在任何可以提供HTML网络托管服务的RaspberryPi桌面上托管和运行。虽然我们将要处理的流程类型有很多明显的好处，但您的部署可以像更新一样简单。env文件指向远程API，运行构建脚本并上传文件。React的服务器端渲染虽然我们将React应用程序构建为静态Web应用程序，但也可以在服务器上渲染JSX。这种技术通常被称为“通用JavaScript”，可以带来许多好处，包括性能提升、客户端JavaScript的回退和SEO改进。Next.js等框架试图简化此设置。尽管本书不涉及服务器端呈现的JavaScript应用程序，但我强烈建议您在熟悉客户端JavaScript应用程序开发之后探索这种方法。我们的部署管道对于我们的应用程序部署，我们将使用一个简单的管道，它允许我们自动将更改部署到我们的代码库。对于我们的管道，我们将使用两个服务。第一个是我们在GitHub上的源代码存储库。第二个将是我们的网络主机Netlify。我之所以选择Netlify，是因为它具有广泛但易于使用的部署功能集，并且专注于静态和无服务器应用程序。我们的目标是自动将任何对应用程序主分支的提交部署到我们的网络主机。我们可以将这个过程可视化，如图17-1所示。图17-1。我们的部署过程使用Git托管源代码部署过程的第一步是设置源代码存储库。你可能已经这样做了，如果你这样做了，请跳过。如前所述，我们将使用GitHub，但可以使用其他公共Git主机（例如GitLab或Bitbucket）配置此过程。GitHub存储库我们将创建一个新的GitHub存储库，但如果您愿意，可以通过为您的GitHub帐户创建一个分支链接，在https://github.com/javascripteverywhere/web上获得官方代码示例。首先，切换到GitHub并创建一个帐户或登录到您现有的帐户。然后单击新建存储库按钮。提供一个名称并单击“创建存储库”按钮（图17-2）。图17-2。GitHub的新存储库页面现在，在终端应用程序中，切换到Web应用程序的目录，将Git源设置为新的GitHub存储库，然后推送代码。由于我们正在更新现有的Git存储库，因此我们的说明与GitHub的说明略有不同：#如果您还没有目录，请先导航到该目录cdProjects/notedly/web#更新GitHub远程源以匹配您的存储库git远程设置-urlorigingit://YOUR.GIT.URL#将代码推送到新的GitHub存储库gitpush-uoriginmaster现在，如果你切换到https://github.com//，你将看到这个应用程序的源代码。使用Netlify进行部署将源代码存储在远程Git存储库中后，我们现在可以配置Web主机Netlify来构建和部署代码。首先，前往netlify.com并注册一个帐户。创建帐户后，单击“从Git新建站点”按钮。这将引导您完成站点部署设置：通过选择GitHub选择您的Git提供商，这将连接并授权您的GitHub帐户。接下来，选择包含源代码的存储库。最后，设置您的构建设置。对于我们的构建设置，添加以下内容（图17-3）：构建命令：npmrundeploy:src（或npmrundeploy:final，如果部署最终示例代码）。发布目录：dist.在AdvancedSettings下，单击NewVariable，并添加变量名API_URI和变量值https://.herokuapp.com/api（这将是我们部署到HerokuURL的API应用程序）。配置应用程序后，单击“部署站点”按钮。几分钟后，您的应用程序将在Netlify提供的URL上运行。每当我们对GitHub存储库进行更改时，我们的网站现在都会自动部署。初始加载缓慢我们部署的网络应用程序将从我们部署的HerokuAPI加载数据。使用Heroku的免费计划，应用程序容器会在一小时不活动后进入休眠状态。如果您有一段时间没有使用API，当容器回滚时初始数据加载会很慢。图17-3。使用Netlify，我们可以配置构建过程和环境变量结论在本章中，我们部署了一个静态Web应用程序。为此，我们使用Netlify的部署管道功能来监视Git存储库的更改、运行构建过程并存储环境变量。从那里，我们拥有公开发布Web应用程序所需的一切。如果有什么不明白的地方，请指正。如果觉得还可以，请点赞、收藏或分享，希望能帮助到更多的人。
