云信AI部署

GitHub热门项目Angular：在Azure VM环境下的安装与使用

云信安装大师
90
AI 质量分
10 5 月, 2025
2 分钟阅读
0 阅读

GitHub热门项目Angular：在Azure VM环境下的安装与使用指南

引言

Angular作为GitHub上最受欢迎的前端框架之一，已经成为现代Web开发的重要工具。本文将指导您在Azure虚拟机上完成Angular的完整安装和使用过程，帮助您快速搭建开发环境并创建第一个Angular应用。

准备工作

在开始之前，请确保您已具备以下条件：

  1. 有效的Azure账户
  2. 已创建并配置好Windows或Linux虚拟机（推荐Ubuntu 20.04 LTS）
  3. SSH客户端（如PuTTY）或Azure门户的远程连接功能
  4. 基本命令行操作知识

第一步：连接Azure虚拟机

Windows用户

  1. 打开命令提示符
  2. 使用SSH连接：
代码片段 
ssh username@your-vm-public-ip

Linux/macOS用户

代码片段 
ssh username@your-vm-public-ip

注意：首次连接时会提示确认主机密钥，输入yes继续。

第二步：安装Node.js和npm

Angular需要Node.js运行环境，我们推荐使用Node版本管理器(nvm)进行安装：

代码片段 
# 下载并安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash

# 使nvm立即生效（或重新登录）
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"

# 安装最新的LTS版本Node.js
nvm install --lts

# 验证安装
node -v
npm -v

原理说明：
– nvm允许在同一台机器上管理多个Node.js版本
– Angular CLI需要Node.js 12.x或14.x以上版本支持

第三步：安装Angular CLI

Angular CLI是官方提供的命令行工具，用于创建和管理Angular项目：

代码片段 
# 全局安装Angular CLI
npm install -g @angular/cli

# 验证安装是否成功
ng version

常见问题：如果遇到权限错误，可以尝试：

代码片段 
sudo npm install -g @angular/cli --unsafe-perm=true --allow-root

第四步：创建第一个Angular项目

代码片段 
# 创建一个新项目（my-app是项目名称）
ng new my-app

# CLI会询问一些配置选项：
# ? Would you like to add Angular routing? (y/N) y
# ? Which stylesheet format would you like to use? CSS

# 进入项目目录
cd my-app

# 启动开发服务器（默认端口4200）
ng serve --host=0.0.0.0 --port=4200 --disable-host-check=true

参数解释：
– --host=0.0.0.0：允许外部访问（默认只允许localhost）
– --disable-host-check：禁用主机检查（适用于云环境）

第五步：配置Azure网络安全组

为了从外部访问应用，需要在Azure门户中配置网络安全组：

  1. Azure门户 > “虚拟机” > “网络”

  2. 添加入站端口规则：

    • 目标端口范围: 4200 (或您使用的端口)
    • 协议: TCP
    • 优先级: <任意数字>
    • 名称: angular-dev-port

  3. 保存规则后，您可以通过浏览器访问：

代码片段 
http://<您的VM公网IP>:4200/

第六步：构建生产版本（可选）

当准备部署时，可以构建优化后的生产版本：

代码片段 
ng build --prod

# build后的文件位于dist/my-app目录下
ls dist/my-app/

生产构建特点：
– AOT编译（提前编译）
– Tree-shaking移除未使用代码
– UglifyJS压缩代码
– CSS优化处理

Azure VM优化建议

  1. 持久化存储：考虑将项目放在Azure磁盘上而非临时存储
  2. 自动启动脚本：
    代码片段 
    # /etc/rc.local中添加（Linux示例）:
cd /path/to/your/app && ng serve --host=0.0.0.0 &<br>
  3. 监控资源使用：小型B系列VM可能更适合开发用途

VS Code远程开发（可选）

如果您使用VS Code，可以安装”Remote – SSH”扩展直接连接到Azure VM进行开发：

  1. VS Code > Extensions > Remote – SSH
  2. Ctrl+Shift+P > “Remote-SSH: Connect to Host…”
  3. 输入您的VM连接信息

这样您就可以在本地编辑器中直接操作远程文件系统。

总结关键步骤

  1. ssh连接到您的Azure VM
  2. nvm管理Node.js版本
  3. npm install -g @angular/cli安装CLI工具
  4. ng new my-app创建新项目
  5. ng serve启动开发服务器
  6. Azure网络安全组开放对应端口

通过本教程，您已经成功在Azure虚拟机上搭建了完整的Angular开发环境。接下来可以开始探索Angular的强大功能了！

原创 高质量