前端项目上线的几种方式
date
Oct 19, 2024
AI 摘要
前端项目上线可通过打包、部署本地服务器、使用nginx等方式实现，需解决页面刷新404和请求无法发送的问题，建议使用hash模式或配置服务器返回index.html来处理路由问题，并通过http-proxy-middleware设置代理。云服务器部署流程与本地类似。
slug
front-end-project-launched
status
Published
tags
front-end
summary
前端项目上线可通过打包、部署本地服务器、使用nginx等方式实现，需解决页面刷新404和请求无法发送的问题，建议使用hash模式或配置服务器返回index.html来处理路由问题，并通过http-proxy-middleware设置代理。云服务器部署流程与本地类似。
type
Post
1、项目打包
- 我们开发用的脚手架其实就是一个微型服务器，用于：支撑开发环境、运行代理服务器等。
- 打包完的文件中不存在：.vue、.jsx、.less 等文件，而是：html、css、js等。
- 打包后的文件，不再借助脚手架运行，而是需要部署到服务器上运行。
- 打包前，请务必梳理好前端项目的ajax封装（请求前缀、代理规则等）。
2、本地服务器部署
2.1、具体操作步骤#
- 第一步：准备一个本地的服务器
- 第二步：进行前端项目打包 具体的打包命令，可以参考package.json中的scripts字段配置。
- 第三步：将打包结果交给服务器
- 第四步：测试访问前端项目
2.2、解决刷新 404 问题#
问题分析：前端项目的路由，通常分为两种工作模式，分别为：
- hash模式
- history模式
解决方案一：将前端路由器工作模式改为 hash 模式 —— 不太推荐。
解决方案二：让服务器在收到未配置的GET路由时，都返回index.html即可。 方案二最终其实是把 url 中的 path，交给了前端路由去处理，具体配置如下：
也可以借助connect-history-api-fallback中间件完成配置
使用connect-history-api-fallback可以让配置更灵活，比如/login临时不需要作为前端路由处理，就可以按照如下方式配置
2.3、请求无法发送问题#
问题分析：脱离脚手架后，就没有了代理服务器，无法转发请求到【提供数据】的服务器。
如何解决？—— 在 Node 服务器中借助http-proxy-middleware中间件配置代理，具体配置如下：
3、nginx 服务器部署
3.1、nginx 简介#
Nginx（发音为“engine-x”）是一款高性能的 HTTP 服务器和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。Nginx 最初由 Igor Sysoev 编写，于 2004 年发布。它以其高性能、高稳定性、丰富的功能集和低系统资源消耗而闻名，主要功能有：
- 反向代理
- 负载均衡
- 静态内容服务
- HTTP/2 支持
- SSL/TLS 支持
- 高速缓存
3.2、nginx 配置代理练习#
直接向其发送 Ajax 请求会有跨域问题，接下来我们借助nginx解决跨域问题
- 配置方式一：不过滤前缀
以解决今日头条跨域为例，不干/hot-event掉前缀配置如下
前端写法
- 配置方式二：过滤前缀 解决今日头条跨域，不干/hot-event掉前缀，nginx配置（8099 端口）
前端写法
备注：使用下面配置删除上游服务器的指定响应头。
3.3、nginx 部署前端项目#
整体思路：让nginx充当两个角色，既是 静态内容服务器，又是代理服务器。
- 修改nginx配置如下，注意nginx的根目录最好不是 C 盘
- 修改前端项目，让所有请求都转发给 /dev，随后重新打包
- 随后直接访问nginx服务器即可，例如 nginx如果运行在8099端口，则访问：
http://localhost:8099
- 随后会遇到刷新404问题，追加nginx配置来解决
4、云服务器部署
我们可以在云服务器上借助nginx完成部署，大致流程与本地nginx部署一致
- 关于购买云服务器，可选择：阿里云、腾讯云等。
- 关于操作系统，看个人习惯，Ubuntu、CentOs、RedHat、都不错。
- 购买完成后记得重置密码
- linux 远程操作软件：Xshell、Xftp
- 具体配置如下：
- 给服务器安装nginx
- 将打包后的前端资源放在：/var/sph文件夹中。
- 使用Xftp配置服务器的 nginx，修改文件：/etc/nginx/nginx.config。