利用nginx简单部署前端项目

最新推荐文章于 2024-04-19 14:39:01 发布
最新推荐文章于 2024-04-19 14:39:01 发布
阅读量769 收藏
点赞数 1
分类专栏： 前端开发 文章标签： nginx linux vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uncle_huang/article/details/117563238
版权

情况描述：前端项目是vue项目，把项目打包后部署到服务器上，服务器是linux系统。
需要用到的软件：Xshell，Xftp
适用对象：前端小白（大佬们就不要看了，写得一般般，羞羞）
首先本地用Xshell连接服务器
打开Xshell，点击文件-》新建
在这里插入图片描述
填写名称、主机和端口号。
在这里插入图片描述
点击用户身份验证，方法默认password，填写用户名和密码，点击确定。
在这里插入图片描述
连接后，查看服务器有没有安装nginx，输入

find /
了解本专栏 订阅专栏 解锁全文 超级会员免费看
uncle_Huang
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
使用nginx部署前端项目（超详细教程）.pdf
04-29
【使用Nginx部署前端项目】的教程是一个详尽的指南，主要面向初学者，旨在教会读者如何利用Nginx高效地部署前端应用。Nginx是一个高性能的Web服务器和反向代理，因其高并发处理能力和低内存占用而受到广泛青睐。 ...
nginx发布前端静态文件配置
02-17
对于多台前端服务器的情况，可以利用Nginx的反向代理功能实现负载均衡。这需要在server块内添加upstream块，然后在location块中设置proxy_pass。 以上就是关于Nginx发布前端静态文件的基本配置。理解并熟练掌握...
nginx: 部署前端项目的详细步骤（vue项目build打包+nginx部署）
qq_45796592的博客
09-26 1万+
nginx部署前端项目的详细步骤
nginx部署前端项目的详细步骤
热门推荐
铁锤妹妹的博客
10-24 2万+
在前端开发过程中经常是需要把前端静态资源放到服务器中看效果，这时经常用到nginx来配置。
用Nginx部署前端项目
最新发布
qq_69503426的博客
04-19 947
然后将压缩包上传至虚拟机（需要下载Xsell和Xftp，Xsell-输入命令，Xftp-上传文件到虚拟机）点击i进行编辑，修改路径为dist在虚拟机上所在的位置，修改完成后按ECS,输入:wq即可退出（然后再依次输入以下命令（出现截图中的情况，则部署成功）需要上面两个安装包可以私信我，也可以通过其他途径下载。在浏览器中输入虚拟机端口号出现以下页面，则部署成功。（需要将第一个红色画框的内容全部“杀掉”才可以）:wq保存修改并退出，:q!以上运行内容过多，就不展示运行结果了。（出现以下内容，则还不可以）
使用nginx部署前端项目（超详细教程）
IT小辉同学
04-29 1万+
愿我们的付出都值得
前端ngnix部署
qq_44436509的博客
03-21 4703
worker进程的数量events {# 事件区块开始# 每个worker进程支持的最大连接数 } # 事件区块结束http {# HTTP区块开始# Nginx支持的媒体类型库文件# 默认的媒体类型# 开启高效传输模式# 连接超时server {# 第一个Server区块开始，表示一个独立的虚拟主机站点listen 80；# 提供服务的端口，默认 80 server_name localhost；# 提供服务的域名主机名# 第一个location区块开始root html。
使用nginx部署前端项目
lianaozhe的博客
11-25 5426
使用FileZilla或者其他工具上传前端项目到nginx的html目录。浏览器访问：http://43.139.56.13/czczz-admin。浏览器访问：http://localhost/czczz-admin。将我们要执行的项目同样放到nginx下html目录下。可以看到，成功访问到前端页面并且调用了后端的接口。这样，一个简单去前后端分离项目就部署完毕了！-p: 将容器的 端口映射到主机的端口。–name: 启动容器的名字。可以看到，访问成功了。在浏览器访问主机ip。nginx安装成功。
快速掌握Nginx部署前端项目（从Nginx安装配置及部署都非常详细哦！）
m0_67477525的博客
10-28 1万+
之前在Linux系统中部署了后端项目，今天继续来给大家分享如何部署前端项目。涉及到了Nginx的简单介绍以及Nginx如何安装及配置并且能够部署前端项目Nginx是一个轻量级的反向代理web服务器，在当今应用地非常广泛，特别是前后端分离的情况下。
nginx 代理发布前端程序
04-07
总之，利用Nginx代理发布前端程序可以带来诸多优势，包括更快的响应速度、更好的安全性和易于扩展的架构。正确配置和使用Nginx是运维工作中的重要技能，对于提升Web服务的整体性能和用户体验具有积极影响。
Vue-cli项目部署到Nginx服务器的方法
10-16
- 利用 Nginx 的反向代理功能，可以隐藏后端服务的端口，简化前端的请求配置。 以上内容详细介绍了 Vue CLI 项目如何部署到 Nginx 服务器，包括单项目部署、多项目部署以及端口代理的配置方法。希望对开发者在实际...
项目打包运行dist以及nginx配置
04-11
通过打包工具将开发项目转化为生产就绪的"dist"目录，然后利用Nginx的强大功能进行高效地请求处理和静态资源分发，可以确保应用的稳定性和高性能。在实际操作中，不断学习和熟练掌握这些技能，对于提升IT专业人士的...
前端开发者必备：Nginx部署前端项目，让你的Web应用快速、稳定、安全地运行
失忆老幺
04-04 8578
Nginx部署前端项目
Nginx基本使用以及部署前端项目
m0_52043522的博客
05-16 1万+
Nginx的基本使用、nginx.conf配置文件、负载均衡、部署前端项目。
使用 Nginx部署前端项目
blue_121的博客
05-23 2880
windows系统右键我们下方任务栏的黑色部分，打开任务管理器，看下nginx是否启动。，这是一个非常重要的文件，用来配置nginx服务器，默认的配置也存放在此。以windows版为例，下载后，将其解压到 本地的任一目录下；，把解压的文件放在里面，此时我们可以看到有如下目录。然后用vscode代码编辑器打开解压文件夹下的。
nginx部署前端项目
抽象的螺旋
05-11 1645
这里简单记录一下自己部署前端项目的过程。
Nginx纯前端服务器部署
有朋自远方来，不亦乐乎。
11-12 3973
DNSPod并入腾讯云，腾讯云域名解析是在DNS解析DNSPod控制台操作的，腾讯云百科来详细详细说下腾讯云域名解析教程：腾讯云域名解析教程DNSPod帝思普并入腾讯云，腾讯云域名解析是由DNSPod提供的。用于在数据传输时对计算机的定位标识，由于IP地址具有不方便记忆并且不能显示地址组织的名称和性质等缺点，人们设计出了域名，并通过网域名称系统（DNS，Domain Name System）来将域名和IP地址相互映射，使人更方便地访问互联网，而不用去记住能够被机器直接读取的IP地址数串。
在nginx中部署前端项目
JAVA_codemaster的博客
02-24 1023
通过以上步骤，就可以将前端应用部署到 Nginx 服务器上。这不仅可以提高应用的访问速度，还可以利用 Nginx 提供的各种功能，如缓存、负载均衡和安全增强等，来进一步优化你的应用。
【nginx】在本地部署前端项目:
SunPeng的博客
02-07 3357
【nginx】在本地部署前端项目:
nginx部署前端项目工具
07-28
- *1* [Docker利用Nginx部署前端项目](https://blog.csdn.net/guo0208/article/details/127550442)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

uncle_Huang

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值