【无标题】vue半自动部署全流程

最新推荐文章于 2024-09-07 15:58:22 发布

TheSleepGod

最新推荐文章于 2024-09-07 15:58:22 发布

阅读量170

点赞数 1

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/TheSleepGod/article/details/126285389

版权

这篇博客介绍了如何使用腾讯云Ubuntu服务器，结合宝塔Linux面板、Nginx，实现前端项目自动打包上传部署。通过npm命令行，前端开发者可以执行npm run daydayup，将Vue项目打包并上传至服务器，简化了手动部署的复杂流程。文章详细阐述了Nginx的安装、配置以及使用scp2包实现文件传输，最后提供了npm脚本自动化整个过程。

摘要由CSDN通过智能技术生成

腾讯云半自动部署

一概要（如果和你想要的不一样就可以溜了0.0

前端项目：vue
服务器：腾讯云(Ubuntu + 宝塔Linux面板 7.9.2 腾讯云专享版) nginx
实现效果：前端命令行输入npm run daydayup 可将项目文件打包上传部署至服务器
基本原理：（1）让nginx在服务器上能把指定dist文件投放到指定端口
（2）让前端能上传指定dist文件

二服务器部分

1. 准备工作

在最开始的开始，我们要先学会使用服务器提供的命令行，如果一切顺利，在买到服务器之后，你会一路点点点直到打开它
在这里插入图片描述
然后跟着初始流程（或者跳过）完成你账号密码的配置（如果配了，请保存在txt文本中并把它放在自己的脸上）
一些基本指令

su  //登录root账号
su username //登录username账号
sudo + 指令 //以管理员权限执行该指令
cd filename //进入该文件夹
vim filename //编辑该文件 //如果不会用vim就去搜一下吧...
ls //查看文件下内容
cat //查看文件内容

如果遇到未安装vim请刷机，选择较高版本的ubuntu镜像（20.04版本已经自带
如果要坚持使用低版本，可通过apt/yum 等安装指令安装vim

2.安装nginx

环境安装

Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器，在BSD-like 协议下发行。其特点是占有内存少，并发能力强。
其可用于
1、http服务器。Nginx是一个http服务可以独立提供http服务。可以做网页静态服务器。

2、虚拟主机。可以实现在一台服务器虚拟出多个网站。例如个人网站使用的虚拟主机。

3、反向代理，负载均衡。当网站的访问量达到一定程度后，单台服务器不能满足用户的请求时，需要用多台服务器集群可以使用nginx做反向代理。并且多台服务器可以平均分担负载，不会因为某台服务器负载高宕机而某台服务器闲置的情况。（cv了这么多真是辛苦我自己了

在安装nginx之前需要为其准备环境，如果安装失败请向下看

gcc

安装nginx需要先将官网下载的源码进行编译，编译依赖gcc环境，如果没有gcc环境，需要安装gcc。

yum install gcc-c++

PCRE

PCRE(Perl Compatible Regular Expressions)是一个Perl库，包括 perl 兼容的正则表达式库。nginx的http模块使用pcre来解析正则表达式，所以需要在linux上安装pcre库。

yum install -y pcre pcre-devel

注：pcre-devel是使用pcre开发的一个二次开发库。nginx也需要此库。

zlib

zlib库提供了很多种压缩和解压缩的方式，nginx使用zlib对http包的内容进行gzip，所以需要在linux上安装zlib库。

yum install -y zlib zlib-devel

openssl

OpenSSL 是一个强大的安全套接字层密码库，囊括主要的密码算法、常用的密钥和证书封装管理功能及SSL协议，并提供丰富的应用程序供测试或其它目的使用。

nginx不仅支持http协议，还支持https（即在ssl协议上传输http），所以需要在linux安装openssl库。（如果实在装不上可以放弃哦

yum install -y openssl openssl-devel

安装失败

总体来说虽然都是一行命令的事情，但总会出现奇奇怪怪的错

yum不是内部或外部指令 / yum不可用 / 镜像完全不可用
主要解决方案就是安装一遍yum
可参考https://blog.csdn.net/weixin_45457922/article/details/116430625
查看已安装的yum

rpm -qa|grep yum

删除已有的yum

rpm -aq|grep yum|xargs rpm -e --nodeps

下载以下安装包

wget http://tel.mirrors.163.com/centos/7/os/x86_64/Packages/python-2.7.5-89.el7.x86_64.rpm 

wget http://tel.mirrors.163.com/centos/7/os/x86_64/Packages/python-iniparse-0.4-9.el7.noarch.rpm 

wget http://tel.mirrors.163.com/centos/7/os/x86_64/Packages/yum-3.4.3-168.el7.centos.noarch.rpm

wget http://tel.mirrors.163.com/centos/7/os/x86_64/Packages/yum-metadata-parser-1.1.4-10.el7.x86_64.rpm

wget http://tel.mirrors.163.com/centos/7/os/x86_64/Packages/yum-plugin-fastestmirror-1.1.31-54.el7_8.noarch.rpm

如果找不到以上版本，可以到http://tel.mirrors.163.com/centos/7/os/x86_64/Packages/下载最新版本

安装

rpm -ivh python-2.7.5-89.el7.x86_64.rpm python-iniparse-0.4-9.el7.noarch.rpm --nodeps --force
rpm -ivh yum-metadata-parser-1.1.4-10.el7.x86_64.rpm --nodeps --force
rpm -ivh yum-3.4.3-168.el7.centos.noarch.rpm yum-plugin-fastestmirror-1.1.31-54.el7_8.noarch.rpm --nodeps --

然后再次查看即可
2. 下载到一半失败/连接失败/进度条卡死/404error
基本可以断定为网络问题
如果是白天就晚上试试如果是晚上就白天试试如果开了梯子就关了试试如果没开梯子就打开试试等玄学方法
或者换源即可，由于源网址可能出现变动，可自行搜索yum换源（一抓一大半

编译安装

yum install nginx	

//若执行成功，则
//默认的网站目录为 /usr/share/nginx/html
//默认的配置文件为 /etc/nginx/nginx.conf
//自定义配置文件目录为 /etc/nginx/conf.d/
//如出现不同情况
rpm -ql nginx
//查看nginx安装目录

或
1.创建安装目录

mkdir ~/software
mkdir ~/app

2.进入下载目录

cd ~/software

3.下载nginx安装包

wget -P ~/software/ http://nginx.org/download/nginx-1.12.2.tar.gz

4.解压文件。

tar -zxvf nginx-1.12.2.tar.gz -C ~/app

二、安装nginx应用程序
1.安装nginx应用程序

cd ~/app/nginx-1.12.2
sudo ./configure
sudo make install

2.启动nginx指令

sudo /usr/local/nginx/sbin/nginx

3.查看nginx进程

ps aux|grep nginx

在这里插入图片描述

访问服务器地址，出现 “welcome to nginx说明成功”

在这一步有许许多多安装方法，安装成功后nginx的位置并不固定

rpm -ql nginx //可用于查看目录

但nginx的内部结构是固定的
在不配置环境变量的情况下，我们所有的nginx操作都需要直接指定到nginx执行文件处
例如本人将nginx安装在usr/local/webserver下，所用到的命令如下

/usr/local/webserver/nginx/sbin/nginx -t 			#检查命令正确性
/usr/local/webserver/nginx/sbin/nginx			    #启动Nginx
/usr/local/webserver/nginx/sbin/nginx -s reload            # 重新载入配置文件
/usr/local/webserver/nginx/sbin/nginx -s reopen           # 重启 Nginx
/usr/local/webserver/nginx/sbin/nginx -s stop               # 停止 Nginx

在实际情况中请视自身安装位置进行操作

3.配置nginx

nginx的配置文件位于nginx/conf下
在这里插入图片描述
其中nginx.conf.default文件为默认配置文件
nginx.conf文件为配置文件（我们一般修改这个
编辑nginx.conf文件

//未被块包裹的部分为全局部分，用于配置影响nginx全局的指令
user  root;	//默认用户组
worker_processes  2; //指定工作进程的个数，默认是1个。具体可以根据服务器cpu数量进行设置，比如cpu有4个，可以设置为4。如果不知道cpu的数量，可以设置为auto。 nginx会自动判断服务器的cpu个数，并设置相应的进程数

#error_log  logs/error.log;	//错误日志位置
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;	//pid进程文件路径


events {	//events块用于配置影响nginx服务器或与用户的网络连接。有每个进程的最大连接数，选取哪种事件驱动模型处理连接请求，是否允许同时接受多个网路连接，开启多个网络连接序列化等。
    worker_connections  512;	//最大连接数
}

接下来是多个http或server块，并且存在嵌套现象

http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;
    #gzip  on;	//上面的全部是http块的公共配置，我也不知道什么意思，感兴趣可以百度
   
    server {	//server块是nginx配置中的重点部分，每个server相当于一个虚拟主机
    listen 80;	//监听端口
    listen 443 ssl;	//监听端口
    server_name  xxx.top www.xxx.top;	//要将你的服务器定向到的域名
	//nginx为我们提供了该服务，无需使用腾讯的dos解析也可完成域名部署，但需要相应域名的ssl证书
    location / {	//配置nginx的该server从何处提取html文件用于展示，即定义请求匹配规则
    //这里配置出来就可以通过公网ip访问
        root /home/www;		//存放该文件的绝对路径，也即根目录
        index index.html index.htm;	//默认索引文件
        try_files $uri $uri/ /index.html;		//表示匹配 $root/ 或者 $root/index.html
    }

   #  location /api {        
   //这里是后端配置，可以通过公网/api访问，只部署前端的可以不要
   #   include /etc/nginx/uwsgi_params;
   #    uwsgi_pass 127.0.0.1:8080;                                                               
   #     }
   

 #   ssl_certificate /etc/nginx/ssl/xxx.top.crt;
 #   ssl_certificate_key /etc/nginx/ssl/xxx.top.key;
 //如果我们要直接为nginx配置域名，就需要得到该域名的ssl证书并使用putty上传一下，这里写的是该域名证书的绝对路径（非常不建议相对路径，nginx会从奇怪的地方出发
    ssl_session_timeout  5m;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4:!DH:!DHE;
    ssl_prefer_server_ciphers  on;	//ssl配置

    error_page  404                /404.html;	//设置错误页
    }  //至此一个server块配置完毕
    	//我们完成了使用nginx将指定文件夹下的html文件投放到指定端口的功能
    	//请记住是 哪个文件夹 投放到哪个端口
}

然后我们需要检查文件正确性

/usr/local/webserver/nginx/sbin/nginx -t 			#检查命令正确性
/usr/local/webserver/nginx/sbin/nginx -s reload            # 重新载入配置文件
//这是根据我的nginx文件的位置生成的指令

在这里插入图片描述
最开始执行检查指令出现问题是因为权限不足（就是当前用户不属于该配置文件的nginx用户组，登录就好了
成功时应该见到

nginx: the configuration file /usr/local/webserver/nginx/conf/nginx.conf syntax is ok
nginx: configuration file /usr/local/webserver/nginx/conf/nginx.conf test is successful

至此nginx配置全部完成，访问公网ip可见欢迎界面，随便逛一个路由应该是404

三、本地项目配置

nginx已经完成了展示指定文件的功能，接下来我们只要完成上传文件到nginx服务器即可，往往麻烦的也是这一步，本地打包使用putty上传太累，而配置GitHub的自动部署推送又有网络问题，且抽象的yml文件让人头疼
于是我们退而求其次，将这一部分封装为一个脚本文件
以vue项目为例
在这里插入图片描述
这是一个正常vue项目的组成目录，其中多出一个dev.js就是我们的脚本文件，（如果你的不太一样也没关系
先安装一个用于传输的依赖

npm install scp2 --save-dev

然后编写dev.js

const client = require('scp2');	//引入依赖
//请不要短时间（10s内）多次上传，大流量写入会导致服务器寄掉！如果你的服务器是两核4G的，这句提示很有必要
client.scp('./dist/', {    // 本地打包文件的位置
    host: '', // 服务器的IP地址，就是公网地址
    port: '22',            // 服务器端口， 一般为 22，照抄就好了
    username: '',       // 用户名 请确保采用的用户名属于上面的nginx用户组，一般使用root                     
    password: '',     // 密码 root账号的密码
    path: '/home/www'            // 项目部署的服务器目标文件位置
}, err =>{
    if (!err) {
        console.log("服务器部署完毕。")
    } else {
        console.log("err", err)
    }
})

然后打开package.json，里面应该有这么一段

"name": "inkshu",
  "version": "0.1.0",
  "private": true,
  "scripts": {	//本质上定义了npm run + 指令
    "serve": "vue-cli-service serve",	//npm run serve
    "build": "vue-cli-service build",	//npm run build
    //下面的两行为新增的，你也可以根据需要自己编写
    "goodgoodstudy": "node dev.js",	//用于上传当前已经打包的dist文件
    "daydayup": "npm run build && npm run test"	//用于一键打包传
  },

至此我们获得两条新指令

npm run goodgoodstudy	//将已打包的dist文件上传
npm run daydayup		//一键打包部署

从此刻起只需完成对项目的更改后执行npm run daydayup，你的项目就会被自动部署到服务器上

注意事项

一点小小的注意事项
1.在打包上传时出现warning 大致意思是你的文件超过多少多少巴拉巴拉，不用管只是慢一点而已
2.由于采用了取巧的方法，请保护好自己的dev.js文件，里面写着你自己的密码，可以在组员都同步后设置该文件不再上传并将git中的删除
3.由于采用了取巧的方法，dist文件无法备份，也无法恢复，因此强烈建议先上传至github再部署，这样确保每个版本都有备份。