Vue项目上线相关配置

超、凢脫俗 2023-03-04 03:27 17阅读 0赞

### 目录 ###

*  项目上线相关配置
 *   *  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文件夹，托管为静态资源即可。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70]

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

npm i -y
    npm i express -S

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 2]

### 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')
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 3]

### 1.3.启动 ###

node app

![在这里插入图片描述][20200801091653550.png]

## 2.开启gzip配置 ##

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

### 2.1安装相应的包 ###

npm i compression -S

### 2.2 使用 ###

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

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 4]

## 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)

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 5]

## 4.使用pm2管理应用 ##

### 4.1在服务器中安装pm2 ###

npm i pm2 -g

### 4.2启动项目 ###

pm2 start脚本 --name自定义名称

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 6]

### 4.3查看运行项目 ###

pm2 ls

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 7]

### 4.4重启项目 ###

pm2 restart 自定义名称

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 8]

### 4.5停止项目 ###

pm2 stop 自定义名称

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 9]

### 4.6删除项目 ###

pm2 delete 自定义名称

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 10]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70]: /images/20230208/17111ec4399e4e6c86a3ac066a12ff80.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 1]: /images/20230208/c52cc182ce114d6d8bc1492c1bb30649.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 2]: /images/20230208/286cf872beda4e8d97ecac29eac98d36.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 3]: /images/20230208/3e24dc80f6f640ae9416fe268cab8eae.png
[20200801091653550.png]: /images/20230208/e87768ee161b470296186ff65355a990.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 4]: /images/20230208/75e7dba064ab47efadaaf7baceca5c22.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 5]: /images/20230208/4b3050162adf48aab091b8174316cc76.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 6]: /images/20230208/6ba8cfd6a7634e59ba06a84abf511b48.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 7]: /images/20230208/edd4719dd5e54a61a9df3bb2d7511131.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 8]: /images/20230208/a50347beaefc46d8a474b14fb9c7b767.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 9]: /images/20230208/f21768acfc0c489192ab9aa1d782cbad.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzNTU0OTk3_size_16_color_FFFFFF_t_70 10]: /images/20230208/7343b82d7a8744a8a353886bbe2790eb.png