本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 服务器 > nginx >

收藏
分享到

linux安装nginx和前端部署vue项目全过程(实测react项目也可）

nginx 来源：互联网 作者：佚名 发布时间：2024-11-27 21:08:02 人浏览
摘要

1、打包前端项目 1 npm run build 执行完后会在根目录下生成一个dist文件夹，这个dist文件夹就是我们需要的东西 2、将dist包上传到服务器 自己建一个目录，上传即可（尽量不要在root目录下，可能

1、打包前端项目

1

npm run build

执行完后会在根目录下生成一个dist文件夹，这个dist文件夹就是我们需要的东西

2、将dist包上传到服务器

自己建一个目录，上传即可（尽量不要在root目录下，可能涉及权限问题）

3、安装并配置nginx

3.1、在安装nginx前需要先安装安装gcc、pcre-devel、zlib-devel、openssl-devel

1

yum -y install gcc pcre-devel zlib-devel openssl openssl-devel

3.2、下载nginx

下载地址：Index of /download/ (nginx.org)

下载“nginx-1.9.9.tar.gz”，移动到/usr/local/下

1

cd /usr/local/

注：也可以先进入到上述目录，然后执行下面这条命令一键下载tar包，更方便

1

wget http://nginx.org/download/nginx-1.9.9.tar.gz

 解压

1

tar -zxvf nginx-1.9.9.tar.gz

进入nginx目录

1

cd nginx-1.9.9

进行配置

下面三条命令依次执行，上一个执行完后再执行下一个

1

./configure --prefix=/usr/local/nginx

1

make

1

make install

注：这里编译的时候如果出现如下图所示的错误，说明gcc把警告当成错误处理了

我们进入 /usr/local/nginx-1.9.9/objs/ 目录，找到Makefile文件，将下图所示 -Werror去掉即可

如果出现下面这个错误，则根据错误日志找到对应的文件将这一行注释即可（目前网络上搜寻的都是这种解决办法）

补：这个教程我在四台服务器上都试了，只有其中一台出现了上述两个问题，由于知识浅薄，确实没能深究原因，若有前辈知道原因，欢迎加文末联系方式或评论区指导，感激不尽！ 

3.3、修改配置文件

进入下面这个目录进行修改

1

vim /usr/local/nginx/conf/nginx.conf

需要修改以下四处，当然，你自己会的话随意，不会的话按我的来

需要注意的是dist文件夹尽量放在根目录下自己建的文件夹里，不要放在root里，可能会涉及权限问题，导致前端报错403

注：如果抓包发现请求返回html页面，不是正常返回响应，说明你不是幸运儿，你需要正常写请求转发的配置文件，看文末

4、启动nginx

1

2

cd /usr/local/nginx/sbin

./nginx //启动nginx

5、当之后每次修改配置文件后，nginx都要进行重启 

1

2

# 未配置环境变量使用绝对路径运行

/usr/local/nginx/sbin/nginx -s reload

常见错误解决办法

403

权限问题

估计你的dist项目放在root目录里了

在根目录下创建一个文件夹，将dist文件夹放到这个文件夹下，记得修改配置文件，然后重启nginx

404

没找到文件夹

先自己看一下配置文件，dist文件夹位置，index等是否正确，如果都正确，先重启一下nginx，清除浏览器缓存，再尝试访问，如果依然不行，则在nginx配置文件中加入下面这句话

1

try_files $uri $uri/ /index.html;

注意我的位置，不要添加错误，添加完后保存配置文件，然后重启nginx，理论上就可以了

请求返回html代码

请求返回html代码，不是正常返回响应，说明请求没正常到达后端，需要配置请求转发，如下：

/auth/表示请求中带atuh的请求都将其转发到 http://192.168.17.128:5000

假如我正常的url是 

1

http://192.168.17.128:5173/auth/user/doLogin?validCode=308

那么转发后的url就是

1

http://192.168.17.128:5000/auth/user/doLogin?validCode=308

根据自己的项目合理配置即可
版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • nginx反向代理下的长连接实现

    nginx反向代理下的长连接实现
    一、nginx使用场景 大型应用架构中，一般会使用nginx反向代理，分为三层： 1.调用层，浏览器或APP； 2.中间层，反向代理nginx； 3.服务层，

  • linux安装nginx和前端部署vue项目全过程(实测react项

    linux安装nginx和前端部署vue项目全过程(实测react项
    1、打包前端项目 1 npm run build 执行完后会在根目录下生成一个dist文件夹，这个dist文件夹就是我们需要的东西 2、将dist包上传到服务器 自己

  • Nginx+Tomcat集群环境的实现

    Nginx+Tomcat集群环境的实现
    一、集群环境架构 一台Nginx可以与多台Tomcat服务器挂钩，此时客户端访问的都是Nginx反向代理的IP地址和端口，然后Nginx通过一些分流策略等
  • nginx指定conf文件路径的方法介绍
    在使用 Nginx 时，有时需要指定配置文件（nginx.conf）的路径，而不是使用默认的路径。你可以通过以下几种方式来指定配置文件路径： 1. 使
  • Nginx的流式响应配置教程介绍
    Nginx的流式响应配置 Nginx的流式响应（streaming response）是指在Nginx作为反向代理服务器时，将响应内容一边接收，一边逐步发送给客户端的过

  • Nginx设置Access-Control-Allow-Origin多域名跨域实现

    Nginx设置Access-Control-Allow-Origin多域名跨域实现
    修改配置文件 可通过如下配制进行多域名的设置。 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 map $http_origin $corsHost { default 0; ~https://www.itbiancheng.com https://
  • Nginx修复CORS漏洞的实现方法
    漏洞描述 CORS 不安全配置漏洞指的是在跨域资源共享过程中，由于资源服务器的响应头 Access-Control-Allow-Origin 配置不当导致本应该受限访问的
  • Nginx配置超时时间的排查方法
    如果在 Nginx 中设置了 keepalive_timeout、client_header_timeout 和 client_body_timeout 后仍然不起作用，可以尝试以下排查步骤： 1. 确认配置的生效范围
  • Nginx中配置防盗链的方法实现介绍
    在当今数字化的时代，网站内容就如同珍贵的宝藏，而盗链则像是可恶的盗贼，企图不劳而获地窃取这些宝藏。想象一下，您辛辛苦苦打造
  • Nginx只允许www域名访问并禁止裸域名访问的实现步
    在网站管理中，很多时候我们希望用户只能通过带有www的域名访问，而对于裸域名（即没有www前缀的域名）则禁止访问或进行重定向。这可
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计