前端项目部署指南，前端项目打包上线

前言：
前端开发完项目，打包dist文件，一般情况下，把dist文件包交给运维，然后运维部署上线，这样确实没啥问题，但是小公司或者初创公司压根没有运维，可能后段也是二把手，这时，前端能进行线上部署，那你就牛逼了。

第一种部署（本地部署，只能局部访问）

1、使用node开发后段，在本地起的服务器时，

//本地用node开发一个服务器，文件名称为server.js
//引入express
const express = require('express')
const history = require('connect-history-api-fallback'); //解决刷新页面404问题
const fcreateProxyMiddleware }= require('http-proxy-middleware'); //解决前端项目请求接口失败问题，就是让接口找到对应的服务器路径
// 配置端口号
const PORT = 8088
1/ 创建一个app服务实例
const app = express()
//前端路由界面可以使用history模式的配置
app.use(history({
rewrites:[]
}))

//配置静态资源
app.use(express.static( dirname +'/public'))
//配置正确的接口基础路径
app.use(
'/dev',
createProxyMiddleware({
target:'http://XXXXXXXXXX.cn',
changeOrigin: true,
pathRewrite: {'^/dev' :'}
})
)
//绑定端口监听
app.listen(PORT,()=>{
console.log(`本地服务器启动成功，http://localhost:${PORT}`)
})

第二种部署 （nginx-1.24.0，可以局部访问）

//nginx.conf文件中
keepalive timeout 65;
#gzip on;
server {
listen		8099;
server_name	 localhost;
#charset koi8-r;
#access_log logs/host.access.log  main;
location: / {
root	D:\dist;  #这个是在打包的前端包路径
index   index.html index.html;
try_files $uri $uri/ /index.html; #解决刷新404
location /dev/ {	#dev后的斜杠，以及.cn后面的斜杠，表示遇到/dev时，是要删除掉/dev标识的
#设置代理目标
proxy_pass http://xxxxxxxxxx.cn/;
}

第三种部署（云服务器部署，配置线上nginx，这样任何人都可以进行访问了）

1、购买服务商的云服务器，

//会用到两个工具
//Xshell。执行命令的（绑定服务器的账号密码）
//Xftp 作用是链接远程服务器的（绑定服务器的账号密码）