使用pm2+express部署vue项目

本文介绍了如何在Centos7服务器上使用pm2和express部署前后端分离的vue项目,包括springboot后端的打包、前端vue项目的打包、服务器环境配置、pm2托管以及nginx反向代理的设置。在部署过程中,特别提到了nginx配置SSL证书和解决前端请求重定向问题的方法。
摘要由CSDN通过智能技术生成

使用pm2 + express 在Contos上部署前端项目

在Centos7上使用pm2+express部署springboot+vue项目

项目是一个前后端分离项目 后端使用springboot 前端为两个Vue项目

如图:

image-20210730085325197

api为后端接口 cms和view为前端项目 共用一个api接口

1. 打包springboot项目

将项目打包packagexxxxx.jar发送至服务器(随便哪里能找到就行)

image-20210730085731152

2. 将前端两个项目打包

由于我的前端是使用vue-cli创建的 所以打包npm run build后生成dist文件夹后 等下面环境安装好后将文件夹放入服务器

这边是创建了 Blog_cms和Blog_view文件夹

部署前端项目

由于前端使用的是vue-cli创建 先对项目进行打包npm run build

得到dist文件夹

3. 在服务器安装环境

创建node项目

  • npmnode环境 和nginx 自行安装

  • 在刚才创建的Blog_cmsBlog_view文件夹中分别初始化包管理配置文件

    npm init -y
    

安装 express (可以通过express快速创建web服务器)

  • 安装express

    npm i express -S
    

开启gzip配置

gzip可以减小文件体积,使传输速度快

  • 全局安装: npm i compression -S

安装pm2 管理应用

在服务器中全局安装pm2

  • 安装: npm i pm2 -g

将打包好的前端两个项目 放入服务器中对应的文件夹中

image-20210730090701315

进入dist文件夹内 创建配置启动文件

在dist生产发布包根目录下,创建启动文件index.js(文件名可自定义)

const express = require('express')
const compression = require("compression") //gzip包
const fs = require('fs')

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值