使用nginx+宝塔面板部署示例前端项目

最新推荐文章于 2024-06-25 14:31:15 发布

SoSalty

最新推荐文章于 2024-06-25 14:31:15 发布

阅读量2.5k

点赞数 2

分类专栏：前端文章标签： nginx 前端运维

本文链接：https://blog.csdn.net/SoSalty/article/details/129372338

版权

前端专栏收录该内容

12 篇文章 3 订阅

订阅专栏

当我们写好一个前端练手项目之后,想要在服务器上部署,以便于让别人查看我们的项目,这时候我们可以使用宝塔面板+nginx来发布我们的项目;

(具体的服务器购买/宝塔面板安装等等就不再过多讲解,不懂的小伙伴可以看看具体的教程~)

1. 上传打包好的项目文件夹

打开宝塔面板的软件商店;
找到nginx软件,点击右侧黄色的文件夹;
进入到nginx文件夹目录后,打开html文件夹;
将打包好的dist文件夹上传到html文件夹目录下;
将dist文件夹改成其他名字,比如demo;

2. 配置nginx

在上述nginx文件夹目录下,打开conf;
在conf文件夹下找到nginx.conf并打开;

在server{...}中的最后添加如下代码:

        location /demo {
          root   demo;
          index  index.html index.htm;
      }

保存之后重启nginx!!

3. 完成!

假如你的服务器地址为123.123.11.12,则访问http://123.123.11.12/demo 即可进入查看你的项目啦~
之后想要部署更多项目如上再次操作即可

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SoSalty

关注关注

2
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
使用nginx+宝塔面板部署示例前端项目

当我们写好一个前端练手项目之后,想要在服务器上部署,以便于让别人查看我们的项目,这时候我们可以使用宝塔面板+nginx来发布我们的项目
复制链接

扫一扫

专栏目录

使用nginx部署前端项目（超详细教程）.pdf

04-29

使用nginx部署前端项目是一篇非常详细的教程，旨在帮助初学者使用Nginx来部署前端项目。本文首先介绍了Nginx的基本概念和作用，解释了为什么Nginx是一个强大的Web服务器和反向代理。然后，文章详细讲解了如何在Linux系统上安装Nginx，并介绍了Nginx的一些基本配置和使用方式。接下来，文章详细讲解了如何使用Nginx来部署前端项目，包括如何设置静态文件目录和如何配置反向代理和HTTPS。文章还包含了大量的代码示例和截图，以帮助读者更好地理解和操作Nginx。总的来说，这篇教程对于想要学习Nginx并使用它来部署前端项目的初学者来说是一篇非常实用和全面的指南。此外，所使用的前端资源自已上传到了个人资源库，本人所有博客资源秉持免费的态度，提供大家，我们一起学习进步！在这个繁忙的世界里，我们常常会遇到很多人和事。有些人和事只是匆匆而过，而有些则会与我们产生深刻的联系和感悟。在这方面，我真的感谢遇见了你。你的聆听、鼓励和支持一直伴随着我走过很多难关和艰辛，这让我感到非常幸运和感激。感谢相遇，愿我们向阳而生，温暖，善良！

web服务器nginx+部署前端vue项目

03-22

1. 什么是 nginx 和可以做什么事情 Nginx 是高性能的 HTTP 和反向代理的web服务器，处理高并发能力是十分强大的，能经受高负载的考验,有报告表明能支持高达 50,000 个并发连接数。其特点是占有内存少，并发能力强，事实上nginx的并发能力确实在同类型的网页服务器中表现较好，中国大陆使用nginx网站用户有：百度、京东、新浪、网易、腾讯、淘宝等。 2.Nginx 作为 web 服务器 Nginx 可以作为静态页面的 web 服务器，同时还支持 CGI 协议的动态语言，比如 perl、php 等。但是不支持 java。Java 程序只能通过与 tomcat 配合完成。Nginx 专为性能优化而开发，性能是其最重要的考量,实现上非常注重效率，能经受高负载的考验,有报告表明能支持高达 50,000 个并发连接数。 https://lnmp.org/nginx.html

1 条评论您还未登录，请先登录后发表或查看评论

宝塔面板部署前端项目

最新发布

Eliaukoyx

06-25

458

使用宝塔面板 6 步完成前端项目的部署

手把手教你从0搭建部署网站，保姆级教程（nginx部署及宝塔部署）

m0_64642443的博客

07-10

1万+

文本主要介绍如何使用nginx 和集成的宝塔面板二种方法来部署上线网站，我用到的云服务器是腾讯云，当然其他的阿里云等服务器都是一样的，区别不大。需要用到的：1.一台云服务器2.Xshell软件（用来连接操作服务器）3.Xftp软件（用来方便管理服务器中的文件）

使用宝塔面板部署前端网站

weixin_43239880的博客

03-13

2545

添加一个38760的入口（为什么是38760而不是其他的，你要看上面宝塔外网ip的端口号，我的是38760，但是你起的可能是其他的，所以你要注意），其他选择如图。这里的ip地址（公）就是待会你要连接的服务器的ip地址，也是别人访问你网站的地址，可以注意一下。然后你就能找到你的服务器了，其中最重要的就是实例（管理你的服务器状态）和安全组（控制可访问该服务器的端口号）在登录到首页的时候，宝塔会提示你安装环境，你就直接选择左边的一键安装就ok了。在浏览器中输入你阿里云对公ip，就能访问到你的网站啦！

宝塔部署前端项目

小蚂蚁的博客

09-23

3053

因为我的是纯前端项目，所以只需要安装nginx即可。注意，项目执行文件，就是服务器中的/www/server/nginx/html /index.html ，执行命令会自动生成，项目名称随便写，其中设置项目真实端口的时候可能不让设置80，可暂时设置其他，提交以后可以修改成80。2.在服务器上安装完宝塔以后，登陆宝塔面板，通过文件功能把项目的所有文件上传到服务器的以下目录，/www/server/nginx/html , 通常项目的默认入口文件是index.html,不做特殊处理。该项目部署的步骤如下。

使用宝塔面板部署前端项目到服务器

m0_62476845的博客

12-22

3628

在此之前，我们已经创建了宝塔面板账号、拥有了一台服务器。现在，我们想让我们的前端能够像阿里巴巴、淘宝等网站那样被别人访问，那么我们应该在宝塔面板上面怎样做呢？一、第一步：创建文件夹1、打开我们的宝塔面板后，我们会看到左侧有一列目录，点击里面的文件。2、点击在根目录下名叫www的文件夹3、点击里面叫wwwroot的文件夹4、在里面随便创建一个文件夹准备放入我们的前端代码5、放入我们的前端代码二、第二步：部署前端项目1、在宝塔面板的左侧有个叫网站的名字，点进去并选择node项目。

手摸手带你用宝塔部署前端项目。

weixin_43330752的博客

02-24

4832

宝塔Linux面板是提升运维效率的服务器管理软件，支持一键LAMP/LNMP/集群/监控/网站/FTP/数据库/JAVA等100多项服务器管理功能。有30个人的专业团队研发及维护，经过200多个版本的迭代，功能全，少出错且足够安全，已获得全球百万用户认可安装。运维要高效，装宝塔。本文使用阿里云服务器，其他服务器部署流程也大同小异。一:首先购买一台云服务器。这里操作系统我选择的是CentOS 7.5 ，此处需要注意，CentOs8+下载宝塔会有问题。并且进行重置服务器密码操...

Nginx+Uwsgi+Django+Vue部署

02-25

Nginx+Uwsgi+Django（python3）+Vue部署，一步步实现。网上找了N多篇文章都没成功，特意记录，以免其他同学踩坑

Nginx+Uwsgi+Django 项目部署到服务器的思路详解

09-16

在部署基于Nginx、Uwsgi和Django的Web应用程序时，首先需要理解这个架构的核心组件及其作用。Nginx是一个高性能的反向代理服务器，用于处理HTTP和HTTPS请求，提供静态文件服务，以及负载均衡等功能。Uwsgi则是一个...

使用PM2+nginx部署python项目的方法示例

09-19

以下是使用PM2和Nginx部署Python项目的一系列步骤和知识点。 ### PM2的基本特性 1. **内建负载均衡**：PM2通过Nodecluster模块提供负载均衡功能。 2. **后台运行**：PM2可将应用程序作为守护进程运行。 3. **0秒...

宝塔面板部署vue前后端分离项目

qq_48575500的博客

04-29

2516

检查连接数据库的用户名和密码都没有出现错误，而且本地mysql服务的localhost也修改成对应的阿里云服务ip了，可就是连接失败，不能访问数据库。在导入sql文件之前，需要先创建数据库，此时需要先设置这个数据库的用户名和密码（只是这个数据库的用户名和密码）而已，如果嫌麻烦可以使用全局的root用户（说明nginx监听的是8081的请求，如果listen配置了ip地址，那么下面的server_name就不生效了。安装宝塔面板，等待安装完成，会展示宝塔面板的外网、内网面板地址以及账号密码。

服务器中用宝塔7.9面板配合Nginx部署springboot+vue前后端分离项目—超详细(包含项目打包方法)

Amy_Victoria的博客

04-20

5330

服务器中用宝塔7.9面板配合Nginx部署springboot+vue前后端分离项目—超详细(包含前后端项目的打包方法)

服务器初始化（宝塔+nginx+前端）

qq_43592084的博客

07-10

826

ssh连接上服务器，输入命令按提示安装即可。

宝塔面板上的安装Nginx的配置路径问题

兮动人

09-23

1万+

虽说装上宝塔面板确实省下了安装软件时不必要的麻烦，问题是学过一点Nginx或Apache，就不需要宝塔来创建网站了。关于在宝塔上安装了Nginx后，找不到Nginx对应网站的配置文件，其实一直在如下路径中如果是直接安装Nginx，没有用到宝塔面板来装，默认路径可以放在/usr/nginx下，这样就可以随便来配置网站相关的信息了。如：网站：http://pt.yunxdr.top/ 配置...

使用nginx部署前端项目（超详细教程）

热门推荐

IT小辉同学

04-29

2万+

愿我们的付出都值得

使用宝塔部署JavaWeb前后端项目到服务器

Vladimirzzzzz的博客

03-30

4000

4.在左侧边栏中点击软件商店，部署项目所需要的环境，我这里是前端项目部署到Nginx服务器，后端使用的是Springboot，数据库使用的是Mysql，所以只需要安装Nginx、Mysql以及Java运行时环境，因为安装Tomcat会自动安装Java运行时环境，所以这里选择安装一个Tomcat。8.这个时候前后端的项目就部署到服务器上了，可以直接访问IP地址，直接输入IP地址访问的是前端的Nginx服务器，加上后端端口可以访问到后端，但是前后端现在不能实现交互，这是因为还没有解决跨域问题。

CentOS7 安装 Nginx 部署简单项目及使用宝塔面板设置

ling1998的博客

04-19

5252

1、安装EPEL Nginx 服务器软件安装包在 EPEL 仓库里，但不在CentOS 的 yum 包安装源仓库中，所以需要先添加 CentOS 7 EPEL 仓库： [root@Tracy src]# yum install -y epel-release 2、安装Nginx [root@Tracy src]# yum install -y nginx 3、验证是否安装成功 [root@Tracy src]# nginx -v nginx version: nginx/1.20.1

nginx+vue部署多个前端项目,二级目录不能访问、访问空白的问题

09-09

在nginx中部署多个vue前端项目时，如果出现二级目录不能访问或访问空白的问题，可能是配置文件有误或者项目部署路径有误。首先，确保nginx的配置文件中的location部分正确配置了前端项目的二级目录路径。例如，有两个前端项目分别为project1和project2，部署路径为/var/www/html/project1和/var/www/html/project2。那么，在nginx的配置文件中，可以这样配置： ``` server { listen 80; server_name localhost; location /project1 { alias /var/www/html/project1/dist; try_files $uri $uri/ /project1/index.html; } location /project2 { alias /var/www/html/project2/dist; try_files $uri $uri/ /project2/index.html; } } ``` 通过配置location /project1和location /project2，将对应的项目的访问路径与实际的部署路径关联起来。另外，注意在配置location时，要正确指定项目的dist文件夹路径，并设置try_files指令来处理路由页面的访问。配置完成后，重新加载nginx配置文件，即可访问到对应的二级目录下的前端项目了。如果还是无法访问或出现空白页面，可以检查项目是否正确部署到了/var/www/html目录下，并确认项目的打包是否成功。总结起来，对于nginx部署多个vue前端项目的问题，主要是要确保配置文件中的location部分正确指定了项目的二级目录路径，并检查项目的部署路径和打包是否正确，以及nginx配置的重新加载。