前端SPA+后端Node分离项目的线上部署(包括云服务)

176 阅读3分钟

前言介绍

当我们做好了一个前后端分离的应用之后,在我们自己本地的项目是必须要部署到服务器上,所有人才能根据你相应的域名来访问你的网站(这里上线的方式有很多种,也可以把自己的网站静态资源挂载到别人服务器,比如常见的github.io访问,这种方式有很多,网上很多可以自己去参考,甚至数据库等也可以挂载到别人服务器,但是不推荐),这里介绍的是从无到有的拥有一个自己的云服务器然后把自己的前后端服务都部署到云服务器上供大家访问

技术介绍

  • 前端:

作为前后端分离的项目,前端不论是vue还是react等框架都是基于构建工具,所以利用构建工具,无论是老牌的webpack还是兴起的vite,前端最后都是需要将自己的代码进行打包生成一个SPA单页面静态的文件夹,里面包含打包后生成的html+css+js,然后通过nginx反向代理把静态资源和请求地址分别代理到前端页面和后面接口请求的地址

  • 后端:

node实现的后端在开发环境我们采用监听一个端口后进行开发,但是如果服务器宕机,或者主进程抛出错误就会导致所有后端服务都失效,这在生产环境是很严重的事情,所以在线上环境我们需要采取其他措施防止这一现象,利用pm2node的进程管理工具来实现多进程多实例运行一套node代码,实现出现错误自动重启,多进程负载均衡,0宕机更新代码

具体内容

首先声明,此处的介绍只是为了能够完成一整套线上部署自己网站的能力,至于nginxpm2有许多有用的功能可能不会介绍到

1.Nginx

部署一个网站最基本用到的主要是nginx的静态资源服务提供前端静态资源的访问与反向代理请求地址到后端的端口上,至于负载均衡等多用于并发,把并发的请求均衡地分配到各个服务器减轻各自压力,以及根据不同设备分发不同页面等暂时不会用到,这里我会介绍如何进行最基础的反向代理配置与运行

2.PM2

  • node进程管理工具,可用于开多进程多实例同一端口(基于node的cluster模块),或者多进程单实例多端口(只需要设置exec_mode为fork模式,需要额外配置),
  • 同样也有负载均衡的功能
  • 终端监控
  • 日志管理(把代码中的console从控制台打印到独立文件中,与log4js有冲突,如有需求需要额外配置)
  • 这里我会介绍如何进行最基础的配置介绍与命令功能介绍与实现

3.腾讯云

这里采用腾讯云的云服务,也可以采用其他云服务,腾讯云轻量应用服务器2核2g后一年只需要65r,自己学习应该够用,域名的话不追求后缀个位数也能拿下,加起来80不到就有了自己第一个云服务器了,这里我会介绍腾讯云最基础的域名购买注册,dns解析,备案,免费ssl证书申请以及把自己的前后端部署到云服务器上