翻译 | 《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
的新站点”按钮。这将引导你完成站点部署的设置:
- 通过选择
GitHub
选择你的Git
提供程序,这将连接并授权你的GitHub
帐户。 - 接下来,选择包含源代码的存储库。
- 最后,设置你的构建设置。
对于我们的构建设置,添加以下内容(图17-3
):
- 生成命令:
npm run deploy:src
(或npm run deploy:final
,如果部署最终示例代码)。 - 发布
directory: dist.
- 在“高级设置”下,单击“新变量”,然后添加变量名
API
_URI和变量值https
://.herokuapp.com/api
(这将是我们部署到Heroku
的API
应用程序的URL
) 。
配置完应用程序后,单击“部署站点”按钮。几分钟后,你的应用程序将在Netlify
提供的URL
上运行。现在,每当我们对GitHub
存储库进行更改时,我们的网站都会自动部署。
初始负载慢
我们部署的Web
应用程序将从我们部署的Heroku API
加载数据。使用Heroku
的免费计划,应用程序容器在闲置一小时后便进入睡眠状态。如果你有一段时间没有使用过API
,则在容器回滚时,初始数据加载会很慢。
图17-3
。使用Netlify
,我们可以配置构建过程和环境变量
结论
在本章中,我们已经部署了静态Web
应用程序。为此,我们使用了Netlify
的部署管道功能来监视Git
存储库的更改,运行构建过程以及存储环境变量。在此基础上,我们具备了公开发布Web
应用程序所需的一切。
如果有理解不到位的地方,欢迎大家纠错。如果觉得还可以,麻烦你点赞收藏或者分享一下,希望可以帮到更多人。