【Linux】nginx连接前端项目

itxck

已于 2024-09-27 10:24:07 修改

阅读量473

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Linux nginx VMware 文章标签：服务器运维

于 2024-09-24 18:34:13 首次发布

本文链接：https://blog.youkuaiyun.com/itxnk/article/details/142496664

Linux 同时被 3 个专栏收录

8 篇文章

订阅专栏

VMware

6 篇文章

订阅专栏

nginx

3 篇文章

订阅专栏

文章目录

一、项目编译
- 1.编译文件
- 2.`dist`文件
二、Linux nginx配置
三、启动nginx

一、项目编译

1.编译文件

在这里插入图片描述

2.`dist`文件

在这里插入图片描述

二、Linux nginx配置

在Xshell软件中，点击Ctrl+Alt+F进入文件传输
找到地址：/usr/local/nginx/html
将dist文件传入

找到nginx.conf，用记事簿编辑

try_files $uri $uri / /index.html;  //自己写入防报错

在这里插入图片描述

三、启动nginx

systemctl start firewalld  #开启firewalld服务

firewall-cmd --add-port=80/tcp  #添加端口

whereis nginx  #查看目录

cd /usr/local/nginx/sbin #切换目录

./nginx  #启动！！！

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

itxck

关注关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

nginx部署前端项目 (Linux版)

weixin_43819028的博客

09-04

1265

nginx快速部署前端项目，Centos+Nginx+Vue

nginx部署前端dist包

来一颗砂糖橘

08-29

2796

nginx部署前端dist包 download > Stable version 可选择稳定版的nginx。1.将打包好的dist放入html目录下。2.打开nginx.conf配置文件。2.打开浏览器输入地址打开项目。nginx压缩包解压后的目录。1.双击启动nginx。

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

【运维】Linux安装Nginx并部署前端项目【内/外网-保姆级教程】

m0_64210833的博客

06-06

1万+

Linux安装Nginx并部署前端项目的两种方式【内/外网-保姆级教程】

【Linux中nginx连接前端项目】

不要轻易听取含我在内任何人的话语，做自由的人

09-24

307

来到你的项目根目录下。

linux环境使用nginx部署前端项目

Xiaofeng_Lu__的博客

05-31

6382

1.linux安装nginx 看这两篇博客：这个是安装nginx： https://blog.youkuaiyun.com/t8116189520/article/details/81909574 这个是将nginx安装到指定目录，如果有这个需求： https://blog.youkuaiyun.com/gotheon/article/details/90409492 2.把编译好的dist包放到linux指定的文件夹中 3.修改nginx的配置文件nginx.conf ① 进入安装好的nginx文件夹，找到配置文件

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

04-29

【使用Nginx部署前端项目】的教程是一个详尽的指南，主要面向初学者，旨在教会读者如何利用Nginx高效地部署前端应用。Nginx是一个高性能的Web服务器和反向代理，因其高并发处理能力和低内存占用而受到广泛青睐。 ...

【虚拟机】在Linux环境中nginx部署前端项目

qq_73004234的博客

04-19

1554

主要分为3个步骤：在VMware中安装Centos7虚拟机，下载Xshell、Xftp软件（操作非常方便）、Centos7下部署nginx，布置前端项目。

【Linux服务器nginx前端部署详解】ubantu22.04，前端Vue项目dist打包

m0_74825634的博客

12-25

1115

本文主要讲一下在Linux系统环境下（以ubantu22.04为例），如何用nginx部署前端Vue项目打包的dist静态资源。有些具体的命令就不展开讲了，可以自行查看其他博主的文章，我主要讲整体的步骤和思路。

在Linux上使用nginx部署前端vue项目

weixin_64703215的博客

05-10

1269

由于我在部署这个项目的时候公司要求内网开发，所以不能联网下载nginx的依赖包需要使用光驱拷贝链接：https://pan.baidu.com/s/1bXrHV6I0W6yYLo6elhyakA 提取码：9e5w 首先是搭建nginx环境上面链接是一位大佬提供的网盘资源下载地址包括nginx（1.13.9）跟环境所需的包。解压出来后，上传到linux里面，我放在/usr/local/src中（这个路径自己随意放就可以了） 2.进入到你放的nginx整个文件夹所在的位置，我是...

nginx部署前端项目 (Windows版)

weixin_43819028的博客

09-03

3097

本文介绍了如何在Windows系统上安装和配置nginx，以及如何创建和修改网站根目录和配置文件，以实现前端项目的部署。文章提供了超详细的操作和代码示例，以及相关的解释和注意事项

linux配置nginx，并访问前端文件

weixin_56489753的博客

04-20

1933

下载地址: https://nginx.org/download/需要安装gcc环境；第三方包；PCRE(Perl Compatible Regular Expressions)是一个Perl库，包括 perl 兼容的正则表达式库zlib库提供了很多种压缩和解压缩的方式，nginx使用zlib对http包的内容进行gzip，所以需要在linux上安装zlib库。OpenSSL 是一个强大的安全套接字层密码库，囊括主要的密码算法、常用的密钥和证书封装管理功能及SSL协议，并提供丰富的应用程序供测

Nginx静态服务功能访问前端页面（黑马头条Day01）

one2excellent的博客

03-03

1722

比如：我们访问淘宝的时候，淘宝内部肯定不是只有一台服务器，它的内部有很多台服务器，那我们进行访问的时候，因为服务器中间session不共享，那我们是不是在服务器之间访问需要频繁登录，那这个时候淘宝搭建一个过渡服务器，对我们是没有任何影响的，我们是登录一次，但是访问所有，这种情况就是反向代理。（在服务器中配置代理服务器）当请求http://qingshan.com/123/abc/logo.png时，会返回 /ABC/123/abc/logo.png文件，即用/ABC 加上 /123/abc。

使用 Nginx 管理你的前端资源

CRMEB小程序商城的博客

04-07

5293

前言在前端项目开发中，我们可以启动 devserver 管理静态资源服务，但是发布线上后要保证稳定，一般会选择一个高效能 + 稳定的静态服务器来管理前端资源。作为前端工程化的关键一环节，这一篇我们来一起学习一下 Nginx 的常见用法。 Nginx (engine x) 是一个高性能的 HTTP 和反向代理 web 服务器，同时也提供了IMAP/POP3/SMTP 服务。常规使用 Nginx 的安装过程就省略了，毕竟是基操，WIndows 都是一键安装的。先记住几个常用的命令，待会我们会不断的使用到

nginx安装和前端访问配置以及403 Forbidden问题解决

weixin_44956870的博客

06-06

1817

将所有请求导 index.html。sudo yum install epel-release（本次安装nginx未执行该条命令）【前端nginx访问配置】8001系统+10002系统+10003系统+10005系统。

Linux之使用Nginx部署Web站点---前站篇

ke_mo_duo的博客

05-16

570

接着上一篇安装Nginx的内容 1.Nginx 的默认站点目录是Nginx的安装目录(/application/nginx/）下的html 目录（具体路径为/application/nginx/html）可以从Nginx 主配置文件查看，命令如下 grep html /application/nginx/conf/nginx.conf 如果要部署网站，只要把网站放在 /application/nginx/html 目录中即可 2.查看整个Nginx目录结构 ...

【linux中nginx怎么连接自己的前端项目】

DOUBLEDdinosaur的博客

09-24

355

保存后启动nginx，你就可以看到你自己前端的页面了。此时我们没有dist文件(就是编译后的文件)此时我们打开nginx.conf文件。之后你可以拿到dist文件夹了。

nginx配置访问本地静态资源

最新发布

03-20

### 配置 Nginx 以部署前端项目在 Linux 系统中使用 Nginx 部署前端项目涉及以下几个方面的内容： #### 1. 安装 Nginx 为了在 Linux 上安装 Nginx，可以利用包管理工具 `yum` 或者通过源码编译的方式完成。如果采用 `yum` 方式，则需要执行以下命令来快速安装 Nginx[^2]。 ```bash sudo yum install -y nginx ``` 对于更高级的需求或者自定义配置场景下，可以选择下载官方发布的最新版本并通过源码编译安装。这种方式允许开发者指定更多的模块支持以及优化性能参数[^4]。 #### 2. 修改 Nginx 的配置文件 Nginx 的核心功能由其配置文件控制，默认情况下该文件位于 `/etc/nginx/nginx.conf` 路径下。要成功托管一个前端应用，需调整此文件中的某些部分以便适配实际需求[^1]。 - **定位到配置目录** 使用终端导航至 Nginx 主配置所在位置： ```bash cd /etc/nginx/ ``` - **编辑默认站点配置** 编辑器打开 `nginx.conf` 文件或特定站点的 `.conf` 文件（通常存放在 sites-available 下面）。以下是针对单页面应用程序 (SPA) 常见的一种典型写法示例[^3]: ```nginx server { listen 80; server_name localhost; root /path/to/frontend/dist; # 替换为您的构建产物存储地址 index index.html; location / { try_files $uri /index.html; # 支持路由重定向 } error_page 500 502 503 504 /50x.html; location = /50x.html { internal; } } ``` 上述片段设置了服务器监听端口、域名解析目标、根目录指向以及错误处理机制等内容。特别注意的是，在 SPA 应用里经常需要用到 `try_files` 来实现客户端侧的历史记录模式路由匹配逻辑。 #### 3. 启动服务并验证状态保存更改后的配置之后，重启 Nginx 让新设定生效，并确认进程运行正常无误。 ```bash sudo systemctl start nginx sudo systemctl status nginx ``` 最后一步就是测试网页能否被正确加载出来。可以通过浏览器输入 IP 地址加端口号的形式访问刚刚搭建起来的服务实例。 --- ### 注意事项 - 如果防火墙处于启用状态，请记得开放 HTTP(S) 流量对应的端口。 - 对于生产环境而言，建议进一步加固安全性措施比如启用 HTTPS 加密连接等操作。

【Linux】nginx连接前端项目

文章目录

一、项目编译

1.编译文件

2.dist文件

二、Linux nginx配置

三、启动nginx

2.`dist`文件