如何将前端项目打包并部署到不同服务器环境

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学,可以点心心支持一下哈(笔记是根据b站尚硅谷的前端讲师【张天禹老师】整理的,用于自己复盘,有需要学习的可以去b站学习原版视频)

本教程将详细介绍如何将前端项目进行打包并部署到不同的服务器环境,包括本地服务器、Nginx服务器和云服务器。本教程将详细介绍如何将前端项目进行打包并部署到不同的服务器环境,包括本地服务器、Nginx服务器和云服务器。

一、项目打包

我们开发用的脚手架其实就是一个微型服务器,用于:支撑开发环境、运行代理服务器等。

打包完的文件中不存在:.vue、.jsx、.less等文件,而是:html、css、js等。

打包后的文件,不再借助脚手架运行,而是需要部署到服务器上运行。

打包前,请务必梳理好前端项目的ajax封装(请求前缀、代理规则等)。

打开package.json,执行打包命令(npm run build:prod)

这里我演示的是黑马的一个项目:

账号:13800000002

密码:hm#qd@23!

后端服务器地址:https://heimahr.itheima.net/api

生产环境:http://localhost:9528/prod-api

开发环境:https://localhost:9528/api

二、部署方式

1.本地服务器部署

本次我们使用express框架在本地创建一个服务器

安装express

前提是电脑已经安装了node

新建一个文件夹,执行npm init -y命令,生成package.json,再执行npm add express命令,下载express,成功之后如下图。

每次修改代码时,都要重新启动服务器,比较麻烦,所以提出了热部署(nodemon),安装命令:npm i nodemon -g

最后完整代码如下:

const express = require('express')
const app = express()
const port = 9528// 配置静态资源
app.use(express.static(__dirname + '/public'))app.listen(port, () => {console.log(`本地服务器启动http://localhost:${port}`)
})

执行命令:nodemon .\app.js,浏览器输入http://localhost:9528会出现这个页面:

解决刷新404问题

①打包时更改路由配置,使用hash模式,缺点请求路径不美观有#,不够优雅

②使用node相关的库(connect-history-api-fallback )

官网地址:npm | Home

下载connect-history-api-fallback

npm install --save connect-history-api-fallback

完整代码

const express = require('express')
var history = require('connect-history-api-fallback')const app = express()
app.use(history())
const port = 9528// 配置静态资源
app.use(express.static(__dirname + '/public'))app.listen(port, () => {console.log(`本地服务器启动http://localhost:${port}`)
})

请求无法发送问题

使用node相关的库(http-proxy-middleware )

下载http-proxy-middleware

npm i http-proxy-middleware

完整代码

const express = require('express')
var history = require('connect-history-api-fallback')
const { createProxyMiddleware } = require('http-proxy-middleware')
const app = express()
app.use(history())
const port = 9528// 配置静态资源
app.use(express.static(__dirname + '/public'))
app.use('/prod-api',createProxyMiddleware({target: 'https://heimahr.itheima.net/api',changeOrigin: true,pathRewrite: { '^/prod-api': '' }})
)
app.listen(port, () => {console.log(`本地服务器启动http://localhost:${port}`)
})

2.nginx服务器部署

nginx简介

Nginx由俄罗斯工程师伊戈尔·赛索耶夫(Igor Sysoev)为rambler.ru(俄罗斯访问量第二大的网站)设计开发,是用于 Web 服务、反向代理、内容缓存、负载均衡、媒体流传输等场景的开源软件。自2004年发布以来,凭借开源的力量,Nginx不断完善和成熟。

nginx部署前端项目

找到nginx安装目录,修改配置文件,然后双击启动nginx.exe服务,注意每次修改后都需要重新启动nginx服务

解决刷新404问题

location / {root   E:\dist;index  index.html index.htm;try_files $uri $uri/ /index.html;#解决刷新404}

请求无法发送问题

location /prod-api/ {# 设置代理目标proxy_pass https://heimahr.itheima.net/api/;}

3.云服务器部署

  • 前提要有一个属于自己的云服务器,并下载好liunx系统
  • 本地电脑安装Xftp、Xshell软件

Xftp用于传输文件

Xshell用于编写命令

本地资源上传

将打包好的文件上传到远程服务器,我们这里可以使用Xftp,比较简单

首先打开Xftp,点击新建,然后输入主机地址,点击连接,接着根据提示输入用户(默认是root)、密码,如下图。

连接成功后,如下图,左边是你的本地文件,右边是远程服务器的文件

接下来把你需要上传的文件直接拖入到远程目录下就可以上传。

这里我把我的打包文件放在了/www/server/hr这个目录下,大家可以自己选择(建议不要放在root文件下面,会有权限的问题)

远程服务器下传nginx

使用Xshell软件连接远程服务器,和Xftp类似,点击新建,然后输入主机地址,点击连接,接着根据提示输入用户(默认是root)、密码,如下图。

连接成功后,如下图,接着可以这这里敲命令~

下载nginx

yum install nginx

查看nginx的版本

查看nginx的安装位置

ps -aux|grep nginx

nginx配置

找到nginx目录下的conf/nginx.conf文件,之前在本地怎么配置的,远程也是一样的~

server {listen 8110;server_name 主机ip地址;location / {root   /www/server/hr;index  index.html index.htm;try_files $uri $uri/ /index.html;#解决刷新404}location /prod-api/ {# 设置代理目标proxy_pass https://heimahr.itheima.net/api/;}error_page   500 502 503 504  /50x.html;location = /50x.html {root   html;}}

我这里用的8110端口,因为默认的端口跑了其他的项目,大家如果使用的是默认的80端口,接下的配置可以不用看,直接跳到启动nginx那里~

nginx新增对外开放端口方法

需要添加防火墙对外开放端口

firewall-cmd --list-all 查看开放的端口号

sudo firewall-cmd --add-port=8110/tcp --permanent 开放8110端

重启防火墙firewall-cmd --reload

此时再去通过浏览器访问
注意!!!如果这时还是不能访问就需要去自己的云服务器官网打开相关端口。

这里我以阿里云服务器为例,进入首页后打开控制台,找到服务器实例,点击安全组,如下图。

点击管理规则,在入方向这里进行端口的配置

此时再去通过浏览器访问,就可以正常访问了

启动nginx

service nginx start 

常见命令:

检查nginx配置文件是否正常: nginx -t

重启nginx: nginx -s reload

成功运行截图:

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

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

相关文章

新书推荐:7.3 for语句

本节必须掌握的知识点: 示例二十四 代码分析 汇编解析 7.3.1 示例二十四 ■for语句语法形式: for(表达式1;表达式2;表达式3) { 语句块; } ●语法解析: 第一步:执行表达式1,表达式1初始化循环变量; …

基于PHP的物业管理的设计与实现

第1章 绪论... 1 1.1 研究背景与意义... 1 1.2 国内外发展现状... 2 第2章 关键技术介绍... 3 2.1 PHP语言... 3 2.2 MySQL数据库... 3 2.3 Zend框架... 4 2.4 B/S架构... 4 第3章 系统需求分析... 5 3.1 可行性分析... 5 3.1.1 技术可行性分析... 5 3.1.2 经济可行…

IDEA 2024.1安装与破解

一、下载 官网地址:https://www.jetbrains.com/idea/download/other.html 二、安装 傻瓜式安装即可 三、破解 3.1 破解程序 网站:https://3.jetbra.in/ 3.2 获取激活码 点击*号部分即可复制成功

IOC控制反转

IOC IOC,全称为Inversion of Control(控制反转),是一种设计原则,它反转了传统编程中的控制流程。在传统的编程模式中,组件之间的依赖关系是由组件自身在内部创建和维护的。而在控制反转模式中,这种依赖关系由外部容器(…

【Docker实战】进入四大数据库的命令行模式

上一篇我们讲了docker exec命令,这一次我们使用docker exec命令来进入四大数据库的命令行模式。 我们进行游戏开发或软件开发是离不开四大数据库的,这四大数据库分别是关系型数据库mysql、postgres,nosql数据库redis、mongodb。将它们容器化…

云上聚智——移动云云服务器进行后端的搭建及部署

什么是移动云 移动云是指将移动设备和云计算技术相结合,为移动应用提供强大的计算和存储能力的服务模式。传统的移动应用通常在本地设备上进行计算和存储,而移动云将这些任务转移到云端进行处理。通过移动云,移动设备可以利用云端的高性能计算…

【C++】——入门基础知识超详解

​​​​​​​ 目录 ​编辑 1.C关键字 2. 命名空间 2.1 命名空间定义 2.2 命名空间使用 命名空间的使用有三种方式: 注意事项 3. C输入&输出 示例 1:基本输入输出 示例 2:读取多个值 示例 3:处理字符串输入 示例…

神经网络不确定性综述(Part II)——Uncertainty estimation_Single deterministic methods

相关链接: 神经网络不确定性综述(Part I)——A survey of uncertainty in deep neural networks-CSDN博客 神经网络不确定性综述(Part II)——Uncertainty estimation_Single deterministic methods-CSDN博客 神经网络不确定性综述(Part III)——Uncertainty est…

Docker-Android安卓模拟器本地部署并实现远程开发测试

文章目录 1. 虚拟化环境检查2. Android 模拟器部署3. Ubuntu安装Cpolar4. 配置公网地址5. 远程访问小结 6. 固定Cpolar公网地址7. 固定地址访问 本文主要介绍如何在Ubuntu系统使用Docker部署docker-android安卓模拟器,并结合cpolar内网穿透工具实现公网远程访问本地…

用常识滚雪球:拼多多的内生价值,九年的变与不变

2024年5月22日,拼多多公布了今年一季度财报,该季度拼多多集团营收868.1亿元,同比增长131%,利润306.0亿,同比增长了202%,数据亮眼。 市场对拼多多经历了“看不见”、“看不懂”、“跟不上”三个阶段。拼多多…

STM32无源蜂鸣器播放音乐

开发板:野火霸天虎V2 单片机:STM32F407ZGT6 开发软件:MDKSTM32CubeMX 文章目录 前言一、找一篇音乐的简谱二、确定音调三、确定节拍四、使用STM32CubeMX生成初始化代码五、代码分析 前言 本实验使用的是低电平触发的无源蜂鸣器 无源蜂鸣器是…

【数据库】通过一个实例来认识数据流图DFD

导读:通过一个实例(数据中台)说明数据流图DFD的作用、介绍了常见的数据流图元素及其标准符号以及如何画数据流图。数据流图主要被分析师、系统设计师、流程优化专家、系统管理员以及与系统开发和维护相关的人员查看和使用。对于刚考完2024年5…

设计模式 18 迭代器模式 Iterator Pattern

设计模式 18 迭代器模式 Iterator Pattern 1.定义 迭代器模式 (Iterator Pattern) 是一种行为型设计模式,它提供了一种访问集合元素的标准方法,而无需暴露集合的内部表示。 提供一种方法顺序访问一个聚合对象中的各个元素,而又不需要暴露该…

B树与B+树区别

B树和B树是常见的数据库索引结构,都具有相较于二叉树层级较少,查找效率高的特点,它们之间有以下几个主要区别: 1.节点存储数据的方式不同 B树的叶子结点和非叶子节点都会存储数据,指针和数据共同保存在同一节点中B树…

vue 引入 emoji 表情包

vue 引入 emoji 表情包 一、安装二、组件内使用 一、安装 npm install --save emoji-mart-vue二、组件内使用 import { Picker } from "emoji-mart-vue"; //引入组件<picker :include"[people,Smileys]" :showSearch"false" :showPreview&q…

YAML详情

一、kubernetes支持对象 Kubernetes支持YAML和JSON格式管理资源对象 JSON格式&#xff1a;主要用于api接口之间消息的传递YAML格式&#xff1a;用于配置和管理&#xff0c;YAML是一种简洁的非标记性语言&#xff0c;内容格式人性化&#xff0c;较易读 二、YAML语法格式注意点 …

微信小程序开发 tabbar组件常见问题

一、 tabbar不显示问题 问题 刚开始我在app.json中配置了下面的代码&#xff0c;但tabbar并没有显示。代码如下&#xff1a; "tabBar": {"custom": true,"color": "#7A7E83","selectedColor": "#3cc51f","…

C++ | Leetcode C++题解之第113题路径总和II

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<vector<int>> ret;unordered_map<TreeNode*, TreeNode*> parent;void getPath(TreeNode* node) {vector<int> tmp;while (node ! nullptr) {tmp.emplace_back(node->val);node …

单点登录与JWT

JWT:JSON Web Token JWT的作用是用户授权&#xff08;Authorization&#xff09;,而不是用户的身份认证&#xff08;Authentication&#xff09; 授权&#xff08;Authorization&#xff09;vs认证&#xff08;Authentication&#xff09; 用户认证指的是使用用户名、密码来…

pytest:指定测试用例执行顺序

在自动化测试中&#xff0c;测试用例的执行顺序有时对测试结果具有重要影响。本文将介绍如何在pytest框架中使用pytest-ordering插件以及Collection hooks来控制测试用例的执行顺序。 方式1&#xff1a; 使用pytest-ordering插件控制执行顺序 1.1 安装pytest-ordering插件 首…