前端项目上线

目录

1项目打包

2本地服务器部署

2.1具体操作步骤

2.2解决刷新 404 问题 

2.3请求无法发送问题

3nginx 服务器部署

3.2nginx 配置代理练习

安装nginx

nginx部署启动项目 

3.3nginx 部署前端项目 

4云服务器部署 

本地资源上传 

配置服务器与nginx 


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安装可能遇到的问题

image.png

遇到某个包发生错误,直接使用brew安装这个包,再安装nginx

$ brew install pcre2  # 安装出错的包
$ brew install nginx  # 安装nginx

image.png

 遇到这个错误,可以直接执行该命令,安装对应的工具,再安装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 
 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/18371.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【设计模式】JAVA Design Patterns——Data Transfer Object(数据传递对象模式)

🔍目的 次将具有多个属性的数据从客户端传递到服务器,以避免多次调用远程服务器 🔍解释 真实世界例子 我们需要从远程数据库中获取有关客户的信息。 我们不使用一次查询一个属性,而是使用DTO一次传送所有相关属性。 通俗描述 使用…

部署LAMP环境

红帽9搭建LAMP 安装Apache 2.安装数据库服务 3.安装php (1)使用IP访问/phpinfo.php 4.安装phpMyAdmin (1)数据库端口改为学号后五位 (2)登录phpmyadmin 5.SSH增加一个端口10022,fttp增加两个端口10080和8080 &#xf…

李廉洋:5.29黄金震荡,原油持续走高,今日美盘行情走势分析及策略。

黄金消息面分析:当前美国存在一个令人担忧且未被充分关注的问题:房地产行业低迷、高利率和抵押贷款利率、租金高涨以及美联储的紧缩政策构成了一个恶性循环。由于高房价和高抵押贷款利率,美国住房经济活动远低于两年前的水平。为了让该行业好…

Apache、Nginx、IIS文件解析漏洞

目录 1、文件解析漏洞介绍 2、Apache相关的解析漏洞 (1)多后缀解析漏洞 (2)Apache配置问题 (3)换行符解析漏洞 (4)罕见后缀解析 3、Nginx相关的解析漏洞 (1&…

《java数据结构》--栈的详解

一.栈的认识 栈是一种不同于链表和顺序表的储存数据结构,它对存储数据和取出数据有着特殊的要求🤔。 首先栈只能从一端存储数据,也就是从一端进,还从这一端出这也是栈最大的特点,这也导致在栈中存取数据都必须遵循先…

C++线程任务队列模型

功能描述 实现一个任务队列,用于任务的执行 任务队列 任务队列可以添加、删除任务,实现对任务的管理添加任务后,任务队列可以开始执行任务队列执行任务方式为串行执行 任务 任务执行需要持续一段10s内随机的时间,执行过程通过…

打造爆款活动:确定目标受众与吸引策略的实战指南

身为一名文案策划经理,我深知在活动策划的海洋中,确定目标受众并设计出能触动他们心弦的策略是何等重要。 通过以下步骤,你可以更准确地确定目标受众,并制定出有效的吸引策略,确保活动的成功: 明确活动目…

【Oracle篇】rman标准化全库备份策略:完整备份or增量备份(第三篇,总共八篇)

💫《博主介绍》:✨又是一天没白过,我是奈斯,DBA一名✨ 💫《擅长领域》:✌️擅长Oracle、MySQL、SQLserver、阿里云AnalyticDB for MySQL(分布式数据仓库)、Linux,也在扩展大数据方向的知识面✌️…

单元测试框架Pytest的基本操作

Pytest基本操作 1. 详解1.1 命名规则:1.2 自定义查找规则:1.3 3种运行方式1.4 执行顺序2. 断言2.1 定义2.2 断言的规则3. mark3.1 mark的作用3.2 mark的标记方式3.3 注册标签名3.4 skip跳过标记4. pytest的参数化5. pytest的夹具(fixture测试夹具)5.1. 作用5.2. 夹具应用场…

web前端框架设计第十一课-常用插件

web前端框架设计第十一课-常用插件 一.预习笔记 1.路由的基础使用 2.动态路由 3.嵌套路由 二.课堂笔记 三.课后回顾 –行动是治愈恐惧的良药,犹豫拖延将不断滋养恐惧

Web渗透-MySql-Sql注入:联合查询注入

SQL注入(SQL Injection)是一种网络攻击技术,攻击者通过将恶意的SQL代码插入到应用程序的输入字段,从而欺骗应用程序执行未经授权的操作。这种攻击方式可以导致严重的安全问题,包括: 数据泄露:攻…

UE5 UE4 快速定位节点位置

在材质面板中,找到之前写的一个节点,想要修改,但是当时写的比较多,想要快速定位到节点位置. 在面板下方的 Find Results面板中,输入所需节点,找结果后双击,就定位到该节点处。 同理,…

【CUDA】Nsight profile驱动的CUDA优化

前置准备 安装NVIDIA Nsight Compute。 安装好后选择使用管理员权限启动下载官方 Demo 代码官方博客Shuffle warp 1. 任务介绍及CPU版本 1.1 任务介绍 任务理解: 有一个 L x M 的矩阵 M 1 M_1 M1​ 对其每行取平均值 得到 V 1 ∈ R L 1 V_1 \in \mathbb{R}^{…

pikachu—exec“eval“

这是原画面 然后呢? 我们知道会传入到后台rce_eval.php来处理然后通过 eval()是啥? 在eval括号里面可以执行外来机器的命令 然后我们通过php的一个内置的命令 我们通过phpinfo(); 这是输入后的结果

(四十八)第 7 章 图(图的数组(邻接矩阵)存储)

1. 背景说明 2. 示例代码 1) errorRecord.h // 记录错误宏定义头文件#ifndef ERROR_RECORD_H #define ERROR_RECORD_H#include <stdio.h> #include <string.h> #include <stdint.h>// 从文件路径中提取文件名 #define FILE_NAME(X) strrchr(X, \\) ? strrch…

《python编程从入门到实践》day41

# 昨日知识点回顾 用户注销、注册&#xff0c;限制访问&#xff0c;新主题关联到当前用户 # 今日知识点学习 第20章 设置应用程序的样式并部署 20.1 设置项目“学习笔记”的样式 20.1.1 应用程序django-bootstrap4 # settings.py ---snip--- INSTALLED_APPS [# 我的应用程序…

链式法则:神经网络前向与反向传播的基石

在深度学习的浪潮中&#xff0c;神经网络以其强大的学习和预测能力&#xff0c;成为解决复杂问题的有力工具。而神经网络之所以能够不断学习和优化&#xff0c;离不开两个核心过程&#xff1a;前向传播和反向传播。其中&#xff0c;链式法则作为微积分学中的一个基本概念&#…

(C11) 泛型表达式

文章目录 ⭐语法⭐举例&#x1f6a9;判断对象类型&#x1f6a9;判断指针&#x1f6a9;函数重载&#x1f6a9;嵌套使用 END ⭐语法 Ref: 泛型选择 (C11 起) - cppreference.com 关键词&#xff1a; Genericdefault _Generic(控制表达式 , 关联列表) (C11 起) 关联列表 类型名:…

PHP:phpmyadmin 将查询数据导出csv

1、输入你的SQL查询出结果 2、查出数据以后拖到最下方【导出】 3、导出CSV

京东二面:Sychronized的锁升级过程是怎样的

引言 Java作为主流的面向对象编程语言&#xff0c;提供了丰富的并发工具来帮助开发者解决多线程环境下的数据一致性问题。其中&#xff0c;内置的关键字"Synchronized"扮演了至关重要的角色&#xff0c;它能够确保在同一时刻只有一个线程访问特定代码块或方法&#…