非根目录部署 nextjs 项目,资源文件 404 的问题

问题描述

一般的我们见到的 nextjs 项目部署,按照官方步骤基本上没啥问题,但是今天遇到一个不是太常见的:在网站的子目录部署 nextjs 项目。

最近开发了一个浏览器插件,打算用 nextjs 做一个简单的官方主页,这样显得正式一点,结果在平平无奇的部署上出问题了。

本地开发没有问题,在部署的时候发现网站虽然可以正常打开,但是 JavaScriptcss 等资源的状态是 404.

不过,看文件属性的话,该文件在服务器上是明显存在的

只是,nextjs 生成的文件夹是 .next (这点和开发环境一致),不知道为什么在服务端请求变成了 _next

其他人的方案

网上各种搜索后,看到有人遇到了同样的问题

但是其解决方法试过后并不适用,也可能是 Nginx 的配置问题。如果有大佬懂这方面的,感谢告知

rewrite 指令的方式,我也试过,但是没有效果。

nginx 复制代码
location /lifetime/_next/static/ {
        alias /home/ubuntu/root/.next/static/;
        expires 365d;
        access_log off;
}
location /lifetime {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://localhost:3001;
}
// 当然这里还有另一个解决办法是通过rewrite指令,修改proxy_pass后的url。

Stack Overflow 相关问题

nextjs-deploy-to-a-specific-url-path

看了下,发现别人老早也遇到了类似的问题,但是没发现比较靠谱点的解决方法。

我的笨方法

首先,如果非根目录的话,next.config.js 的这个配置是必须的

js 复制代码
const nextConfig = {
  reactStrictMode: true,
   basePath: '/sub-directory',
   assetPrefix: '/sub-directory'
}
// basePath指定项目的根路径,assetPrefix指定静态资源的路径
module.exports = nextConfig

Nginx 的配置如下:

nginx 复制代码
  location /sub-directory {
        proxy_set_header Host $http_host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_pass http://localhost:6666;
    }

通过 F12 发现,浏览器请求静态资源的路径是 /sub-directory/_next/static/,但是服务器上是没有 _next 文件夹的。

一个笨方法就是,新建 _next 目录,然后把 /sub-directory/.next/static/ 目录下的所有文件复制到 /sub-directory/_next/static/

写一个脚本文件即可,在 package.json 中添加一个 script 命令即可:

json 复制代码
"build": "next build  && ./copy_next.sh"

对于 nextjsNginx 还不是非常熟悉。如果您知道问题出在哪里,欢迎告知。

相关推荐
JarvanMo7 分钟前
天塌了?Flutter工程总监跑去苹果了?
前端
搬码临时工21 分钟前
通过自定义域名访问内网的web服务和tcp应用:内网ip到局域网外域名访问过程
服务器·tcp/ip·php
烛阴1 小时前
掌握 TypeScript 的边界:any, unknown, void, never 的正确用法与陷阱
前端·javascript·typescript
小红帽2.01 小时前
从ioutil到os:Golang在线客服聊天系统文件读取的迁移实践
服务器·开发语言·golang
Jerry2 小时前
迁移到 Jetpack Compose
前端
FFF-X2 小时前
前端无感刷新 Token 的 Axios 封装方案
前端
qq_589568102 小时前
javaweb开发笔记—— 前端工程化
java·前端
wanhengidc2 小时前
造成云手机闪退的原因有哪些?
服务器·网络·安全·智能手机·媒体
gnip2 小时前
包管理工具的发展
前端
前端工作日常3 小时前
H5 实时摄像头 + 麦克风:完整可运行 Demo 与深度拆解
前端·javascript