目录
[2.2解决刷新 404 问题](#2.2解决刷新 404 问题)
[3nginx 服务器部署](#3nginx 服务器部署)
[3.2nginx 配置代理练习](#3.2nginx 配置代理练习)
[3.3nginx 部署前端项目](#3.3nginx 部署前端项目)
1项目打包
- ●我们开发用的脚手架其实就是一个微型服务器,用于:支撑开发环境、运行代理服务器等。
- ●打包完的文件中不存在:.vue、.jsx、.less 等文件,而是:html、css、js等。
- ●打包后的文件,不再借助脚手架运行,而是需要部署到服务器上运行。
- ●打包前,请务必梳理好前端项目的ajax封装(请求前缀、代理规则等)。
2本地服务器部署
2.1具体操作步骤
安装express
前提是电脑已经安装了node
新建一个文件夹,执行npm init -y命令,生成package.json,再执行npm add express命令,下载express,成功之后如下图。
每次修改代码时,都要重新启动服务器,比较麻烦,所以提出了热部署(nodemon),安装命令:npm i nodemon -g
最后完整代码如下:
// 引入express
const express = require('express')
// 配置端口号
const PORT = 8088
// 创建一个app服务实例
const app = express()
// 配置静态资源
app.use(express.static(__dirname + '/public'))
// 绑定端口监听
app.listen(PORT, () => {
console.log(`本地服务器启动成功,http://localhost:${PORT}`)
})
执行命令:nodemon .server.js,浏览器输入http://localhost:8088会出现这个页面:
2.2解决刷新 404 问题
问题分析:前端项目的路由,通常分为两种工作模式,分别为:
1hash模式
hash 值又称锚点,通常用于指定网页中的某个位置,例如下面的网址:
央视网_世界就在眼前,其中的#SUBD1605080062959435就是 hash 值,hash 值只在客户端(如浏览器)中使用,是不会带给服务器的,所以使用 hash 模式时,不存在刷新 404 问题。
2history模式
istory 去掉了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.3请求无法发送问题
问题分析:脱离脚手架后,就没有了代理服务器,无法转发请求到【提供数据】的服务器。
如何解决?------ 在 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': ''
}
}))
3nginx 服务器部署
Nginx(发音为"engine-x")是一款高性能的 HTTP 服务器和反向代理服务器,同时也是一个 IMAP/POP3/SMTP 代理服务器。Nginx 最初由 Igor Sysoev 编写,于 2004 年发布。它以其高性能、高稳定性、丰富的功能集和低系统资源消耗而闻名,主要功能有:
- 1反向代理
- 2负载均衡
- 3静态内容服务
- 4HTTP/2 支持
- 5SSL/TLS 支持
- 6高速缓存
3.2nginx 配置代理练习
安装nginx
-
安装nginx-mac
$ brew install nginx # mac安装nginx
-
查看版本-mac
$ nginx -v # 查看版本
-
查看nginx-mac
$ brew info nginx #查看nginx
注意:mac安装可能遇到的问题
遇到某个包发生错误,直接使用brew安装这个包,再安装nginx
$ brew install pcre2 # 安装出错的包
$ brew install nginx # 安装nginx
遇到这个错误,可以直接执行该命令,安装对应的工具,再安装nginx
$ xcode-select --install # 安装对应工具
$ brew install nginx # 安装nginx
nginx部署启动项目
-
mac查看nginx的相关目录
brew info nginx #查看nginx
mac-nginx安装目录-/opt/homebrew/Cellar/nginx/1.23.3
mac-配置文件路-/opt/homebrew/etc/nginx/nginx.conf
- 将打包的文件放置到安装目录/html下
-
mac-启动服务命令
$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx #启动命令
-
mac-停止服务
$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s stop #停止命令
-
mac重启服务
$ /opt/homebrew/Cellar/nginx/1.23.3/bin/nginx -s reload #重启
注意: mac版本的nginx的默认端口为8080
3.3nginx 部署前端项目
整体思路:让nginx充当两个角色,既是 静态内容服务器,又是代理服务器。
修改nginx配置如下,注意nginx的根目录最好不是 C 盘
# 配置nginx根目录
location / {
root D:\dist;
index index.html index.htm;
}
# 配置代理
location /dev/ {
# 设置代理目标
proxy_pass http://sph-h5-api.atguigu.cn/;
}
2修改前端项目,让所有请求都转发给 /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/;
}
加上这两个"/"就剔除掉了dev
4云服务器部署
- 我们可以在云服务器上借助nginx完成部署,大致流程与本地nginx部署一致
- 1关于购买云服务器,可选择:阿里云、腾讯云等。
- 2关于操作系统,看个人习惯,Ubuntu、CentOs、RedHat、都不错。
- 3购买完成后记得重置密码
- 4linux 远程操作软件:Xshell、Xftp
5具体配置如下:
●给服务器安装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 {
}
}
}
本地资源上传
将打包好的文件上传到远程服务器,我们这里可以使用FinalShell,比较简单
首先打开FinalShell,点击新建,然后输入主机地址,点击连接,接着根据提示输入用户(默认是root)、密码,如下图。
接下来把你需要上传的文件直接拖入到远程目录下就可以上传。
这里我把我的打包文件放在了/var/sph这个目录下,大家可以自己选择(建议不要放在root文件下面,会有权限的问题
配置服务器与nginx
下载nginx
yum install nginx
查看nginx的版本
nginx -v
查看nginx的安装位置
/etc/nginx
nginx配置
找到nginx目录下的conf/nginx.conf文件,之前在本地怎么配置的,远程也是一样的~
nginx 新增对外开放端口方法
这里我以阿里云服务器为例,进入首页后打开控制台,找到服务器实例,点击安全组,如下图。
点击管理规则,在入方向这里进行端口的配置
此时再去通过浏览器访问,就可以正常访问了
直接启动nginx
service nginx start