从入门到精通：GitHub Angular项目在Azure VM的部署实战

引言

对于前端开发者来说，将Angular项目部署到生产环境是一个必备技能。Azure虚拟机(VM)提供了一个灵活且可控的部署环境。本教程将带你从零开始，一步步完成GitHub上Angular项目在Azure VM上的完整部署过程。

准备工作

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

1. 一个有效的Azure账号（可申请免费试用）
2. GitHub账号及一个Angular项目（如果没有，我们会提供一个示例）
3. 基本的命令行操作知识
4. Node.js和npm/yarn已安装在本地开发环境

第一步：创建Azure虚拟机

1.1 登录Azure门户

访问 Azure门户 并使用你的账号登录。

1.2 创建虚拟机

1. 点击”创建资源” > “计算” > “虚拟机”
2. 填写基本信息：
   • 订阅：选择你的订阅
   • 资源组：创建新组或使用现有组
   • 虚拟机名称：例如 angular-deploy-vm
   • 区域：选择离你最近的区域
   • 映像：选择”Ubuntu Server 20.04 LTS”
   • 大小：B1s (适合小型项目)
3. 设置管理员账户：
   • 身份验证类型：密码或SSH公钥（推荐SSH）
   • 用户名：例如 azureuser
4. 入站端口规则：
   • 勾选”HTTP (80)”
   • 勾选”HTTPS (443)”
   • SSH (22)默认已选中

1.3 SSH连接到VM

创建完成后，使用SSH连接到你的VM：

ssh azureuser@<your-vm-public-ip>

注意：将<your-vm-public-ip>替换为你VM的实际公共IP地址。

第二步：设置服务器环境

2.1 更新系统包

sudo apt update && sudo apt upgrade -y

2.2 安装Node.js和npm

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
sudo apt install -y nodejs

验证安装：

node --version
npm --version

2.3 安装Angular CLI

sudo npm install -g @angular/cli

2.4 安装Nginx（用于反向代理）

sudo apt install nginx -y

启动Nginx并设置开机自启：

sudo systemctl start nginx
sudo systemctl enable nginx

第三步：从GitHub克隆Angular项目

3.1 Clone项目代码

git clone https://github.com/yourusername/your-angular-project.git
cd your-angular-project

注意：将URL替换为你实际的GitHub项目地址。如果没有现成项目，可以使用我们的示例：

代码片段 复制代码

git clone https://github.com/example/angular-sample-app.git
cd angular-sample-app

3.2 安装依赖并构建生产版本

npm install --legacy-peer-deps # Angular项目中可能需要此参数解决依赖冲突问题
ng build --configuration production # Angular CLI构建命令会生成dist目录下的文件 

第四步：配置Nginx托管Angular应用

4.1 Nginx配置文件修改

编辑Nginx默认配置文件：

sudo nano /etc/nginx/sites-available/default

替换内容为以下配置：

server {
    listen        80;
    server_name   yourdomain.com www.yourdomain.com; # <--替换为你的域名或IP

    root /home/azureuser/your-angular-project/dist/your-project-name; # <--替换为实际路径

    index index.html;

    location / {
        try_files $uri $uri/ /index.html;
    }

    # Gzip压缩配置（可选但推荐）
    gzip on;
    gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
}

重要说明：
– dist/your-project-name中的your-project-name需要替换为你实际构建后生成的文件夹名（通常在angular.json中定义）
– try_files $uri $uri/ /index.html;这行是关键，它启用了HTML5路由模式支持

4.2 Nginx测试与重启

测试配置是否正确：

sudo nginx -t #应该显示"syntax is ok"和"test is successful"

重启Nginx使配置生效：

sudo systemctl restart nginx 

（可选）第五步：设置自动部署脚本（CI/CD）

创建一个简单的部署脚本 deploy.sh：

#!/bin/bash

# Pull最新代码并构建新版本 
cd /home/azureuser/your-angular-project || exit 
git pull origin main 
npm install --legacy-peer-deps 
ng build --configuration production 

# Nginx重启以加载新版本 
sudo systemctl restart nginx 

echo "Deployment completed at $(date)" >> /var/log/deploy.log 

使脚本可执行：

chmod +x deploy.sh 

你可以通过cron定时运行此脚本，或者结合GitHub Actions实现自动化部署。

（可选）第六步：HTTPS配置（使用Let’s Encrypt）

为了安全考虑，建议启用HTTPS：

1.安装Certbot工具：

sudo apt install certbot python3-certbot-nginx -y 

2.获取SSL证书并自动配置Nginx：

sudo certbot --nginx -d yourdomain.com -d www.yourdomain.com # <--替换为你的域名 

Certbot会自动更新你的Nginx配置并设置自动续期。

（可选）第七步：性能优化建议

1.启用Gzip压缩（已在前面Nginx配置中包含）

2.添加缓存控制头：
在Nginx配置的server块中添加：

location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
    expires max;
    add_header Cache-Control "public, no-transform";
}

3.启用HTTP/2：
在listen指令后添加http2:

listen [::]:443 ssl http2 ipv6only=on; # for IPv6  
listen      443 ssl http2;              # for IPv4  

（可选）第八步：监控与日志分析建议

1.查看Nginx访问日志：

tail -f /var/log/nginx/access.log 

或错误日志：

tail -f /var/log/nginx/error.log 

2.安装基础监控工具：

sudo apt install htop sysstat net-tools  

然后可以使用:

htop        # CPU/RAM监控  
iftop       #网络流量监控  
iotop       #磁盘I/O监控  
nmon        #综合性能监控  

（可选）第九步：防火墙安全加固

除了Azure网络安全组外，还可以在VM上设置UFW防火墙:

sudo apt install ufw  
sudo ufw allow ssh  
sudo ufw allow http  
sudo ufw allow https  
sudo ufw enable  

检查状态:

sudo ufw status verbose  

（可选）第十步：备份策略

建议定期备份:
1.NGINX配置文件: /etc/nginx
2.Angular项目代码: /home/user/project
3.SSL证书: /etc/letsencrypt

可以使用简单的rsync脚本自动备份到其他存储位置.

（可选）第十一步: Docker化部署 (进阶)

如果你熟悉Docker,可以考虑容器化部署:

1.Dockerfile示例:

FROM node:16 as builder  

WORKDIR /app  

COPY package*.json ./  

RUN npm install  

COPY . .  

RUN npm run build  

FROM nginx:alpine  

COPY --from=builder /app/dist/project-name /usr/share/nginx/html  

COPY nginx.conf /etc/nginx/conf.d/default.conf  

EXPOSE80  
CMD ["nginx", "-g", "daemon off;"]  

然后构建并运行:

docker build-t angular-app .  

docker run-p80:80 angular-app  

这种方式更易于维护和扩展.

（可选）第十二步: Azure DevOps集成 (企业级)

对于企业用户,可以集成Azure DevOps实现完整CI/CD流水线:

主要步骤包括:
1.Azure Repos或GitHub仓库连接
2.Build Pipeline(Node.js/Angular构建)
3.Test Pipeline(单元测试/E2E测试)
4.Deployment Pipeline(发布到VM)

这需要单独详细教程,但提供了最专业的解决方案.

常见问题解决指南

Q:页面刷新出现404错误?
A:确保Nginx配置中有正确的try_files规则(见步骤4)

Q:无法克隆私有仓库?
A:需要在VM上设置SSH密钥,参考GitHub文档添加部署密钥.

Q:构建时内存不足?
A:增加swap空间或升级VM规格:

dd if=/devzero of=/swapfile bs=1024 count=1048576   
mkswap /swapfile   
swapon /swapfile   
free-mh   
#永久生效需要添加到/etc/fstab   

Q:Certbot证书续期失败?
A:手动测试续期并检查日志:

certbot renew--dry-run   
journalctl-xe-u certbot   

总结回顾

通过本教程,我们完成了以下关键步骤:

✓ Azure VM创建与基础配置 ✓ Node.js/NPM/Angular CLI环境搭建 ✓ Nginx反向代理服务器设置 ✓ Angular生产构建与托管 ✓ (可选)自动化部署脚本 ✓ (可选)HTTPS安全加固 ✓ (可选)性能优化技巧 ✓ (可选)Docker容器化方案 ✓ (可选)企业级DevOps集成思路 ✓常见问题排查方法

现在你已经掌握了将Angular应用部署到Azure VM的全套技能!根据实际需求,可以选择最适合你项目的技术组合方案.

下一步学习建议:
• Azure App Service无服务器部署 • Kubernetes集群扩展方案 • Azure CDN全球加速 • Application Insights应用监控