gitlab 如何部署angular
时间: 2025-05-29 09:21:46 浏览: 13
### 如何在 GitLab 中部署 Angular 项目
#### 准备工作
为了成功完成 Angular 项目的部署,需要确保以下条件已满足:
- 已经创建了一个 GitLab 仓库,并将本地的 Angular 项目推送至该仓库。
- 安装并配置了 Docker 和 GitLab Runner。
#### 配置 `.gitlab-ci.yml` 文件
`.gitlab-ci.yml` 是 GitLab CI/CD 流水线的核心文件,用于定义流水线的行为。以下是针对 Angular 项目的典型配置:
```yaml
stages:
- build
- deploy
variables:
NODE_VERSION: '16'
cache:
paths:
- node_modules/
build_job:
stage: build
image: node:$NODE_VERSION
script:
- npm install
- npm run build --prod
artifacts:
paths:
- dist/
only:
- main
deploy_job:
stage: deploy
image: alpine:latest
script:
- apk add --no-cache rsync openssh-client
- mkdir -p ~/.ssh && echo "$SSH_PRIVATE_KEY" | tr -d '\r' > ~/.ssh/id_rsa
- chmod 600 ~/.ssh/id_rsa
- ssh-keyscan $SERVER_IP >> ~/.ssh/known_hosts
- rsync -avz --delete ./dist/ user@$SERVER_IP:/var/www/html/
environment:
name: production
url: http://$SERVER_IP
when: manual
only:
- main
```
此配置分为两个阶段:构建 (`build`) 和部署 (`deploy`)。
- **构建阶段** 使用 Node.js 图像来安装依赖项并生成生产版本的应用程序[^3]。
- **部署阶段** 将构建好的 `dist` 文件夹通过 SSH 协议同步到远程服务器上的指定路径。
#### 设置环境变量
为了让流水线正常运行,需设置一些敏感数据作为环境变量,例如私钥和目标服务器 IP 地址。这些可以在 GitLab 的项目设置 -> CI/CD -> Variables 页面中添加:
- `SSH_PRIVATE_KEY`: 私钥字符串,用于访问远程服务器。
- `SERVER_IP`: 远程服务器的公网 IP 地址或域名。
#### Jenkins 插件支持 (可选)
如果计划集成 Jenkins 来管理自动化流程,则需要注意的是,默认情况下新安装的 Jenkins 不具备直接连接 GitLab 或 GitHub 的功能[^2]。因此,在这种场景下可能还需要额外安装相关插件以实现无缝协作。
#### 总结
以上就是基于 GitLab 实现 Angular 应用持续交付的一个完整方案概述。它涵盖了从源码管理、CI 到最终上线整个生命周期的关键环节。希望这份文档能够帮助开发者快速入门并实践现代化软件工程理念下的高效开发模式!
---
阅读全文
相关推荐






