将Vue项目部署到服务器上

这里使用两种方式将项目部署到服务器上，nginx和nodeJS(pm2进行管理)，主要记录一下。

一.准备

服务器系统：CentOS7

• 1.将Vue项目进行打包

在项目根目录的命令行中输入npm run build

• 2.打包完成

打包完成后，会在项目根目录生产dist文件夹，我们到时需要将这个文件夹丢到服务器上。

二.使用nginx部署

参考教程：https://www.cnblogs.com/boonya/p/7907999.html
安装所需环境
Nginx 是 C语言 开发，建议在 Linux 上运行，当然，也可以安装 Windows 版本，本篇则使用 CentOS 7 作为安装环境。

• gcc 安装

yum install gcc-c++

• PCRE pcre-devel 安装

yum install -y pcre pcre-devel

• zlib 安装

yum install -y zlib zlib-devel

• OpenSSL 安装

yum install -y openssl openssl-devel

• Nginx下载

nginx当前最新版本为1.18
1.官网下载，直接下载.tar.gz安装包，地址https://nginx.org/en/download.html，到时候丢到服务器上去就好了。
**2.在centOS中用wget命令下载，如果没有安装wget-》安装wget命令 **

yum install wget 

在有nginx压缩包的目录下执行命令：

tar -zxvf nginx-1.18.0.tar.gz
cd nginx-1.18.0

使用默认配置，输入命令：

./configure

自定义配置参考上面给出的教程
安装命令：

make
make install

安装完毕之后，查找安装路径命令：

whereis nginx

(一般会在/usr/local/nginx)
进入到安装目录，命令如下：

cd /usr/local/nginx

启动、停止nginx

 cd /usr/local/nginx/sbin/
 ./nginx 启动nginx
 ./nginx -s stop 强制关闭nginx进程，kill
 ./nginx -s quit 等待nginx进程任务处理完毕后退出
 ./nginx -s reload 重新启动nginx

启动时报80端口被占用
netstat -antp | grep : 查看服务器上端口占用情况
解决办法：

• 1、安装net-tool包：yum install net-tools
• 2、kill进程，要清楚80端口上的进程是什么 ，kill 进程ID

重启nginx
1.先停止再启动(推荐):
先执行停止命令再执行启动命令

./nginx -s quit
./nginx

2.重新加载配置文件
当nginx的配置文件./conf/nginx.conf，要想让配置生效需要重启nginx
./nginx -s reload
启动完成后，访问服务器的IP地址，就会看到:

修改nginx配置文件
1.找到配置文件，nginx的配置文件在安装目录(usr/local/nginx)下的conf/nginx.conf
2.对配置文件进行修改（这里可以用filezilla连接服务器，将文件拉到本地修改后再传回服务器）

user  nobody;
worker_processes  1; #服务器的核心数

events {
    worker_connections  1024;
}
http {
	#没有下面这两行，Vue样式会出不来
    include       mime.types;
    default_type  application/octet-stream;
    server {
        listen       8080;#端口号
        server_name  localhost;#服务器的IP
        location / {
            root   /usr/local/dist;#Vue打包好的项目位置
            index  index.html;
        }
    }
}

3.修改完毕后，将打包后的Vue项目丢到配置文件中指定的目录下，然后重启nginx。

三.使用NodeJS部署

安装参考文档：https://github.com/nodesource/distributions
1.在服务器上安装nodejs

curl -sL https://rpm.nodesource.com/setup_15.x | bash -
yum install -y nodejs

2.在服务器中创建一个文件夹——vue_server(随便取)
在文件夹目录下，执行命令：

npm i express -S

(文件夹也可以在自己电脑上创，到时候弄好通过filezilla丢到服务器上就行了)
将dist文件夹（打包好的vue项目）也放到该文件夹下
3.在vue_server文件夹中新建文件app.js

const express = require('express')
const compression = require('compression')
const app = express()

// 一定要把这一行代码 写到静态资源托管之前
app.use(compression())
app.use(express.static('./dist'))

app.listen(8080, () => {
})

这里可以用命令 node app.js看下效果
4.使用pm2管理应用
在服务器中安装pm2: npm i pm2 -g
启动项目：pm2 start app.js --name自定义名称
查看运行项目：pm2 ls
重启项目：pm2 restart 自定义名称
停止项目：pm2 stop 自定义名称
删除项目：pm2 delete 自定义名称