前端项目（vue3）自动化部署（Gitlab CI/CD）

天行健，君子以自强不息；地势坤，君子以厚德载物。

---

每个人都有惰性，但不断学习是好好生活的根本，共勉！

---

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

文章目录

• 一、简介
• 二、Nginx安装
• • [1. 安装nginx](#1. 安装nginx)
  • [2. 启动nginx](#2. 启动nginx)
  • [3. 查看nginx状态](#3. 查看nginx状态)
  • [4. 验证nginx](#4. 验证nginx)
  • • [4.1 nginx访问地址获取](#4.1 nginx访问地址获取)
    • [4.2 访问nginx](#4.2 访问nginx)
  • [5. 修改nginx配置](#5. 修改nginx配置)
  • [6. 重启nginx](#6. 重启nginx)
• 三、工具安装
• • [1. 安装node.js](#1. 安装node.js)
  • [2. 安装npm](#2. 安装npm)
  • [3. 安装yarn](#3. 安装yarn)
  • [4. 安装zip](#4. 安装zip)
• 四、配置文件
• • [1. nginx.conf配置](#1. nginx.conf配置)

---

一、简介

正常部署前端项目时需要先打包后放到服务器上进行手动部署，现在我们尝试用Gitlab的CI/CD功能来实现自动化部署前端项目，节省部署操作时间以及避免过程中操作失误的可能。

系统：linux centos

二、Nginx安装

以下命令如果执行无root权限则需在命令前加sudo

1. 安装nginx

yum install nginx

安装完成

2. 启动nginx

service nginx start

或

systemctl start nginx

3. 查看nginx状态

service nginx status

或

systemctl status nginx

可以从输出打印的内容看到nginx的配置文件nginx.conf在/etc/nginx/文件夹中

4. 验证nginx

4.1 nginx访问地址获取

安装nginx后使用服务器ip和nginx的端口号来访问nginx

ip为nginx安装位置的服务器ip

nginx端口号默认为80，当然也可以到/etc/nginx/nginx.conf文件中查看如下

cat /etc/nginx/nginx.conf

4.2 访问nginx

173.30.0.224:80

如下界面则表示nginx安装成功，已启用

5. 修改nginx配置

可通过vim命令修改配置文件nginx.conf

修改后重新加载配置

sytemctl reload nginx

6. 重启nginx

sytemctl restart nginx

三、工具安装

前端项目需要node环境，所以要安装node

在root权限下执行以下命令

1. 安装node.js

yum install nodejs

2. 安装npm

首先需要安装npm

yum install npm -y

3. 安装yarn

yarn打包更快

npm install -g yarn

4. 安装zip

安装压缩工具，用于压缩dist文件

yum install -y zip

安装解压工具，用于解压缩

yum install -y unzip

这里提示已安装，表示已经有了，直接用就可以

四、配置文件

1. nginx.conf配置

需要根据前端项目的情况配置相应的参数

---

感谢阅读，祝君暴富！