乘风破浪，遇见JavaScript框架之NodeJS，开源且跨平台的服务器端JavaScript运行时环境，WSL和Windows环境安装并部署到Azure初体验
什么是NodeJS
Node.js是一种开源且跨平台的服务器端JavaScript运行时环境，以Chrome的V8 JavaScript引擎为基础，最初由Ryan Dahl创作并在2009年发布。
NodeJS用途
Node.js主要用于生成快速且可缩放的Web应用程序。它使用事件驱动的非阻塞I/O模型，使其变得轻量和高效。对于跨分布式设备运行的数据密集型实时应用程序来说，这是一个很好的框架。
以下是可以使用Node.js创建的应用的一些示例。
- 单页应用(SPA)：这类Web应用在浏览器中运行，每次用其获取新数据时无需重新加载页面。示例SPA包括社交网络应用、电子邮件或地图应用、联机文本工具或绘图工具等。
- 实时应用(RTA)：这些Web应用使用户能够在创作者发布信息后立即接收该信息，而不要求用户（或软件）定期检查源以获取更新。一些示例RTA包括即时消息传递应用或聊天室、可在浏览器中运行的在线多玩家游戏、联机协作文档、社区存储、视频会议应用。
- 数据流式处理应用：此类应用（或服务）会在收到（或创建）数据/内容时立即发送它们，同时保持连接，以便根据需要继续下载后续数据、内容或组件。示例包括音视频流式传输应用。
- REST API：这类接口提供数据，供他人的Web应用进行交互。例如，日历API服务可以提供音乐会现场的日期和时间信息，以供他人的本地活动网站使用。
- 服务器端呈现的应用(SSR)：此类Web应用可在客户端（浏览器/前端）和服务器（后端）上运行，允许动态页面显示任何已知内容（为其生成HTML）并在未知内容可用时迅速进行抓取。这些应用通常称为“同构”或“通用”应用程序。SSR使用SPA方法，因为它们不需要在每次使用时都重新加载。不过，SSR提供了一些重要性因人而异的优势，例如，让你的站点内容显示在Google搜索结果中，或者在Twitter或Facebook等社交媒体上分享应用链接时提供预览图像。其潜在的缺点是需要Node.js服务器持续运行。例如，为用户希望显示在搜索结果和社交媒体中的活动提供支持的社交网络应用可能得益于SSR，但电子邮件应用作为SPA即可满足需求。你还可以运行服务器呈现的非SPA应用（例如WordPress博客）。如你所见，情况可能比较复杂，你需要确定重要事项。
- 命令行工具：通过这些工具，可以自动执行重复性任务，然后将你的工具分发到大型Node.js生态系统。cURL（即客户端URL）是命令行工具的一个示例，用于从InternetURL下载内容。cURL常用于安装Node.js等工具（在本例中为Node.js版本管理器）。
- 硬件编程：虽然不如Web应用常用，但Node.js也越来越多地被用于IoT领域，例如从传感器、信标、发射机、发动机或其他会生成大量数据的装置收集数据。Node.js可支持数据收集、数据分析、设备和服务器之间的通信往来以及基于分析的措施实施。NPM包含80多个包，用于Arduino控制器、Raspberry Pi、Intel IoT Edison、各种传感器和蓝牙设备。
基础概念
- NVM，Node Version Manager，Node版本管理器
- NPM, Node Package Manager, Node包管理器
在WSL上安装NodeJS
安装WSL2
检查是否安装成功
wsl -l -v
安装Node版本管理器
Node版本管理器(通常称为Node Version Manager，nvm)是安装多个版本的Node.js的最常见方法，建议使用版本管理器，因为版本变更速度非常快。你可能需要根据所使用的不同项目的需求在多个版本的Node.js之间进行切换。
在安装之前确保已经卸载干净历史的版本
sudo apt-get update && sudo apt-get purge --auto-remove nodejs -y
等下我们将使用curl来拉去nvm的安装脚本，所以先安装好curl
sudo apt-get update && sudo apt-get install curl -y
接下来通过curl来获取nvm的最新安装脚本并且安装，如果存在较低老版本，将会覆盖。
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
curl -o- https://github.91chi.fun/https://raw.githubusercontent.com/nvm-sh/nvm/master/install.sh | bash
验证nvm的安装，建议关闭重新进一下终端。
command -v nvm
这个命令顺利返回nvm代表安装成功。
列出当前NodeJs版本，这时候应该是没有
nvm ls
通过NVM安装NodeJS
通过NVM安装当前LTS版本(推荐)
nvm install --lts
通过NVM安装当前最新版本，可能不是最稳定的
nvm install node
通过NVM安装指定版本
nvm install 14.20.1
这时候再次查看版本
nvm ls
验证和查看
验证Node是否安装成功并且当前默认版本
node --version
还可以验证是否有npm
npm --version
查看Node的路径
which node
查看NPM路径
which npm
通过NVM切换Node版本
我们可以对指定项目目录来切换Node的版本
切换到当前版本
nvm use node
切换到LTS版本
nvm use --lts
切换到指定版本
nvm use v16.17.1
列出所有可用版本
nvm ls-remote
可替代的Node版本管理器
除了nvm，还有如下可替代的方案
- n是长期存在的nvm替代方法，该方法使用略微不同的命令来完成相同的操作，并通过npm而不是bash脚本来安装。
- fnm是较新的版本管理器，它声称比nvm快得多。(它还使用Azure管道。)
- Volta是来自LinkedIn团队的新版本管理器，它声称改进了速度和跨平台支持。
- asdf-vm是适用于多种语言的单个CLI，例如将ikegvm、nvm、rbenv&pyenv(等)整合在一起。
- nvs(Node版本切换器)是跨平台的nvm替代方法，可与VSCode集成。
安装Visual Studio Code和WSL扩展包
-
下载和安装适用于Windows的VS Code。VS Code也适用于Linux，但适用于Linux的Windows子系统不支持GUI应用，因此需要在Windows上安装它。不必担心，仍可以使用Remote-WSL扩展与Linux命令行和工具集成。
-
在VSCode上安装Remote-WSL扩展。这使你可以将WSL用作集成开发环境，并且会为你处理兼容性和路径。
这时候我们可以选择连接到我们需要的WSL实例
安装Node.js 扩展包
https://marketplace.visualstudio.com/items?itemName=waderyan.nodejs-extension-pack
虽然VSCode附带了许多用于Node.js开发的功能，但有一些有用的扩展可考虑在Node.js扩展包中安装。
连上WSL实例之后，我们可以看到这里扩展被分为本地和WSL实例的不同分组了。
建议安装的拓展包括
- JavaScript调试程序：在服务器端通过Node.js完成开发后，需要开发并测试客户端。此扩展是基于DAP的JavaScript调试程序。它调试Node.js、Chrome、Edge、WebView2、VSCode扩展等。
- 来自其他编辑器的键映射：如果是从另一个文本编辑器（如Atom、Sublime、Vim、eMacs、Notepad++等）进行转换，则这些扩展可帮助你的环境对此进行适应。
- 设置同步：可以使用GitHub在不同安装之间同步VSCode设置。如果在不同的计算机上工作，这有助于在它们之间保持一致的环境。
检查或更新Git
大多数适用于Linux的Windows子系统发行版已安装了Git，但是，可能需要将其更新到最新版本。还需要设置git配置文件。
sudo apt-get update && sudo apt-get install git
检查版本
git --version
在Windows上安装NodeJS
先清理已安装版本
npm cache clean --force
安装NVM for Windows
走WinGet方式安装
winget search nvm
winget install CoreyButler.NVMforWindows
走安装包方式安装
验证NVM的安装，重新开启一下终端
nvm ls
通过NVM安装Node
列举已知Node版本号
nvm list available
安装Node最新版本
nvm install latest
安装Node指定版本
nvm install 14.20.0
查看本地已安装
nvm ls
验证安装
查看NPM版本
npm --version
查看Node版本
node --version
切换Node版本
nvm ls
nvm-windows版本1.1.9中的访问被拒绝问题，切换节点版本需要权限提升的Powershell(以管理员身份运行)。建议使用版本1.1.7来避免此问题。
可替代的Node版本管理器
虽然windows-nvm目前是最常用的节点版本管理器，但也有一些其他选择:
安装Volta之前，必须确保在Windows计算机上启用开发人员模式
安装Visual Studio Code的扩展包
- JavaScript Debugger：在服务器端通过Node.js完成开发后，需要开发并测试客户端。此扩展将VSCode编辑器与Chrome浏览器调试服务进行集成，以提高工作效率，其前身是Chrome调试器。
- 来自其他编辑器的键映射：如果是从另一个文本编辑器（如Atom、Sublime、Vim、eMacs、Notepad++等）进行转换，则这些扩展可帮助你的环境对此进行适应。
- 设置同步：可以使用GitHub在不同安装之间同步VSCode设置。如果在不同的计算机上工作，这有助于在它们之间保持一致的环境。
可替代的代码编辑器
获取和安装Git for Windows
WinGet安装Git
winget search git
winget install Git.Git
安装包安装Git， https://git-scm.com/download/win
添加适用于NodeJs的.gitignore
https://github.com/github/gitignore/blob/master/Node.gitignore
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
lerna-debug.log*
.pnpm-debug.log*
# Diagnostic reports (https://nodejs.org/api/report.html)
report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
*.lcov
# nyc test coverage
.nyc_output
# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (https://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Snowpack dependency directory (https://snowpack.dev/)
web_modules/
# TypeScript cache
*.tsbuildinfo
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional stylelint cache
.stylelintcache
# Microbundle cache
.rpt2_cache/
.rts2_cache_cjs/
.rts2_cache_es/
.rts2_cache_umd/
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variable files
.env
.env.development.local
.env.test.local
.env.production.local
.env.local
# parcel-bundler cache (https://parceljs.org/)
.cache
.parcel-cache
# Next.js build output
.next
out
# Nuxt.js build / generate output
.nuxt
dist
# Gatsby files
.cache/
# Comment in the public line in if your project uses Gatsby and not Next.js
# https://nextjs.org/blog/next-9-1#public-directory-support
# public
# vuepress build output
.vuepress/dist
# vuepress v2.x temp and cache directory
.temp
.cache
# Docusaurus cache and generated files
.docusaurus
# Serverless directories
.serverless/
# FuseBox cache
.fusebox/
# DynamoDB Local files
.dynamodb/
# TernJS port file
.tern-port
# Stores VSCode versions used for testing VSCode extensions
.vscode-test
# yarn v2
.yarn/cache
.yarn/unplugged
.yarn/build-state.yml
.yarn/install-state.gz
.pnp.*
基础练习
在Visual Studio Code中试用NodeJS
创建项目目录
mkdir HelloNode
切换到目录
cd HelloNode
创建示例Js
echo var msg > app.js
修改代码
var msg = 'Hello World';
console.log(msg);
通过Node来运行这个Js
node app.js
会看到
如果这一步看到如下错误，可以修改下编码为UTF8重新保存
使用Express创建自己的第一个NodeJS Web应用
Express是简约、灵活、流畅的Node.js框架，可便于更轻松地开发Web应用，以处理GET、PUT、POST和DELETE等多种类型的请求。Express随附一个应用生成器，可用于自动创建应用的文件体系结构。
通过express创建示例项目
npx express-generator HelloWorld --view=pug
Express生成的文件将创建采用体系结构的Web应用，一开始可能有点让人应接不暇
bin.包含启动应用的可执行文件。它启动服务器（如果没有提供备用端口的话，则在端口3000上），并设置基本错误处理。public.包含所有公开访问的文件，包括JavaScript文件、CSS样式表、字体文件、图像，以及用户在连接到网站时需要的任何其他资产。routes.包含应用程序的所有路由处理程序。此文件夹中自动生成index.js和users.js这两个文件，以举例说明如何分离应用程序的路由配置。views.包含模板引擎使用的文件。Express被配置为在调用render方法时在其中查找匹配视图。虽然默认模板引擎是Jade，但为了支持Pug，Jade已遭弃用，所以我们使用了--view标志来更改视图（模板）引擎。通过使用express--help，可以查看--view标志选项和其他选项。app.js.应用的起点。它加载所有内容，并开始满足用户请求。它基本上就是将所有部分结合在一起的“胶水”。package.json.包含项目说明、脚本管理器和应用部件清单(manifest)。它主要用于跟踪应用的依赖项及其相应版本。
切换到目录，安装Express的依赖项
npm install
启动Express应用
npx cross-env DEBUG=HelloWorld:* npm start
访问Express应用，默认端口3000
Node.js模块
Node.js有很多有助于开发服务器端Web应用的工具，其中一些是内置的，还有许多可通过npm使用。
| 工具 | 用途 |
|---|---|
| gm、sharp | 图像操作，包括直接在JavaScript代码中执行编辑、调整大小、压缩等操作 |
| PDFKit | PDF生成 |
| validator.js | 字符串验证 |
| imagemin、UglifyJS2 | 缩小 |
| spritesmith | 子画面表生成 |
| winston | 日志记录 |
| commander.js | 创建命令行应用程序 |
使用内置OS模块来获取计算机操作系统的一些信息：
- 在命令行中，打开Node.js CLI。输入node后，你会看到出现>提示，告知你当前正在使用Node.js
- 若要确定你当前使用的操作系统，请输入
os.platform()（这应会返回响应，告知你正使用Windows） - 若要检查CPU体系结构，请输入
os.arch() - 要查看系统上提供的CPU，请输入
os.cpus() - 输入“
.exit”或按Ctrl+C两次，退出Node.js CLI。
部署到Azure云
创建Express示例项目
npx express-generator myExpressApp --view ejs
安装NPM包和运行
cd .\myExpressApp\
npm install
npx cross-env DEBUG=myexpressapp:* npm start
安装Azure扩展
https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice
部署到Azure Linux容器
登录并连接Azure账户
创建一个新的Web App，默认就是Linux容器，如果需要Windows容器，应该选择带高级那个。
给应用取一个名字
选择运行时堆栈，这里我们就选Node 16 LTS
选择价格，我们就用免费的Free(F1)就行。
等待应用创建成功，我们就可以点击部署按钮了
部署完毕
启动流式日志
它内部其实是运行了一个Docker实例，然后把NodeJs跑起来了。
删除部署资源
