利用nginx简单部署前端项目

最新推荐文章于 2025-04-02 16:33:41 发布
最新推荐文章于 2025-04-02 16:33:41 发布
阅读量1.8k 收藏
点赞数 1
分类专栏： 前端开发 文章标签： nginx linux vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uncle_Huang/article/details/117563238
版权
本文是针对前端新手的Vue项目部署指南，详细介绍了如何在Linux服务器上利用nginx部署前端应用。首先通过Xshell连接服务器，检查nginx是否已安装；接着使用Xftp传输配置文件并编辑nginx.conf，修改root路径并将打包后的Vue项目上传；最后启动或重启nginx，通过浏览器访问项目。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

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

find /
了解本专栏 订阅专栏 解锁全文 超级会员免费看
【前端 22】使用Nginx部署前端项目
delepaste的博客
08-03 1507
在前端开发中，将项目打包并部署到服务器上是一个常见的需求。下面，我将详细介绍如何使用Nginx部署一个前端项目，并展开讲解Nginx的目录结构以及如何处理端口占用问题。文件部署到Nginx之前，了解Nginx的目录结构是非常有帮助的。通过这些步骤，你可以轻松地将前端项目打包并部署到Nginx服务器上，同时处理可能遇到的端口占用问题。目录会包含所有构建后的文件，这些文件是浏览器可以直接访问的静态资源。等）将项目打包成静态文件，并输出到指定的目录，通常是。（或你设置的任何其他端口）来访问你的前端项目了。
nginx部署前端教程
niulinbiao的博客
04-07 3301
一般来说现在的软件项目，都是分用户端以及管理端的，并且是前后端分离的，这里我来记录一下部署两个前端的教程。部署前端之前需要的准备工作是部署springBoot后端程序，这里我来对后端程序进行部署docker compose部署springboot+redis+mysql这里我的后端接口地址为centos安装nginx准备还以上的工具就可以继续往下走了。
【超详细】前后端项目部署(原始Nginx+SpringBoot)
Delinquencykee的博客
06-20 6522
前后端项目部署（原始Nginx+SpringBoot）
Nginx部署前端包文档
最新发布
zlc555的博客
04-02 502
本文档旨在指导如何将前端资源包部署到Nginx上，确保前端应用能够正常在Nginx运行。以下是部署前端资源包到Nginx的详细步骤。
【Nginx 】Nginx 部署前端 vue 项目
热门推荐
衍生星球的博客
09-06 1万+
在项目部署之前，确保开发环境中已安装Node.js和npm，这是运行Vue项目的基础。通过执行命令，可以安装项目所需的所有依赖。这一步是打包流程的前提，确保了后续编译的顺利进行。根据npm的官方数据，命令在安装依赖时，会根据文件中列出的依赖项进行下载和安装，这个过程通常需要联网操作，并且依赖于npm仓库的响应速度。在网络状况良好的情况下，安装过程可以顺利完成。
前端项目部署在 Nginx 中自定义配置文件和项目路径详解
cuijiying的博客
03-20 1733
讲解如何将你的前端项目部署在 Nginx 中，并且自定义 Nginx 配置文件和前端项目路径的位置。首先，确保你的服务器上已经安装了 Nginx。如果需要 HTTPS，需要配置 SSL 证书并修改配置文件，这可以参考 Nginx 官方文档或后续教程。安装完成后，可以通过浏览器输入服务器的 IP 地址，检查是否看到 Nginx 的默认欢迎页面。Nginx 需要知道你的自定义配置文件位置，因此需要修改主配置文件。
使用nginx部署前端项目
lianaozhe的博客
11-25 5839
使用FileZilla或者其他工具上传前端项目到nginx的html目录。浏览器访问：http://43.139.56.13/czczz-admin。浏览器访问：http://localhost/czczz-admin。将我们要执行的项目同样放到nginx下html目录下。可以看到，成功访问到前端页面并且调用了后端的接口。这样，一个简单去前后端分离项目就部署完毕了！-p: 将容器的 端口映射到主机的端口。–name: 启动容器的名字。可以看到，访问成功了。在浏览器访问主机ip。nginx安装成功。
用Nginx部署前端项目
qq_69503426的博客
04-19 1538
然后将压缩包上传至虚拟机（需要下载Xsell和Xftp，Xsell-输入命令，Xftp-上传文件到虚拟机）点击i进行编辑，修改路径为dist在虚拟机上所在的位置，修改完成后按ECS,输入:wq即可退出（然后再依次输入以下命令（出现截图中的情况，则部署成功）需要上面两个安装包可以私信我，也可以通过其他途径下载。在浏览器中输入虚拟机端口号出现以下页面，则部署成功。（需要将第一个红色画框的内容全部“杀掉”才可以）:wq保存修改并退出，:q!以上运行内容过多，就不展示运行结果了。（出现以下内容，则还不可以）
nginx 部署前端项目
Amazing66的博客
12-27 1万+
1、首先将前端项目打包放在服务器上 2、修改nginx 配置文件
使用 Nginx部署前端项目
blue_121的博客
05-23 3183
windows系统右键我们下方任务栏的黑色部分，打开任务管理器，看下nginx是否启动。，这是一个非常重要的文件，用来配置nginx服务器，默认的配置也存放在此。以windows版为例，下载后，将其解压到 本地的任一目录下；，把解压的文件放在里面，此时我们可以看到有如下目录。然后用vscode代码编辑器打开解压文件夹下的。
Nginx部署前端项目
吹灭读书灯 一身都是月的博客
05-21 8776
首先当然是检查Nginx： 查看nginx的安装路径：whereis nginx nginx: /usr/local/nginx nginx常用命令： cd /usr/local/nginx/sbin ./nginx ./nginx -s stop ./nginx -s quit 安全退出 ./nginx -s reload 重新加载配置文件 ps aux | grep nginx nginx展示图片： location /images { root /us
使用nginx部署前端项目（超详细教程）.pdf
04-29
【使用Nginx部署前端项目】的教程是一个详尽的指南，主要面向初学者，旨在教会读者如何利用Nginx高效地部署前端应用。Nginx是一个高性能的Web服务器和反向代理，因其高并发处理能力和低内存占用而受到广泛青睐。 ...
web服务器nginx+部署前端vue项目
03-22
#### 三、部署前端 Vue 项目至 Nginx 假设我们需要将一个基于 Vue.js 的前端项目部署到 Nginx 上，下面是一些基本的步骤： 1. **准备环境**： - 安装 Nginx。确保你的系统上已经安装了 Nginx 服务器。 - 准备好...
Docker利用Nginx部署前端项目
尽我所能，分享开发问题的解决方式
10-27 7452
Dockerfile左侧的dist文件夹就是你前端项目存放的文件夹、nginx.conf.template文件中设置了首页跳转index等，使用时记得改成自己所需的；注：如果是linux系统，先找个位置创建文件夹，然后利用可视化窗口将三个文件全部拉到刚刚创建的文件夹下即可。--p：端口号，左侧为外网访问端口，右侧为内部映射端口，与nginx.conf.template的监听端口默认80一样即可。到此为止，你的项目就成功部署到Docker中的Nginx中了，撒花*★,°*:.☆(￣▽￣)/$:*.°★*。
前端开发者必备：Nginx部署前端项目，让你的Web应用快速、稳定、安全地运行
失忆老幺
04-04 1万+
Nginx部署前端项目
nginx项目部署（前端）
yangyi
05-22 634
1、工具 xshell xftp 将打包的dist中的文件通过xftp上传到对应的文件夹下（参考：本人做过的几次都在/usr/local/nginx/html），然后找到nginx.conf(参考：本人的在/usr/local/nginx/conf)，打开nginx.conf修改里面的 server { listen 8080;//此处需要改成需要的，默认808...
在nginx中部署前端项目
JAVA_codemaster的博客
02-24 1328
通过以上步骤，就可以将前端应用部署到 Nginx 服务器上。这不仅可以提高应用的访问速度，还可以利用 Nginx 提供的各种功能，如缓存、负载均衡和安全增强等，来进一步优化你的应用。
nginx部署前端项目
抽象的螺旋
05-11 1797
这里简单记录一下自己部署前端项目的过程。
Nginx 部署前端项目
m0_58749949的博客
07-30 1007
Nginx 部署前端项目
nginx https 部署前端项目
01-21
### 配置 Nginx 支持 HTTPS 对于希望配置 Nginx 来支持 HTTPS 的场景，确保安全连接至关重要。这不仅涉及安装 SSL/TLS 证书，还需要正确配置 Nginx 以便处理加密通信。 #### 获取SSL证书 首先，获取适合网站使用的SSL证书。可以通过Let's Encrypt这样的免费服务提供商来获得证书。一旦获得了证书文件（通常是.crt 和.key 文件），就需要将其放置在一个安全的位置，并记录下路径用于后续配置[^1]。 #### 修改Nginx配置文件 编辑现有的或创建新的Nginx站点配置文件，在`server`块内加入必要的指令以启用HTTPS监听端口443，并指向之前保存的证书位置： ```nginx server { listen 443 ssl; server_name yourdomain.com; ssl_certificate /etc/letsencrypt/live/yourdomain/fullchain.pem; ssl_certificate_key /etc/letsencrypt/live/yourdomain/privkey.pem; location / { root /path/to/vue/dist/; try_files $uri $uri/ /index.html; } } ``` 上述配置指定了HTTPS协议(`ssl`)以及对应的证书和私钥路径；同时设置了Vue构建后的静态资源作为Web根目录，并通过`try_files`实现了单页应用程序(SPA)所需的路由重定向逻辑[^5]。 #### 添加HTTP到HTTPS重定向(可选) 为了让所有请求都强制走HTTPS通道，可以在同一配置文件中添加另一个仅监听80端口的`server`区块来进行永久性跳转: ```nginx server { listen 80; server_name yourdomain.com; return 301 https://$host$request_uri; } ``` 此设置会自动将任何未加密的HTTP请求转换成HTTPS版本，从而提高安全性[^3]。 完成以上更改之后，记得先利用 `nginx -t` 命令验证新配置的有效性，再执行 `sudo systemctl restart nginx` 或者 `nginx -s reload` 应用这些改动。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

uncle_Huang

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

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

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

打赏作者

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

抵扣说明：

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

余额充值