nginx部署本地umi build项目

一、安装

brew install nginx

Brew 安装可以参考网上教程
https://juejin.cn/post/6986190222241464350

安装后启动nginx服务查看是否成功

brew services start nginx

启动报错

Error: undefined method `launchd_service_path‘ for xxx

解决：更新brew

brew update -v

https://blog.csdn.net/qq_33589510/article/details/128805046
重新启动后访问localhost:8080可以看到成功
在这里插入图片描述

二、将build之后的产物dist部署到nginx

1.umi build后得到dist文件夹
2.查看nginx中的nginx.conf文件
查看nginx配置信息

brew info nginx

这里找了网上大佬的图参考
在这里插入图片描述
图片来源网络https://juejin.cn/post/6986190222241464350
我的截图

在这里插入图片描述
可以看到每个人的文件位置是不一样的，后面以我的位置为参考

打开安装目录

open /opt/homebrew/etc/nginx

在这里插入图片描述
这个就是配置文件
在vscode中打开它，并找到server块，这里提供我的
在这里插入图片描述
root后面的是Nginx服务器的文档根目录。也就是你以后存放dist的路径
但是我的root后面只跟了一个html, 而且nginx文件夹下也没有叫html的文件夹

如果您的Nginx配置文件中的 root 指令没有值，而是显示为 root html;，则意味着Nginx将使用默认的文档根目录。在这种情况下，文档根目录通常是 /usr/share/nginx/html 或 /var/www/html。

在您的Nginx配置文件中，如果 root 指令没有绝对路径，则Nginx将使用一个相对路径来找到文档根目录。在这种情况下，相对路径是相对于Nginx配置文件的目录。

在您的示例中，root 指令的值为 html，这意味着Nginx将在Nginx配置文件所在目录下寻找名为 html 的目录，并将其作为文档根目录。

这意味着Nginx将在Nginx配置文件所在目录下寻找名为 html 的目录，并将其作为文档根目录。如果该目录不存在，您需要创建它并赋予权限
在这里插入图片描述

mkdir /opt/homebrew/etc/nginx/html
chmod 755 /opt/homebrew/etc/nginx/html

这两个命令是用于在命令行中创建目录并设置权限的。

  1. 第一个命令 mkdir /opt/homebrew/etc/nginx/html 用于在 /opt/homebrew/etc/nginx目录下创建一个名为 html的新目录。如果其中任何一个父级目录(/opt/homebrew/etc/nginx)不存在，该命令也会创建它们。

  2. 第二个命令 chmod 755 /opt/homebrew/etc/nginx/html 用于将 html 目录的权限设置为755。这意味着目录的所有者具有读取、写入和执行权限（7），而组和其他用户具有读取和执行权限（5）。chmod 命令用于更改Unix/Linux 系统中的文件和目录的权限。

请注意，/opt/homebrew/etc/nginx/html 路径和您指定的权限可能根据您特定的系统配置而有所不同。如果需要，请根据实际情况调整命令。

3.然后可以看到nginx文件夹下已经有了html文件夹
在这里插入图片描述
接着配置nginx.conf文件

location / {root /opt/homebrew/etc/nginx/html/dist;index index.html index.htm;
}

保存并检验配置

nginx -t

在这里插入图片描述
出现这两行则表示没问题
这时，将dist文件夹复制到html文件夹下，
重启nginx服务

nginx -s reload

并访问localhost:8080（或你之前修改的域名example.com）即可，

问题

1.应后端要求，js和css文件前面加前缀如： /static/umi.js或/static/umi.css

在umi的config.ts中加上publicPath:’/static/‘

（补：这里加了publicPath后打开本地会报错 mf-va_remoteEntry.js:318 Uncaught (inpromise) ChunkLoadError: Loading chunk mf-dep_src_umi_cache_mfsu_mf-va__CWD__node_modules__umijs_babel-preset-umi_node_modules__babel_runti-028e26 failed.，删除src/.umi文件夹后重新start即可）

结果访问报nginx无法加载js和css, 报错net::ERR_ABORTED 404 (Not Found)

  1. 检查文件路径: 确保请求的JS或CSS文件的路径是正确的，并且文件确实存在于该路径中。你可以使用命令行或文件浏览器来检查文件路径是否正确。
  2. 检查Nginx配置: 确保Nginx的配置文件中正确地映射了请求的文件路径。特别是，确保你使用了正确的root指令来指定你的Web根目录，并且你的location指令正确地映射了请求的文件路径。
  3. 检查文件权限: 确保文件权限允许Nginx服务器读取请求的文件。你可以使用chmod命令来更改文件权限，以确保Nginx可以访问它们。
  4. 检查防火墙设置: 如果你使用了防火墙，请确保防火墙不会阻止Nginx服务器访问请求的文件。

由于我的是加了东西后报错的，所以我认为是文件路径不对的问题
将dist下的umi.js和umi.css放到dist/static/下果然成功了
但是不可能每次在dist这里修改，所以我将nginx配置改成重定向，重定向也可以使用alias,但我这里是需要去掉上一级目录，所以直接用了rewrite

server {listen 8080;server_name localhost;#charset koi8-r;#access_log logs/host.access.log main;root /opt/homebrew/etc/nginx/html/dist;location /static/ {# 重定向/static/到/ 例如/static/umi.js 重定向到 /umi.jsrewrite ^/static/(.*)$ /$1 break;}location / {index index.html index.htm;}#error_page 404 /404.html;# redirect server error pages to the static page /50x.html#error_page 500 502 503 504 /50x.html;location = /50x.html {root html;}# proxy the PHP scripts to Apache listening on 127.0.0.1:80##location ~ \.php$ {# proxy_pass http://127.0.0.1;#}# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000##location ~ \.php$ {# root html;# fastcgi_pass 127.0.0.1:9000;# fastcgi_index index.php;# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;# include fastcgi_params;#}# deny access to .htaccess files, if Apache's document root# concurs with nginx's one##location ~ /\.ht {# deny all;#}
}

再次执行

nginx -t 
nginx -s reload

访问成功
在这里插入图片描述
问题二： 第一次访问成功，刷新后报404
在这里

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

加上

try_files $uri $uri/ /index.html;

变成

location / {index index.html index.htm;try_files $uri $uri/ /index.html;
}

重新启动nginx即可

常用的指令有

nginx -t 检查配置是否有错误，每次修改都应该先检查一下
nginx -s reload 重新加载配置
nginx -s reopen 重启
nginx -s stop 停止
nginx -s quit 优雅地退出，在退出前完成已经接受的连接请求
nginx -V 查看版本，以及配置文件地址
nginx -v 查看版本
nginx -c filename 指定配置文件
nginx -h 帮助

https://www.jianshu.com/p/8994bd8d3414

最后

（注意：此处为我根据自己的项目写的，具体情况可能和我的不同，酌情参考）
可以在项目package.json中写上脚本，将文件自动拷贝到nginx
在这里插入图片描述

"posttest:nginx": "set NODE_ENV=development && umi build",
"test:nginx": "scp -r ./dist /opt/homebrew/etc/nginx/html",

yarn run test:nginx

后
启动nginx或直接刷新页面即可

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/53582.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AI相机“妙鸭相机”原理分析和手动实现方案

AI相机“妙鸭相机”原理分析和手动实现方案

妙鸭相机 一个通过上传大约20张照片，生成专属自拍。在2023年7月末爆火，根据36Kr报道，妙鸭相机系阿里系产品，挂靠在阿里大文娱体系下，并非独立公司。 使用方法是上传20张自拍照片，之后可以选择模板生成自己…
阅读更多...
【新版系统架构补充】-嵌入式技术

【新版系统架构补充】-嵌入式技术

嵌入式微处理体系结构 冯诺依曼结构 传统计算机采用冯诺依曼结构，也称普林斯顿结构，是一种将程序指令存储器和数据存储器合并在一起的存储器结构 冯诺依曼的计算机程序和数据共用一个存储空间，程序指令存储地址和数据存储地址指向同一个存…
阅读更多...
ConcurrentHashMap 的简单介绍

ConcurrentHashMap 的简单介绍

ConcurrentHashMap是Java集合框架中的一个并发容器，它是线程安全的哈希表的实现。它被设计为比Hashtable和SynchronizedMap（通过使用同步方法或块来保证线程安全）更高效和可扩展的替代品。 ConcurrentHashMap具有以下特点： 线程…
阅读更多...
Qt应用开发(基础篇)——滑块类 QSlider、QScrollBar、QDial

Qt应用开发(基础篇)——滑块类 QSlider、QScrollBar、QDial

一、前言 滑块类QScrollBar、QSlider和QDial继承于QAbstractSlider，父类主要拥有最大值、最小值、步长、当前值、滑块坐标等信息，滑动的时候触发包含值数据变化、滑块按下、滑块释放等信号。键盘包括左/上和右/下箭头键通过定义的singleStep改变当前值&a…
阅读更多...
JavaScript |（六）DOM事件 | 尚硅谷JavaScript基础实战

JavaScript |（六）DOM事件 | 尚硅谷JavaScript基础实战

学习来源：尚硅谷JavaScript基础&实战丨JS入门到精通全套完整版 文章目录 📚事件对象📚事件的冒泡📚事件的委派📚事件的绑定🐇赋值绑定🐇addEventListener()🐇attachEvent()&…
阅读更多...
使用socket实现UDP版的回显服务器

使用socket实现UDP版的回显服务器

文章目录 1. Socket简介2. DatagramSocket3. DatagramPacket4. InetSocketAddress5. 实现UDP版的回显服务器 1. Socket简介 Socket（Java套接字）是Java编程语言提供的一组类和接口，用于实现网络通信。它基于Socket编程接口，提供了…
阅读更多...
Netty使用和常用组件辨析

Netty使用和常用组件辨析

Netty 使用和常用组件 简述 <dependency> <groupId>io.netty</groupId> <artifactId>netty-all</artifactId <version>4.1.42.Final </version> <scope>compile</scope> </dependency> Netty 的优势 1 、 AP…
阅读更多...
Qt使用QQuickWidget的输入法问题（Qt5.12及以前）

Qt使用QQuickWidget的输入法问题（Qt5.12及以前）

Qt使用QQuickWidget的输入法问题&#xff08;Qt5.12及以前&#xff09; 最近有网友表示&#xff0c;在使用QQuickWidget嵌入到QWidget时&#xff0c;QML内部的输入法会有问题。 主要表现是&#xff0c;当焦点从QWidget&#xff08;比如QLineEdit&#xff09;切换到QQuickWidg…
阅读更多...
C语言 用数组名作函数参数

C语言 用数组名作函数参数

当用数组名作函数参数时&#xff0c;如果形参数组中各元素的值发生变化&#xff0c;实参数组元素的值随之变化。 1.数组元素做实参的情况&#xff1a; 如果已经定义一个函数&#xff0c;其原型为 void swap(int x,int y);假设函数的作用是将两个形参&#xff08;x,y&#xf…
阅读更多...
在java中存储对象到redis出现类型转换异常的解决方法

在java中存储对象到redis出现类型转换异常的解决方法

**出现的问题,**此时的redisCatch已经注入 原因:这里传进来的是一个对象,redis不能直接将对象存到String中,必须将对象进行序列化转成json字符串再存储,其次.传进来的对象不能是null 再重新启动就行了
阅读更多...
三、PWM呼吸灯

三、PWM呼吸灯

1. 什么是呼吸灯 如下图中的蓝色LED灯，不再是亮灭交替，而是慢慢亮慢慢灭，这就是呼吸灯 生活中常见 2. 怎样实现？ 答：用PWM
阅读更多...
瞄准产业应用，大模型加持的深兰科技AI虚拟数字人落地业务场景

瞄准产业应用，大模型加持的深兰科技AI虚拟数字人落地业务场景

伴随ChatGPT的问世&#xff0c;在技术与商业运作上都日渐发展成熟的AI数字人产业正持续升温。 目前的AI数字人不仅拥有超高“颜值”&#xff0c;同时还拥有更为丰富的、细腻的表情和动作。更有甚者&#xff0c;AI数字人已经具备自定义构建知识图谱、自主对话、不断学习成长的能…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023