1. 通过node创建web服务器

创建node项目，并安装express，通过express快速创建web服务器，将vue打包生成的dist文件夹，托管为静态资源即可，关键代码如下：

const express = require('express');
// 创建web服务器
const app = express();
// 托管静态资源
app.use(express.static('./dist'));
// 启动web服务器
app.listen(80, () => {console.log('web server running at http://127.0.0.1');
})

2. 项目上线相关配置

2.1 开启gzip配置

使用gzip可以减小文件体积，使传输速度更快

可以通过服务端使用Express做gzip压缩，其配置如下：

// 安装相应的包
npm install compression - D
// 导入包
const compression = require('compression')
// 启用中间件
app.use(compression())

2.2 配置HTTPS服务

为什么要启用HTTPS服务？

1. 传输的HTTP协议传输的数据都是明文，不安全

2. 采用HTTPS协议对传输的数据进行了加密处理，可以防止数据被中间人窃取，使用更安全

申请SSL证书（https://freessl.org）

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

2. 输入自己的邮箱并选择相关选项

3. 验证DNS（在域名管理后台添加TXT记录）

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

在后台项目中导入证书

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

2.3 使用pm2管理应用

1. 在服务器中安装pm2：npm i pm2 -g

2. 启动项目：pm2 start 脚本 --name 自定义名称

3. 查看运行项目：pm2 ls

4. 重启项目：pm2 restart 自定义名称

5. 停止项目：pm2 stop 自定义名称

6. 删除项目：pm2 delete 自定义名称

前端项目上线相关配置相关推荐

web前端项目上线流程是怎样的
web前端项目上线流程是怎样的? (1)流程建议模拟线上的开发环境本地反向代理线上真实环境开发即可.(apache,nginx,nodejs均可实现) 模拟线上的测试环境模拟线上的测试环境,其实 ...
Jeecg系统上线相关配置
JAR部署方案正式环境部署一.jeecg-boot项目打JAR包二.通过JAR方式启动后台三.前台项目build打包修改前端.env文件红线部分改为服务器地址四.nginx配置(conf ...
prefetch 和preload_Preload和Prefetch以及前端项目中的配置
1.vuecli3.x or 4.x默认打包之后,部署到服务器上的项目,会对静态资源的标签上默认加载preload或者prefetch属性, 啥是preload和prefetch呢? Preload的 ...
前端项目打包优化及上线
前端项目优化及上线根据自己项目实际,进行webpack配置,这里只是一个参考,关于上线很多功能作为了解. 优化问题项目优化策略步骤及详解安装配置 1.生成打包报告=>为了直观发现项目中的问题 ...
部署前端项目 Linux系统的nginx配置
为什么80%的码农都做不了架构师?>>> 一.本地文件上传到服务器 scp -r /c/Develop/manage-system/dist/* username@server ...
rust react tauri app 现有前端项目打包(windows)
现有前端项目打包环境配置 nodejs及相应包管理器(npm或yarn) rust 开发环境 WebView2 安装下载地址https://developer.microsoft.com/en-u ...
使用nginx部署前端项目
目录安装Nginx 1.下载docker的nginx镜像 2.查看下载完成的镜像 3.运行一个nginx的镜像的实例 4.进入nginx容器 5.在物理机创建对应文件夹 6.拷贝容器中的对应的文件夹 ...
使用nginx部署多个前端项目
常见3种方法来实现在一台服务器上使用nginx部署多个前端项目的方法. 基于域名配置基于端口配置基于location配置基于域名配置基于域名配置,前提是先配置好了域名解析.比如说你自己买了一个 ...
项目上线，部署到服务器（腾讯服务器），http协议及https协议（微信小程序必须https协议才可发布）、Nginx配置
一.准备服务器: 1.选择自己的服务器,这里有很多服务器比如,阿里服务器,腾讯服务器等,这里我选择腾讯服务器做测试,其官网:https://cloud.tencent.com/,微信扫码登录后如下进入 ...

前端项目上线相关配置

1. 通过node创建web服务器

2. 项目上线相关配置

2.1 开启gzip配置

2.2 配置HTTPS服务

2.3 使用pm2管理应用

前端项目上线相关配置相关推荐

最新文章

热门文章