Linux服务器nginx部署Vue前端(详细版)

提示:适用于前后端项目的部署

文章目录

  • 前言
  • 一、打包前端文件
  • 二、下载和部署Nginx
  • 三、配置conf文件
  • 启动nginx


前言

搜索到这篇文章想必你已经对Nginx比较了解,我也不对Nginx进行介绍赘述了,只需要明白Nginx本身也是一个静态资源的服务器,当只有静态资源的时候,就可以使用Nginx来做服务器。下面我将直接介绍如何在Nginx部署前端文件的整个流程。


一、打包前端文件

打包前端文件,打开前端包管理器,使用

npm run build 

打包该项目,打包完成可以发现项目中多了个dist文件夹

二、下载和部署Nginx

这一步可以参考我之前写的点击这里

三、配置conf文件

这一步是重中之重,打开winscp,当然你有更好的也行(只要支持SSH的SFTP文件传输),人话就是能够支持文件上传服务器或编辑服务器文件内容,打开nginx目录下的conf文件夹找到,nginx.conf文件,双击打开。

server {listen       80;#nginx监听端口server_name  localhost;#指定了本机的域名或主机名location / {root   /home/dist/;#前端应用程序的根目录index  index.html;}

在原有基础上http { } 内容中加入上述内容。注意这些都要一 一对应,举个例子需求是在190.21.3.1服务器40端口部署前端,前端文件放在home文件下

server {listen       40;#nginx监听端口server_name  190.21.3.1;#指定了本机的域名或主机名location / {root   /home/dist/;#前端应用程序的根目录index  index.html;}

注意把前端打包后的dist放到root中路径指定文件夹下。

启动nginx

/usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

启动nginx即可,如果nginx已经启动可参考我上面的文章,先关闭再启动,或直接使用重启指令即可。
在这里插入图片描述

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

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

相关文章

23种设计模式【创建型模式】详细介绍之【原型模式】

23种设计模式【创建型模式】详细介绍之【原型模式】 设计模式的分类和应用场景总结原型模式设计模式系列:深入理解原型模式(Prototype Pattern)什么是原型模式?为什么使用原型模式?原型模式的实现方式原型模式的代码示…

Python Opencv实践 - 手部跟踪

使用mediapipe库做手部的实时跟踪,关于mediapipe的介绍,请自行百度。 mediapipe做手部检测的资料,可以参考这里: MediaPipe Hands: On-device Real-time Hand Tracking 论文阅读笔记 - 知乎论文地址: https://arxiv.org/abs/2006…

Echarts自定义样式实现3D柱状图-长方体-圆柱体,两种样式

Echarts自定义样式实现3D柱状图-长方体-圆柱体&#xff0c;两种样式 效果图代码series配置项目 效果图 长方体 柱状体 代码 <!--此示例下载自 https://echarts.apache.org/examples/zh/editor.html?cbar3d-dataset&gl1 --> <!DOCTYPE html> <html lang…

解决ESP8266无法退出透传问题以及获取网络时间以及天气方法

网上很多配置ESP8266的教程&#xff0c;但是遇到无法退出透传模式的情况却没有找得到答案&#xff0c;不知道是大家都没遇到还是怎么样&#xff0c;以下是我的解决方法&#xff1a;实测有效 先发送“”&#xff08;三个加号&#xff09;&#xff08;如果是在串口调试助手调试&…

做一个wiki页面是体验HTML语义的好方法

HTML语义&#xff1a;如何运用语义类标签来呈现Wiki网页 在上一篇文章中&#xff0c;我花了大量的篇幅和你解释了正确使用语义类标签的好处和一些场景。那么&#xff0c;哪些场景适合用到语义类标签呢&#xff0c;又如何运用语义类标签呢&#xff1f; 不知道你还记不记得在大…

LVS负载均衡器(DR模式)+nginx七层代理+tomcat多实例+php+mysql 实现负载均衡以及动静分离、数据库的调用!!!

目录 前言 一、nfs共享存储&#xff0c;为两个节点服务器提供静态网页共享 二、nginx作为lvs的后端节点服务器&#xff0c;完成lo:0网卡配置&#xff0c;以及内核参数设置&#xff0c;还有设置路由表 步骤一&#xff1a;先完成nfs共享存储挂载 步骤二&#xff1a;完成lo:0网…

easyexcel常见注解

easyexcel常见注解 一、依赖 <!--阿里巴巴EasyExcel依赖--><dependency><groupId>com.alibaba</groupId><artifactId>easyexcel</artifactId><version>2.2.10</version></dependency>二、常见注解 ExcelProperty 注解中…

漏洞复现-log4j2原理分析及CVE-2021-44228

log4j2原理分析及漏洞复现 0x01 log4j2简介 Log4j2 是一个用于 Java 应用程序的成熟且功能强大的日志记录框架。它是 Log4j 的升级版本&#xff0c;相比于 Log4j&#xff0c;Log4j2 在性能、可靠性和灵活性方面都有显著的改进。 Log4j2 特点 高性能&#xff1a;Log4j2 使用异步…

TensorRT 简单介绍

一、TensorRT 对于算法工程师来说&#xff0c;相信大家已经对TensorRT耳熟能详了&#xff0c;那么这个TensorRT是什么呢&#xff1f; 其实&#xff0c;TensorRT是一个可以在NVIDIA各种GPU硬件平台下运行的推理引擎&#xff0c;同时也是一个高性能的深度学习推理优化器&#x…

你知道跨站脚本攻击吗?一篇带你了解什么叫做XSS

1.XSS简介 &#xff08;1&#xff09;XSS简介 XSS作为OWASP TOP 10之一。 XSS中文叫做跨站脚本攻击&#xff08;Cross-site scripting&#xff09;&#xff0c;本名应该缩写为CSS&#xff0c;但是由于CSS&#xff08;Cascading Style Sheets&#xff0c;层叠样式脚本&#x…

css 美化滚动条

当div内容溢出容器定义的高度时,滚动条显示,并美化默认的滚动条样式 div 容器 <divclass"content">内容 </div>css 样式 /* 问话区域 滚动条 */ .content {overflow: auto;height: 662px;padding: 25px;scrollbar-width: thin; /* 设置滚动条宽度 */bo…

25.JSP标准标签库

JSTL概述 JSTL 全名为 JavaServer Pages Standard TagLibrary,即jsp标准标签库。JSTL 是由 JCP &#xff08;Java Community Process&#xff09;所指定的标准规格&#xff0c;它主要提供给 Java Web 开发人员一个标准通用的标签函数库。 Web 程序开发人员能够利用 J STL 和 E…

rouyi-vue-pro+vue3+vite4+Element Plus项目中使用生成Vue2+Element UI标准模板

运行一个pro-vue3的前端项目&#xff0c;以及后端服务 在基础设施-代码生成模块中选择某张数据库表导入&#xff0c;并编辑生成信息&#xff0c;前端类型&#xff1a;Vue2Element UI标准模板 在vue3项目中创建一个vue文件 <template> </template><script>…

如何进一步优化Ubuntu服务器的性能

导读&#xff1a; 要进一步优化Ubuntu服务器的性能&#xff0c;您可以考虑以下几个方面&#xff1a;优化软件包管理&#xff1a; Ubuntu使用APT&#xff08;Advanced Package Tool&#xff09;作为其软件包管理工具。为了提高性能&#xff0c;您可以采取以下措施 要进一步优化U…

教师教育研究的意义有哪些

教师教育研究对于提高教育质量、推动教育改革的重要性。也有许多网友对教师教育研究的意义进行了深入探讨。 一、提高教师专业素养 教师是教育的核心力量&#xff0c;教师的专业素养直接影响到教育质量。教师教育研究通过对教育理论、教学方法、教育技术等方面的研究&#xff…

数据分析:继loopy、卡皮巴拉后,小红书下个可爱“顶流”是?

导语 温柔胆小又爱哭的吉伊、乐观开朗会说人话的哈奇&#xff0c;还有自由奔放整天发癫的兔子乌萨奇&#xff0c;三只小可爱共同组成了《吉伊卡哇》&#xff08;ちいかわ&#xff0c;Chiikawa&#xff09;的主角三人组&#xff0c;持续引领当代年轻人的社交话题。 据千瓜数据…

网络编程day5

作业 1> 使用select完成TCP客户端程序 //client #include<myhead.h> #define CLINET_IP "192.168.125.79" #define CLINET_PORT 9999 #define SERVE_IP "192.168.125.79" #define SERVE_PORT 8888 int main(int argc, const char *argv[]) {/…

类和对象(中篇)

类的六个默认成员函数 如果一个类中什么成员都没有&#xff0c;简称为空类。 空类中真的什么都没有吗&#xff1f;并不是&#xff0c;任何类在什么都不写时&#xff0c;编译器会自动生成以下6个默认成员函数。 默认成员函数&#xff1a; 用户没有显式实现&#xff0c;编译器会…

网易面试:亿级用户,如何做微服务底层架构?

尼恩说在前面 在40岁老架构师 尼恩的读者交流群(50)中&#xff0c;最近有小伙伴拿到了一线互联网企业网易、美团、字节、如阿里、滴滴、极兔、有赞、希音、百度、美团的面试资格&#xff0c;遇到很多很重要的面试题&#xff1a; 微服务改造&#xff0c;你是怎么做的&#xff1…

【PIE-Engine 数据资源】全球2.5分分辨率累积降水量数据集

文章目录 一、 简介二、描述三、波段四、示例代码参考资料 一、 简介 数据名称全球2.5分分辨率累积降水量数据集时间范围1961年- 2018年空间范围全球数据来源worldclim代码片段var images pie.lmageCollection(WORLDCLIME/GLOBAL_PREC_MONTH") 二、描述 全球2.5分分率果…