Vue项目上线相关配置

项目上线相关配置
- 1.通过node创建web服务器
- - 1.1.创建vue-shop-server文件夹，并用vscod打开,将原项目的dist文件夹复制进来。在终端中输入：
  - 1. 2 创建app.js文件夹，并输入
  - 1.3.启动
- 2.开启gzip配置
- - 2.1安装相应的包
  - 2.2 使用
- 3.配置HTTPS服务
- - 3.1 进入https://freessl.cn/官网，输入要申请的域名并选择品牌
  - 3.2 输入自己邮箱，并选择相关项
  - 3.3 验证DNS,在域名管理后台添加TXT记录
  - 3.4 验证通过后，下载SSL证书（full_chain.pem公钥：private.key私钥）
  - 3.5在后台项目中导入证书
- 4.使用pm2管理应用
- - 4.1在服务器中安装pm2
  - 4.2启动项目
  - 4.3查看运行项目
  - 4.4重启项目
  - 4.5停止项目
  - 4.6删除项目

项目上线相关配置

1.通过node创建web服务器

创建node项目，并安装express,通过express快速创建web服务器，将vue项目打包所生成的dist文件夹，托管为静态资源即可。
在这里插入图片描述

1.1.创建vue-shop-server文件夹，并用vscod打开,将原项目的dist文件夹复制进来。在终端中输入：

npm i -y
npm i express -S

在这里插入图片描述

1. 2 创建app.js文件夹，并输入

const express = require('express')
const app = express()
app.use(express.static('./dist'))
app.listen(80,()=>{ 
    console.log('server running http://127.0.0.1')
})

在这里插入图片描述

1.3.启动

node app

在这里插入图片描述

2.开启gzip配置

使用gzip可以减小体积，使传输速度更快。
可以通过服务器端使用Express做gzip压缩，其配置如下

2.1安装相应的包

npm i compression -S

2.2 使用

//导入包
const compression = require('compression')
//启用中间件
// 一定要把这行代码，写到静态资源托管之前
app.use(compression()

在这里插入图片描述

3.配置HTTPS服务

为什么要使用HTTPS服务？

传统的http协议传输的数据都是明文，不安全
采用https协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全
申请SSL

3.1 进入https://freessl.cn/官网，输入要申请的域名并选择品牌

3.2 输入自己邮箱，并选择相关项

3.3 验证DNS,在域名管理后台添加TXT记录

3.4 验证通过后，下载SSL证书（full_chain.pem公钥：private.key私钥）

3.5在后台项目中导入证书

const https = requrie('https')
const fs = require('fs')
const options = { 
    cert:fs.readFileSync('./full_chain.pem'),
    key:fs.readFileSync('./private.key')
}
https.createServer(options,app).listen(443)