前端项目部署上线
提示：本文将介绍三种前端打包项目上线的方式：本地服务器部署、nginx服务器部署、云服务器部署
项目打包
- 开发用的脚手架其实就是一个微型服务器，用于支持开发环境和运行代理服务器
- 打包后的文件没有 .vue、.jsx、.less等文件，只有 .html、.js、.css等文件
- 打包后的文件不再依赖脚手架运行，而是部署到服务器上运行
前提：写完项目后使用命令打包前端项目：
例如：vue项目使用 npm run build 命令打包生成 dist 文件（一般生成的文件在项目文件的根目录下）
默认命令是npm run build,但有的项目自己配置的话，打开package.json文件看具体命令是啥
一、本地服务器部署
1.使用步骤
Ⅰ. 准备一个本地服务器
本地服务器可以使用Java、php、Go、node.js等语言编写，这里是用node.js编写的，静态资源放在public文件夹下（即打包后的dist文件内容放着里面），
如图是一个简单本地服务目录
//server.js文件内容如下：
//1.引入express
const express = require("express")
//2.配置端口号
const PORT = 8088
//3.创建一个app服务实例
const app = express()
//4.配置静态资源
app.use(express.static(_dirname + '/public'))
//5.绑定端口监听
app.listen(PORT,()=>{
const.log(`本地服务启动起来了,地址http://localhost:${PORT}`)
})
启动命令：nodemon server.js 启动成功后输入地址即可打开页面，此时会出现两个bug,
1.刷新页面后404
2.axios发送请求失败了
Ⅱ. 解决两个bug
刷新页面后404
问题分析：前端项目的路由，通常分为两种工作模式，分别为：
1.hash 模式
hash 值又称锚点，通常用于指定网页中的某个位置，例如下面的网址：
https://www.cctv.com/#SUBD1605080062959435，其中的#SUBD1605080062959435就是 hash 值，hash 值只在客户端（如浏览器）中使用，是不会带给服务器的，所以使用 hash 模式时，不存在刷新 404 问题。
2.history 模式
history 去掉了URL中的#号，可以让应用的URL看起来更美观，带来的问题就是刷新时，会将前端路由携带给后端，而后端没有对应资源的匹配，就出现了 404 问题。
解决方式一：将前端路由器工作模式改为 hash 模式 —— 不推荐。
解决方式二：让服务器在收到未配置的GET路由时，都返回index.html即可，代码如下：
//server.js 文件
//把 url 中的 path，交给了前端路由去处理,每次刷新进入index.html文件
app.get('*',(req,res)=>{
res.sendFile(__dirname + '/public/index.html')
})
还可以使用插件 connect-history-api-fallback ，npm i connect-history-api-fallback 下载插件后，配置代码如下即可:
//server.js 文件
const history = require("connect-history-api-fallback")
// 可以让配置更灵活，比如/login临时不需要作为前端路由处理
app.use(history({
verbose:false,
rewrites:[
//表示如果当前页面是login,那你哪来的回哪去
// { from: /^\/login.*$/, to: (context) => context.parsedUrl.path },
]
}))
axios发送请求失败了
问题分析：脱离脚手架后，就没有了代理服务器，无法转发请求到【提供数据】的服务器。
解决？—— 在 Node 服务器中借助 http-proxy-middleware 插件配置代理，具体配置如下：
// 下载命令：npm i http-proxy-middleware
// 引入createProxyMiddleware
const { createProxyMiddleware } = require('http-proxy-middleware')
// 配置代理中间件 /dev就是匹配脚手架里面配置代理的部分url，有的叫/api等
app.use('/dev', createProxyMiddleware({
target: 'http://sph-h5-api.atguigu.cn',
changeOrigin: true,
pathRewrite: {
// 移除请求url中的dev
'^/dev': ''
}
}))
二、Nginx服务器部署
Nginx 是一款高性能的 HTTP 服务器和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。它以其高性能、高稳定性、丰富的功能集和低系统资源消耗而闻名，主要功能有：
- 反向代理
- 负载均衡
- 静态内容服务
- HTTP/2 支持
- SSL/TLS 支持
- 高速缓存
niginx目录文件如下，地址点击链接找对应版本下载即可：
1.使用步骤
整体思路：让nginx充当两个角色，既是 静态内容服务器，又是代理服务器。
要更改配置的话找 /conf/nfinx.conf 文件
1.修改nginx配置如下，注意nginx的根目录最好不是 C 盘
注意：每次更改nginx配置后，先关闭nginx的进程，再重新启动nginx(点击文件下的nginx.exe就是重启)
# 配置nginx根目录
server {
listen 8099; #8099就是配置的访问端口号
server_name locallhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location / {
# 项目dist包放置的位置
root D:\dist;
index index.html index.htm;
}
# 配置代理 /dev/就是匹配脚手架里面配置代理的部分url，有的叫/api等
# /dev/： /dev不展示，/dev:展示/dev
location /dev/ {
# 设置代理目标 写入代理的服务器地址
proxy_pass http://xxx.com.cn/;
}
}
2.修改前端项目，让所有请求都转发给 /dev，随后重新打包
const request = axios.create({
baseURL:'/dev',
timeout:10000
})
3.随后直接访问nginx服务器即可，例如 nginx如果运行在8099端口，则访问：
http://localhost:8099
4.如果遇到刷新404问题，追加nginx配置来解决
# 配置nginx根目录
location / {
root D:\dist;
index index.html index.htm;
try_files $uri $uri/ /index.html; # 解决刷新404
}
# 配置代理
location /dev/ {
# 设置代理目标
proxy_pass http://xxx.com.cn/;
}
三.云服务器部署
在云服务器上借助nginx完成部署，大致流程与本地nginx部署一致
云服务器
可选择：阿里云、腾讯云等。
小型项目部署选择轻量应用服务器然后基于操作系统镜像即可
操作系统，看个人习惯，Ubuntu、CentOs、RedHat、都不错。我这里选择的是CentOs 7.6
购买完服务器后记得重置密码
服务器在控制台内找轻量级服务器，找到公网IP地址（部署好后就是项目地址）
linux 远程操作软件：Xshell、Xftp
Xshell: 用于写命令操作系统的
Xftp: 用于连接服务器，然后传输文件的
Xshell
1.打开后链接服务器后即可对系统使用命令操作
2.给服务器安装nginx
//yum 是Linux内置的一个包管理器
yum install nginx
如何确认是否安装成功，找到服务器根目录下/etc文件夹下面如果出现nginx文件，即可代表安装成功
Xftp
1.打开后链接服务器，即可新建文件夹
2.将前端静态资源（dist文件内容）放在里面，这里文件放在/var目录下，例如：/var/bobc_web
注：最好不要将文件放在/root目录下面，因为root本身存在很多权限
3.找到 /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 / {
# dist文件夹相对路径，可根据实际情况进行更改
root /var/bobc_web;
index index.html index.htm;
try_files $uri $uri/ /index.html; # 解决刷新404
}
# 配置代理
location /dev/ {
# 设置代理目标
proxy_pass http://xxx.com.cn/;
}
error_page 404 /404.html;
location = /40x.html {
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
}
}
# HTTPS server
# server {
# listen 443 ssl;
# server_name localhost;
# ssl_certificate cert.pem;
# ssl_certificate cert.key;
# ssl_session_cache shared:SSL:1m;
# ssl_session_timeout 5m;
# ssl_ciphers HIGH:!aNULL:!MD5;
# ssl_prefer_server_ciphers on;
# location / {
# root html;
# index index.html index.htm;
# }
# }
}
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
