乐趣区

关于前端:翻译-JavaScript-Everywhere第17章-部署Web应用程序

jiezi

翻译 |《JavaScript Everywhere》第 17 章 部署 Web 应用程序

写在最后面

大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。

为了进步大家的浏览体验，对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央，或者你有任何意见或者倡议，能够在评论区留言，或者加我的微信：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 将咱们写入到浏览器可用文件中的组件进行编译。在本地开发中，咱们运行 Web 服务器，并应用 Parcel 的热模块替换性能即时更新这些文件。

如果咱们查看 package.json 文件，你将看到我蕴含了两个部署脚本：

"scripts": {
"deploy:src": "parcel build src/index.html --public-url ./",
"deploy:final": "parcel build final/index.html --public-url ./"
}

要构建该应用程序，请关上终端应用程序，cd命令进入蕴含该项目标 Web 目录的根目录，而后运行 build 命令：

# if you're not already in the web directory, be sure to cd into it
$ cd Projects/notedly/web
# build the files from the src directory
$ npm run deploy:src

如果你始终在跟着本书并在 src 目录中开发 Web 应用程序，则如上所述，在终端中运行 npm run deploy:src 会从你的代码生成已构建的应用程序。如果你心愿应用与示例代码捆绑在一起的应用程序的最终版本，请应用 npm run deploy:final 将在最终应用程序目录中构建代码。

在本章的其余部分，我将演示一种部署动态构建的应用程序的办法，这些文件也能够被托管在任何能够提供 HTML web 主机服务的树莓派（Raspberry Pi）的桌面上运行。只管咱们将要解决的流程类型有很多显著的益处，然而你的部署能够像更新一样简略。env文件指向近程API，运行构建脚本并上传文件。

服务器端渲染 React

只管咱们将 React 应用程序构建为动态 Web 应用程序，但也能够在服务器上出现 JSX。该技术通常被称为“通用JavaScript”，并且能够带来许多益处，包含性能进步、客户端JavaScript 的回退以及 SEO 的改良。诸如以下的框架 Next.js 试图简化此设置。只管本书中没有介绍服务器端渲染的 JavaScript 应用程序，但我强烈建议你在相熟客户端 JavaScript 利用程序开发后再摸索这种办法。

咱们的部署管道

对于咱们的应用程序部署，咱们将应用一个简略的管道，这将使咱们可能主动将更改部署到咱们的代码库上。对于咱们的管道，咱们将应用两种服务。首先是咱们的源代码存储库 GitHub 上。第二个将是咱们的虚拟主机Netlify。

我抉择 Netlify 是因为它具备宽泛但易于应用的部署功能集，并且专一于动态和无服务器应用程序。

咱们的指标是将对应用程序的 master 分支的任何提交主动部署到咱们的 Web 主机。

咱们能够将该过程可视化，如图 17-1 所示。

图17-1。咱们的部署过程

用 Git 托管源代码

部署过程的第一步是设置源代码存储库。
你可能曾经这样做了，如果你曾经做了，请跳过。
如前所述，咱们将应用 GitHub，但能够应用其余公共Git 主机（例如 GitLab 或Bitbucket）配置此过程。

GitHub 储存库

咱们将创立一个新的 GitHub 存储库，但如果你违心，能够在以下地位应用官网代码示例通过为你的 GitHub 帐户创立一个派生链接来https://github.com/javascripteverywhere/web。

首先，切换到 GitHub 并创立一个帐户或登录到你现有的帐户。而后单击“新建存储库”按钮。提供一个名称，而后单击 Create Repository 按钮（图17-2）。

图 17-2。GitHub 的新存储库页面

当初，在终端应用程序中，切换到 Web 应用程序的目录，将 Git 起源设置为新的 GitHub 存储库，而后推送代码。因为咱们正在更新现有的 Git 存储库，因而咱们的阐明与 GitHub 的阐明略有不同：

# first navigate to the directory if you're not already there
cd Projects/notedly/web
# update the GitHub remote origin to match your repository
git remote set-url origin git://YOUR.GIT.URL
# push the code to the new GitHub repository
git push -u origin master

当初，如果你切换到https://github.com//，你将看到该应用程序的源代码。

应用 Netlify 进行部署

通过将源代码存储在近程 Git 存储库中，咱们当初能够配置 Web 主机 Netlify 来构建和部署代码。首先，返回 netlify.com 并注册一个帐户。创立帐户后，点击“来自 Git 的新站点”按钮。这将疏导你实现站点部署的设置：

  1. 通过抉择 GitHub 抉择你的 Git 提供程序，这将连贯并受权你的 GitHub 帐户。
  2. 接下来，抉择蕴含源代码的存储库。
  3. 最初，设置你的构建设置。

对于咱们的构建设置，增加以下内容（图17-3）：

  1. 生成命令：npm run deploy:src（或npm run deploy:final，如果部署最终示例代码）。
  2. 公布directory: dist.
  3. 在“高级设置”下，单击“新变量”，而后增加变量名 API_URI 和变量值https://.herokuapp.com/api（这将是咱们部署到Heroku 的API应用程序的URL）。

配置完应用程序后，单击“部署站点”按钮。几分钟后，你的应用程序将在 Netlify 提供的 URL 上运行。当初，每当咱们对 GitHub 存储库进行更改时，咱们的网站都会主动部署。

初始负载慢

咱们部署的 Web 应用程序将从咱们部署的 Heroku API 加载数据。应用 Heroku 的收费打算，应用程序容器在闲置一小时后便进入睡眠状态。如果你有一段时间没有应用过API，则在容器回滚时，初始数据加载会很慢。

图17-3。应用Netlify，咱们能够配置构建过程和环境变量

论断

在本章中，咱们曾经部署了动态 Web 应用程序。为此，咱们应用了 Netlify 的部署管道性能来监督 Git 存储库的更改，运行构建过程以及存储环境变量。在此基础上，咱们具备了公开公布 Web 应用程序所需的所有。

如果有了解不到位的中央，欢送大家纠错。如果感觉还能够，麻烦你点赞珍藏或者分享一下，心愿能够帮到更多人。

退出移动版