项目上线操作

一、通过 node 创建 web 服务器

  1. 新建一个文件夹
  2. 执行npm init -y初始化包管理文件
  3. 执行npm install express -S安装express框架
  4. 将vue项目打包生成的dist文件复制到该文件夹中
  5. 在文件根目录新建文件app.js
  6. 在app.js文件中通过 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')
		})
  1. 在浏览器地址栏输入http://127.0.0.1,即可运行打包发布的项目

二、为创建的web服务器开启gzip网络传输压缩

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

	     // 安装相应包
		 npm install compression -S
		 // 导入包
		 const compression = require('compression');
		 // 启用中间件,一定要把这一行写在静态资源托管之前,否则gzip压缩不会生效
		 app.use(compression());

三、 配置 HTTPS 服务

申请 SSL 证书https://freessl.org
① 进入 https://freessl.cn/ 官网,输入要申请的域名并选择品牌。 ② 输入自己的邮箱并选择相关选项。
③ 验证 DNS(在域名管理后台添加 TXT 记录)。
④ 验证通过之后,下载 SSL 证书( full_chain.pem 公钥;private.key 私钥)。
在web服务器中导入证书

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

四、使用 pm2 管理应用

① 在服务器中安装 pm2:npm i pm2 -g
② 启动项目:pm2 start 脚本(入口文件名称) --name 自定义名称
③ 查看运行项目:pm2 ls
④ 重启项目:pm2 restart 自定义名称(可以为自定义名,也可以是id)
⑤ 停止项目:pm2 stop 自定义名称(可以为自定义名,也可以是id)
⑥ 删除项目:pm2 delete 自定义名称(可以为自定义名,也可以是id)

五、web服务器入口文件代码展示

const express = require('express')
const compression = require('compression')
const https = require('https')
const fs = require('fs')
// 创建 web 服务器
const app = express()
const options = {
  cert: fs.readFileSync('./full_chain.pem'),
  key: fs.readFileSync('./private.key')
}
// 一定要把这一行写在静态资源托管之前,否则gzip压缩不会生效
app.use(compression())
// 托管静态资源
app.use(express.static('./dist'))
// 启动 web 服务器
// app.listen(80, () => {
//   console.log('web server running at http://127.0.0.1')
// })
// https协议的网站默认运行在443端口
https.createServer(options, app).listen(443)
发布了33 篇原创文章 · 获赞 5 · 访问量 1349
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览