乐趣区

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

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

写在最后面

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

为了进步大家的浏览体验,对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央,或者你有任何意见或者倡议,能够在评论区留言,或者加我的微信:code_maomao,欢送互相沟通交流学习。

(σ゚∀゚)σ..:*☆哎哟不错哦

第 17 章 部署 Web 应用程序

当我刚开始业余从事 Web 开发时,“部署”是指通过 FTP 客户端将文件从本地计算机上传到 Web 服务器。没有任何构建步骤或管道,这意味着我的计算机上的原始文件与 Web 服务器上的原始文件雷同。如果呈现问题,我会疯狂地解决问题,或者通过将其替换为旧文件的副原本回滚更改。过后,这种狂野的西部办法卓有成效,但也导致大量站点停机和意外问题。

在当今的 Web 开发世界中,咱们本地开发环境和 Web 服务器的需要大不相同。在我的本地计算机上,我想查看更改文件和调试未被压缩文件的即时变动。在我的 Web 服务器上,我只心愿看到,部署和压缩文件后的变动。

在本章中,咱们将探讨一种将动态应用程序部署到 Web 的办法。

动态网站

Web浏览器解析 HTMLCSSJavaScript来生成咱们应用的网页。与 ExpressRailsDjango之类的框架在申请时为页面服务器端生成标记不同,动态网站只是存储在服务器上的 HTMLCSSJavaScript的汇合。从蕴含标签的单个 HTML 文件到编译模板语言,多个 JavaScript 文件和 CSS 预处理器的简单的前端构建过程,其复杂度范畴能够很大。最初,动态网站是这三种文件类型的汇合。

留神,咱们的应用程序是动态 Web 应用程序。它蕴含一些 HTML 标签、CSSJavaScript。咱们的构建工具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 主机(例如 GitLabBitbucket)配置此过程。

GitHub 储存库

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

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

17-2GitHub 的新存储库页面

当初,在终端应用程序中,切换到 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(这将是咱们部署到HerokuAPI应用程序的URL)。

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

初始负载慢

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

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

论断

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

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

退出移动版