ToB企服应用市场:ToB评测及商务社交产业平台

标题: 【项目上线】项目上线操作步骤 [打印本页]

作者: 络腮胡菲菲 时间: 2024-8-30 12:57
标题: 【项目上线】项目上线操作步骤
目次
1. 项目打包
2. 本地服务器摆设
2.1. 具体操作步骤
2.2. 办理刷新 404 问题
2.3. 哀求无法发送问题
3. nginx 服务器摆设
3.1. nginx 简介
3.2. nginx 配置代理练习
3.3. nginx 摆设前端项目
4. 云服务器摆设

1. 项目打包

我们开辟用的脚手架实在就是一个微型服务器，用于：支撑开辟情况、运行代理服务器等。
打包完的文件中不存在：.vue、.jsx、.less 等文件，而是：html、css、js等。
打包后的文件，不再借助脚手架运行，而是必要摆设到服务器上运行。
打包前，请务必梳理好前端项目标ajax封装（哀求前缀、代理规则等）。

2. 本地服务器摆设

2.1. 具体操作步骤

第一步：预备一个本地的服务器

本地服务器可以用：Java、Php、Go、Node.js 等语言编写，本教程接纳是Node.js编写服务器，端口号为：8088，且已经配置了public文件夹为静态资源。
点击下载服务器：

第二步：进行前端项目打包

具体的打包命令，可以参考package.json中的scripts字段配置。

第三步：将打包效果交给服务器

将打包天生的文件内容，放到服务器的静态资源文件夹中（上文中的public文件夹）

第四步：测试访问前端项目

欣赏器访问：http://localhost:8088即可看到我们的项目，但此时会遇到两个问题：

页面刷新 404
ajax 哀求无法发送

2.2. 办理刷新 404 问题

问题分析：前端项目标路由，通常分为两种工作模式，分别为：

hash模式

hash 值又称锚点，通常用于指定网页中的某个位置，比方下面的网址：
央视网_世界就在眼前，其中的#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.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': ''
}
}))

复制代码

3. nginx 服务器摆设

3.1. nginx 简介

Nginx（发音为“engine-x”）是一款高性能的 HTTP 服务器和反向代理服务器，同时也是一个 IMAP/POP3/SMTP 代理服务器。Nginx 最初由 Igor Sysoev 编写，于 2004 年发布。它以其高性能、高稳固性、丰富的功能集和低系统资源消耗而闻名，重要功能有：

反向代理
负载平衡
静态内容服务
HTTP/2 支持
SSL/TLS 支持
高速缓存

3.2. nginx 配置代理练习

今日头条接口地址：https://www.toutiao.com/hot-event/hot-board/?origin=toutiao_pc
直接向其发送 Ajax 哀求会有跨域问题，接下来我们借助nginx办理跨域问题
配置方式一：不过滤前缀
以办理今日头条跨域为例，不干/hot-event掉前缀配置如下

location /hot-event {
# 设置代理目标
proxy_pass https://www.toutiao.com;
# 允许跨域
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' '*';
add_header 'Access-Control-Allow-Headers' '*';
add_header 'Access-Control-Expose-Headers' '*';
}

复制代码

前端写法

axios.get('http://localhost:8099/hot-event/hot-board/?origin=toutiao_pc')

复制代码

配置方式二：过滤前缀
办理今日头条跨域，不干/hot-event掉前缀，nginx配置（8099 端口）

location /dev/ {
# 设置代理目标
proxy_pass https://www.toutiao.com/;
# 允许跨域
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' '*';
add_header 'Access-Control-Allow-Headers' '*';
add_header 'Access-Control-Expose-Headers' '*';
}

复制代码

前端写法

axios.get('http://localhost:8099/dev/hot-event/hot-board/?origin=toutiao_pc')

复制代码

备注：使用下面配置删除上游服务器的指定响应头。

proxy_hide_header Access-Control-Allow-Origin;

复制代码

3.3. nginx 摆设前端项目

整体思绪：让nginx充当两个角色，既是 静态内容服务器，又是代理服务器。

修改nginx配置如下，注意nginx的根目次最好不是 C 盘

# 配置nginx根目录
location / {
root D:\dist;
index index.html index.htm;
}
# 配置代理
location /dev/ {
# 设置代理目标
proxy_pass http://sph-h5-api.atguigu.cn/;
}

复制代码

修改前端项目，让全部哀求都转发给 /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摆设划一

关于购买云服务器，可选择：阿里云、腾讯云等。
关于操作系统，看个人风俗，Ubuntu、CentOs、RedHat、都不错。
购买完成后记得重置暗码
linux 长途操作软件：Xshell、Xftp
具体配置如下：

给服务器安装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 {
}
}
}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)