前端项目(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

l 复制代码
yum install nginx

安装完成

2. 启动nginx

l 复制代码
service nginx start

l 复制代码
systemctl start nginx

3. 查看nginx状态

l 复制代码
service nginx status

l 复制代码
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文件中查看如下

l 复制代码
cat /etc/nginx/nginx.conf

4.2 访问nginx

l 复制代码
173.30.0.224:80

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

5. 修改nginx配置

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

修改后重新加载配置

l 复制代码
sytemctl reload nginx

6. 重启nginx

l 复制代码
sytemctl restart nginx

三、工具安装

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

在root权限下执行以下命令

1. 安装node.js

l 复制代码
yum install nodejs

2. 安装npm

首先需要安装npm

l 复制代码
yum install npm -y

3. 安装yarn

yarn打包更快

l 复制代码
npm install -g yarn

4. 安装zip

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

l 复制代码
yum install -y zip

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

l 复制代码
yum install -y unzip

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

四、配置文件

1. nginx.conf配置

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


感谢阅读,祝君暴富!

相关推荐
yvvvy2 分钟前
从“按钮都不会点”到“能撸大厂 UI”:我用 react-vant 踢开组件库的大门!
前端·javascript
安然dn3 分钟前
Cropper.js:JS图像裁剪库
前端·javascript
Serendipity2615 分钟前
微服务架构
前端·微服务
猫猫的小茶馆18 分钟前
【STM32】FreeRTOS 任务的删除(三)
java·linux·stm32·单片机·嵌入式硬件·mcu·51单片机
Hilaku20 分钟前
深入background-image:你可能不知道的几个性能优化与高级技巧
前端·css
南岸月明23 分钟前
副业自媒体1年终于明白:为什么会表达的人,能量越来越强,更能赚到钱?
前端
天天摸鱼的java工程师23 分钟前
🔧 MySQL 索引的设计原则有哪些?【原理 + 业务场景实战】
java·后端·面试
Danny_FD36 分钟前
Vue + Element UI 实现模糊搜索自动补全
前端·javascript
空影学Java41 分钟前
Day44 Java数组08 冒泡排序
java
gnip41 分钟前
闭包实现一个简单Vue3的状态管理
前端·javascript