在 Nginx 上部署项目

【Nginx 】Nginx 部署前端 vue 项目 在两种系统中,安装Nginx的过程都相对简单,主要区别在于使用的软件包管理器不同。这包括访问Vue应用的主页,以及尝试访问应用中的各个路由,确保它们都能正确加载。文件中列出的依赖项进行下载和安装,这个过程通常需要联网操作,并且依赖于npm仓库的响应速度。在网络状况良好的情况下,安装过程可以顺利完成。在CentOS或RHEL系统上安装Nginx的过程与Ubuntu/Debian略有不同,主要体现在软件包管理器的使用上。在项目部署之前,确保开发环境中已安装Node.js和npm,这是运行Vue项目的基础。 阅读详情

购买服务器,设置安全组,开放默认端口,这样才能访问服务器。
配置nginx,nginx用于反向代理,a.访问地址可以找到前端项目;b.让前端项目部署的服务器可以向后端服务器发送请求得到数据。

1. 构建 Vue 项目

npm run build

2. 安装 Nginx

在 Ubuntu 上安装 Nginx

sudo apt update
sudo apt install nginx

在 CentOS 上安装 Nginx

sudo yum install epel-release
sudo yum install nginx

3. 配置 Nginx

打开 Nginx 配置文件进行编辑。配置文件通常位于 /etc/nginx/nginx.conf
编辑文件 vim nginx.conf-----按 i 键进入插入模式,主要添加如下两项(一定要加分号):

解决a.:
      location / {                        // 这里的 / 是指访问的/根目录
        root   /root/jyh/dist;    // dist存放文件
        index index.html;
        try_files $uri/ /index.html;
      }

解决b.:
      location /api {
        proxy_pass "http://39.98.123.211";   // 后端服务器地址
      }

esc–:wq 保存文件

a. 一个server对应一个vue项目
b. listen:表示监听服务器上的哪个端口,就是说请求只有发送到nginx上的这个端口号,这个请求才可以被nginx所监听、接收到
c. server name:就是当前服务器的ip(就是现在nginx安装的服务器的ip),也可以是域名

4.运行nginx服务器

sudo systemctl restart nginx      
怎么用nginx部署多个前端项目 nginx部署多个前端项目流程 阅读详情

相关推荐

使用 Nginx 部署 Python 项目

今天的目标是完成一个 Python Web 项目的线上部署,我们使用最新的 Django 项目搭建一个简易的 Web 工程,然后基于 Nginx 服务部署该 Python Web 项目。

weixin_51705943的博客 2298

nginx项目部署教程

当我们的项目开发完毕后,我们需要将项目打包、部署到服务器上,供用户来使用。目前,常见的部署方式有两种:后端部署前后端分离部署。

厚积薄发. 5547

《Nginx怎么部署vue项目》

打开cmd,输入重启命令:nginx -s reload (若配置文件没做修改可忽略这一步)好了,以上就是《Nginx部署vue项目》的全部内容,关注我看更多有意思的文章哦!完成上一步后,打开我们的配置文件,找到节点,修改参数。另外,多版本的nginx可以共存,只要设置web端口不一样就可以同时使用。到前端项目目录下,找到文件夹。复制下的文件,粘贴至nginx根目录下的。在vue代码目录下运行命令:npm run build。conf目录下有默认配置文件nginx.conf。

GoppViper的博客 2085

nginx部署项目

Nginx入门指南轻量级的 HTTP 服务器

weixin_38090079的博客 1013

matlab内读取文件目录时斜杠和反斜杠的使用

@matlab内读取文件目录时斜杠和反斜杠的使用TOC matlab内读取文件目录时,斜杠和反斜杠的使用 最近被斜杠和反斜杠弄晕了,于是总结了一下,在此和大家分享一下。 代码 clear; clc; close all; I1= imread('..\zs1.jpg'); %和代码文件夹同目录的图片 (纯反斜杠) I2= imread('../zs2/zs2.j...

weixin_44456694的博客 6575

嵌入式系统存储体系

主要分为三种:高速缓存(cache)、主存和外存。

weixin_43586667的博客 2265

nginx部署前端项目的详细步骤

在前端开发过程中经常是需要把前端静态资源放到服务器中看效果,这时经常用到nginx来配置。

铁锤妹妹的博客 2万+

深度学习、图像分类入门,从VGG16卷积神经网络开始

刚开始接触深度学习、卷积神经网络的时候非常懵逼,不知道从何入手,我觉得应该有一个进阶的过程,也就是说,理应有一些基本概念作为奠基石,让你有底气去完全理解一个庞大的卷积神经网络: 本文思路: 一、我认为学习卷积神经网络必须知道的几个概念: 1、卷积过程:   我们经常说卷积神经网络卷积神经网络,到底什么才是卷积?网络层卷积过程到底怎么实现?我们在这里借鉴了另一位博客大牛的动态图来给大

Errors_In_Life的博客 16万+

Nginx基本使用以及部署前端项目

Nginx的基本使用、nginx.conf配置文件、负载均衡、部署前端项目。

m0_52043522的博客 2万+

Photoshop实战技巧(9)——高效去除复杂水印的五种进阶方法

本文详细介绍了Photoshop中高效去除复杂水印的五种进阶方法,包括色阶通道爆破法、频率分离高阶应用、智能填充+手动修复组合拳等专业技巧。针对半透明水印、密集文字水印等复杂场景,提供分步操作指南和实战案例,帮助用户精准去除水印同时保留原始图像细节,大幅提升工作效率。

cake8的博客 961

无监督低照度增强实战:用ZeroDCE和SCI拯救你的夜间照片(附PyTorch代码)

本文深入探讨了无监督低照度图像增强技术,重点解析了ZeroDCE和SCI两大代表性模型的核心原理与实战应用。通过对比分析两者的技术路径、网络结构及性能特点,并附上详细的PyTorch代码实现,旨在帮助读者掌握无需配对数据即可有效提升夜间照片画质的深度学习解决方案。

git9versioner的博客 490

nginx 部署前端vue项目

Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡。优点支持海量高并发:采用IO多路复用epoll。官方测试Nginx能够支持5万并发链接,实际生产环境中可以支撑2-4万并发连接数。内存消耗少可商业化配置文件简单 除了这些优点还有很多,比如反向代理功能,灰度发布,负载均衡功能等。

我哎GIS博客 3万+

告别反复刷写:用英飞凌XCP Overlay功能实现ECU标定与诊断的‘热更新’

本文详细介绍了英飞凌XCP Overlay功能在ECU标定与诊断中的应用,实现参数的'热更新',避免反复刷写Flash。通过地址重映射技术,将标定变量从Flash重定向到RAM,显著提升工作效率并保护Flash寿命。文章涵盖技术原理、工程实践、功能安全考量及高级应用场景,为汽车电子工程师提供完整解决方案。

weixin_30689307的博客 529

vue项目部署到nginx

最近产品做了一半,要求将前端的代码部署到服务器,以前没有部署过,这可咋办呀~~。现在部署好了,给大家总结以下,里面还是有很多坑的

weixin_42565137的博客 6万+

别白忙活!EAAI投稿避坑指南:5条红线碰就拒,工程应用重点划重点

EAAI投稿避坑指南:5条红线与工程应用要点 投稿《Engineering Applications of Artificial Intelligence》(EAAI)需特别注意5条红线,否则直接拒稿:1)避免提出新隐喻元启发式算法,应聚焦具体工程应用;2)摘要须明确区分AI贡献与工程应用;3)标题和摘要禁止使用未定义缩写;4)必须采用单栏格式;5)关键词不能包含缩写。此外,论文需突出AI方法在工程实践中的创新与落地价值,建议补充实际工程数据、部署成本分析和与传统方法的对比。投稿前务必逐项核查这5条要求,以

ZhangJiqun&191cm&85kg 3216

9.16华为OD机试真题 新系统 - 统计特殊数字 (Java/Py/C/C++/Js/Go)

9.16华为OD机试真题 新系统 - 统计特殊数字 (Java/Py/C/C++/Js/Go)

算法大师! 764

Nginx部署vue项目

如果说服务器有了,nginx没安装?

码界云仓 2134

锂电池充电器电路设计 里面有电路

锂电池充电器电路设计 里面有电路 3.7V升压到5V电路设计。

Nginx 部署前端 Vue 项目实战指南

在执行此命令之前,需要确保路由配置中的模式正确。修改完成后,保存配置文件,并在命令行中执行相应命令重启 Nginx 服务。您可以从 Nginx 官方网站下载安装包,然后按照安装向导进行安装。,回车,即可启动 Nginx 服务。可以在任务管理器的进程中看到启动的 Nginx 服务。从 Nginx 官方网站下载安装包,按照安装向导进行安装。另外,还需要对项目中的一些配置文件进行修改,比如在。要修改 Nginx 的配置文件,例如修改端口,可在。指令,将默认的 80 端口修改为您想要的端口,如。

四楼没电梯的专栏 3251

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

如何将Vue项目部署至 nginx

如何将Vue项目部署至 nginx

weixin_64178283的博客 2863

IMSL CNL 7.0.0 (x86-64)Crack

IMSL CNL 7.0.0 (x86-64)Crack intel的算法库破解文件,这是C++版本的破解文件

nginx 部署_nginx部署h5项目

1. nginx部署h5项目此为windows部署,liunx也类似的1.1. 前言部署h5项目还是很简单的,不过对小白来讲一开始可能也是一脸懵逼,这个简单教程针对的是从未部署过前后端分离前端项目的小白1.2. 步骤1.2.1. 下载nginx如下图目录1.2.2. 放入经过编译的h5项目把经过编译的h5项目放入html文件夹下,可以在html里面创建一个单独文件夹,把内容放进去如下图1.2.3....

weixin_39850920的博客 1962

nginx部署前端项目详细教程

本文主要讲述了使用nginx打包部署前端项目的整套流程。

太阳与星辰的博客 1万+

nginx部署前端vue项目

Nginx(发音为“engine-x”)是一个高性能的HTTP和反向代理服务器,同时也提供了IMAP/POP3/SMTP代理服务器的功能。由俄罗斯程序员Igor Sysoev开发,并于2004年首次公开发布。Nginx以其高稳定性、丰富的功能集、简单的配置和低资源消耗而闻名。高性能:Nginx能够处理大量的并发连接和请求,而不会显著增加系统资源的使用。高可靠性:Nginx的设计注重稳定性,即使在高负载下也能保持稳定运行。模块化:Nginx具有高度模块化的设计,允许通过安装额外的模块来扩展其功能。

Python老吕的博客 4585
上一篇: Vue Router哈希模式和历史模式
下一篇: css实现磨砂效果(filter 与 backdrop-filter 的对比分析)
Frilled Lizard
博客等级 码龄7年 298粉丝 124原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值