【部署项目】禹神：前端项目部署上线笔记
1.项目打包
● 我们开发用的脚手架其实就是一个微型服务器，用于：支撑开发环境、运行代理服务器等。
● 打包完的文件中不存在：.vue、.jsx、.less 等文件，而是：html、css、js等。
● 打包后的文件，不再借助脚手架运行，而是需要部署到服务器上运行。
● 打包前，请务必梳理好前端项目的ajax封装（请求前缀、代理规则等）。
2.本地服务器部署
2.1.解决刷新 404 问题
问题分析：前端项目的路由，通常分为两种工作模式，分别为：
hash模式
hash值又称锚点，通常用于指定网页中的某个位置，例如下面的网址：
https://www.cctv.com/#SUBD1605080062959435，其中的#SUBD1605080062959435就是hash值，hash值只在客户端（如浏览器）中使用，是不会带给服务器的，所以使用hash模式时，不存在刷新404问题。
history模式
history去掉了URL中的#号，可以让应用的URL看起来更美观，带来的问题就是刷新时，会将前端路由携带给后端，而后端没有对应资源的匹配，就出现了404问题。
解决方案一：将前端路由器工作模式改为 hash 模式 —— 不太推荐。
解决方案二：让服务器在收到未配置的GET路由时，都返回index.html即可。
方案二最终其实是把 url 中的 path，交给了前端路由去处理，具体配置如下：
app.get('*',(req,res)=>{res.sendFile(__dirname + '/public/index.html')
})
也可以借助connect-history-api-fallback中间件完成配置
const history = require('connect-history-api-fallback');app.use(history());
// 配置静态资源
app.use(express.static(__dirname + '/public'))
使用connect-history-api-fallback可以让配置更灵活，比如/login临时不需要作为前端路由处理，就可以按照如下方式配置
app.use(history({verbose:false,rewrites:[{ from: /^\/login.*$/, to: (context) => context.parsedUrl.path },]
}))
2.2.请求无法发送问题
问题分析：脱离脚手架后，就没有了代理服务器，无法转发请求到【提供数据】的服务器。
如何解决？—— 在 Node 服务器中借助http-proxy-middleware中间件配置代理，具体配置如下：
// 引入createProxyMiddleware
const { createProxyMiddleware } = require('http-proxy-middleware')// 配置代理中间件
app.use('/dev', createProxyMiddleware({target: 'http://sph-h5-api.atguigu.cn',changeOrigin: true,pathRewrite: {'^/dev': ''}
}))
3.nginx 服务器部署
3.1.nginx 简介
Nginx（发音为“engine-x”）是一款高性能的 HTTP 服务器和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。Nginx 最初由 Igor Sysoev 编写，于 2004 年发布。它以其高性能、高稳定性、丰富的功能集和低系统资源消耗而闻名，主要功能有：
- 反向代理
- 负载均衡
- 静态内容服务
HTTP/2支持SSL/TLS支持- 高速缓存
3.2.nginx 配置代理练习
nginx 部署前端项目
整体思路：让nginx充当两个角色，既是 静态内容服务器，又是代理服务器。
- 修改
nginx配置如下，注意nginx的根目录最好不是C 盘(防止权限不足)
# 配置nginx根目录
location / {root D:\dist; # d盘下的distindex index.html index.htm;
}
# 配置代理
location /dev/ {# 设置代理目标proxy_pass http://sph-h5-api.atguigu.cn/;
}
/dev/和http://sph-h5-api.atguigu.cn/后面必须加上斜杠/表示请求匹配到/dev时 转发到http://sph-h5-api.atguigu.cn，并且会去掉/dev
- 修改前端项目，让所有请求都转发给
/dev，随后重新打包
const request = axios.create({baseURL:'/dev',timeout:10000
})
- 随后直接访问
nginx服务器即可，例如nginx如果运行在8099端口，则访问：
http://localhost:8099 - 随后会遇到刷新
404问题，追加nginx配置来解决
# 配置nginx根目录
location / {root D:\dist;index index.html index.htm;try_files $uri $uri/ /index.html; # 解决刷新404
}
# 配置代理
location /dev/ {# 设置代理目标proxy_pass http://sph-h5-api.atguigu.cn/;
}
4.云服务器部署
云服务器上借助nginx完成部署，大致流程与本地nginx部署一致
具体配置如下：
● 给服务器安装nginx
yum install nginx
● 将打包后的前端资源放在：/var/sph文件夹中。
● 使用Xftp配置服务器的 nginx，修改文件：/etc/nginx/nginx.config
配置文件内容如下：
# For more information on configuration, see:
# * Official English Documentation: http://nginx.org/en/docs/
# * Official Russian Documentation: http://nginx.org/ru/docs/user nginx;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;# Load dynamic modules. See /usr/share/doc/nginx/README.dynamic.
include /usr/share/nginx/modules/*.conf;events {worker_connections 1024;
}http {log_format main '$remote_addr - $remote_user [$time_local] "$request" ''$status $body_bytes_sent "$http_referer" ''"$http_user_agent" "$http_x_forwarded_for"';access_log /var/log/nginx/access.log main;sendfile on;tcp_nopush on;tcp_nodelay on;keepalive_timeout 65;types_hash_max_size 2048;include /etc/nginx/mime.types;default_type application/octet-stream;# Load modular configuration files from the /etc/nginx/conf.d directory.# See http://nginx.org/en/docs/ngx_core_module.html#include# for more information.include /etc/nginx/conf.d/*.conf;server {listen 80 default_server;listen [::]:80 default_server;server_name _;root /usr/share/nginx/html;# Load configuration files for the default server block.include /etc/nginx/default.d/*.conf;location / {root /var/sph;index index.html index.htm;try_files $uri $uri/ /index.html; # 解决刷新404}# 配置代理location /dev/ {# 设置代理目标proxy_pass http://sph-h5-api.atguigu.cn/;}error_page 404 /404.html;location = /40x.html {}error_page 500 502 503 504 /50x.html;location = /50x.html {}}
}
5.资料地址
https://gitee.com/RanGuMo/front-deployment.git