问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

NextJS 部署到特定的 URL 路径

社区维基
1
新手上路，请多包涵

我正在开发我的第一个 NextJS 应用程序。当我运行“npm run dev”或“npm run start”时，它会将我的应用程序部署到

http://host:port/

当我导航到一个页面时，url 变为

http://host:port/page1

我需要有自己的特定网址，例如

http://host:port/my-test-application/path-for-my-app/
http://host:port/my-test-application/path-for-my-app/page1

此外，我的应用程序有很多元素可以链接到应用程序的其他区域，我需要这些元素也可以使用 basePath 转到 URL，而不仅仅是转到根路径。

我还将把这个应用程序 depolying 到具有不同 basePaths 的不同服务器，因此这不能在我的应用程序中进行硬编码。

我怎样才能做到这一点？

对于 react/vue/angular/native JS 等其他应用程序，我只需构建我的应用程序并将构建代码放在我服务器上的“my-test-application/path-for-my-app”文件夹中。

我用我的 NextJS 应用程序试过这个，但我收到一个错误，说找不到“.next”文件夹。

我用谷歌搜索，可以找到一些关于使用“assetPrefix”或使用“Zones”的参考资料。但是我真的不明白我应该做什么。

如何将我的应用程序部署到特定的 URL

解决方案 1：重组“页面”- 不允许我部署到具有不同 basePaths 的不同服务器

我可以在我的“页面”目录中创建文件夹结构并更改我的所有元素以使用此文件夹结构。

 |- pages
     |- my-test-application
           |- path-for-my-app
                |- index.js
                |- page1.js

<Link href="/my-test-application/path-for-my-app/page1" >

我不喜欢这个解决方案，因为 basePath 被硬编码到我的应用程序中，与部署设置相对应。

如果我想在具有不同 basePaths（即下面）的 2 个服务器上部署我的应用程序，我将必须有 2 个版本的代码。

 http://host:port/my-test-application_1/path-for-my-app/page1
http://host:port/my-test-application_2/diff-path-for-my-app/page1

更新：我在 3 月 5 日更新了这个问题，以包括我对 s 工作的需求和一个我不喜欢的解决方案。

原文由 se22as 发布，翻译遵循 CC BY-SA 4.0 许可协议

Stack Overflow 翻译javascriptnode.jsreactjsnext.js
阅读 2.3k
2 个回答
得票最新
社区维基
1
✓ 已被采纳

我找到了一个使用 NGINX 来反向代理具有基本路径的 URL 的解决方案。

有用的链接

申请变更

依赖关系

  • next-images ：为了在使用反向代理时从“公共”导入静态图像
  • @zeit/next-css : 为了使用样式表文件
  • 以及通常的 NextJS 依赖项

下一步.config.js

在应用程序的根目录添加一个“next.config.js”文件，以便您可以指定“assetPrefix”和“publicRuntimeConfig.basePath”

  • assetPrefix : NextJS 在访问组件、样式表、页面等时使用
  • publicRuntimeConfig.basePath : 在s中使用所以指定添加到链接的前缀，在使用公共图片时在”“元素的”src”标签中使用

例子

const isProd = process.env.NODE_ENV === 'production'

// Enable importing of css stylesheets
const withCSS = require("@zeit/next-css");
const withImages = require('next-images');

/*
 * Gets the BASE_PATH from the command used to start this app.
 * If BASE_PATH is specified but it does not start with a "/"
 * then add it.
 */
function getBasePath() {
    var basePath = ''

    if (isProd && process.env.BASE_PATH){
        if (process.env.BASE_PATH.startsWith("/") ){
            basePath = process.env.BASE_PATH;
        } else {
            basePath = "/" + process.env.BASE_PATH;
        }
    }

    console.log("getBasePath() : isProd = " + isProd);
    console.log("getBasePath() : basePath = " + basePath);

    return basePath
}

module.exports = withCSS(withImages({
    assetPrefix: getBasePath() ,

    publicRuntimeConfig: {
        basePath: getBasePath() ,
    },

}));

静态图片

使用“next-images”导入图像并在 的 src 标签中引用导入的对象

更改对静态图像（/public 文件夹中的那些）的任何引用以具有基本路径前缀。例如我的“页脚”组件具有以下内容

import '../stylesheets/main.css';

import img1 from '../public/image_name1.png'
import img2 from '../public/image_name2.png'

export default class o extends React.Component {

    render(){
        var prefix = publicRuntimeConfig.basePath
        return  (
            <div >
                <a className="icon" href="http://www.image_name.com" >
                    <img src={img1} alt="image_name1"/>
                </a>
                <a className="icon" href="http://www.image_name2.com">
                    <img  src={img1} alt="image_name2"/>
                </a>
            </div>
        );
    }
}

注意：我尝试使用 publicRuntimeConfig.basePath 作为 src URL 的前缀（如下所示），但这在我的部署环境中不起作用（见下文）

     import getConfig from 'next/config'
    const { publicRuntimeConfig } = getConfig()
    ...
    ...
    <a className="icon" href="http://www.image_name.com" >
        <img src={`${publicRuntimeConfig.basePath}/image_name1.png`} alt="image_name1"/>
    </a>

链接

更改您的链接以使用基本路径前缀，例如在我的“标题”组件中我有以下内容

import Link from 'next/link';
import '../stylesheets/main.css';

import getConfig from 'next/config'
const { publicRuntimeConfig } = getConfig()

const detailId1 = "banana"

const Header = () => (
    <div>
        <div>
            <Link href={`${publicRuntimeConfig.basePath || ''}/`}>
                <a className="linkStyle">Home</a>
            </Link>

            <Link href={`${publicRuntimeConfig.basePath || ''}/about`} >
                <a className="linkStyle">About</a>
            </Link>

            <Link href={`${publicRuntimeConfig.basePath || ''}/details/[id]`}
                  as= {`${publicRuntimeConfig.basePath || ''}/details/${detailId1}`} >
                <a className="linkStyle">Details Var 1</a>
            </Link>
        </div>
  </div>
);

export default Header;

注意：在博客 https://levelup.gitconnected.com/deploy-your-nextjs-application-on-a-different-base-path-ie-not-root-1c4d210cce8a 中，它包含一个“Link.tsx”为您添加前缀，因此您只需使用该链接组件（从“./Link.tsx”导入链接；）而不是 nextJS 版本（从“下一个/链接”导入链接；）。但是，当我的链接 URL 中有变量时，“Link.tsx”对我不起作用。

运行你的 nextjs 应用程序

当您不需要基本路径时在本地运行您的应用程序时，您可以运行

npm run dev

由于没有指定 BASE_PATH，你的应用程序应该可以从“ http://localhost:3000 ”访问，你的 src 值应该是“/image_name1.png”，当你将鼠标悬停在你的 s 上时，你会看到链接是“ http://本地主机：3000/页面名称“

当您想使用基本路径运行时，请执行以下操作

export BASE_PATH=a/b
npm run dev

_注意：出于某种原因，在我的环境中，如果我指定“export BASEPATH=/a/b”（/ 在路径的开头），我会在路径的开头添加一个文件夹目录。因此，我在没有开始 / 的情况下指定它，如果需要，next.config.js 中的代码会添加开始 / 。

您无法通过“ http://localhost:3000 ”访问您的应用程序，因为您设置了基本路径/assetPrefix/publicRuntimeConfig.basePath。现在你需要一个反向代理。

NGINX ：反向代理

我发现最简单的设置是使用 NGINX docker 镜像。您需要使用包含重定向到 NextJS 应用程序的配置来运行 NGINX。

创建一个文件夹并在该文件夹中添加一个“default.conf”文件。确保您放入“位置”的路径与您在启动 nextjs 应用程序时为 BASE_PATH 指定的路径相同。

 server {
    listen 80;
    server_name  localhost;

    location /a/b/ {
        proxy_pass http://myhost:3000/;
    }
}

重要笔记：

  • 你必须在你的 proxy_pass URL 的末尾有尾随 / 否则额外的路径不会传递到你的 NextJS 应用程序
  • 如果您在该位置使用变量，则必须确保包含传递路径

例子

location ~ /a/b/(.*)$ {
    set $upstream http://myhost:3000/$1;
    proxy_pass $upstream;
}

在该目录的命令提示符下运行 NGINX docker 映像，告诉它使用您的配置文件。

 docker run --name mynginx1 -v C:/zNGINX/testnginx/conf:/etc/nginx/conf.d -p 80:80 -d nginx
  • docker 容器的名称是“mynginx1”
  • v 参数告诉它将计算机上“C:/zNGINX/testnginx/conf”中的所有文件复制到 docker 容器中的“/etc/nginx/conf.d”目录。这会将您的“default.conf”复制到 docker 容器，NGINX 将读取该配置文件。
  • 注意：确保你的docker位置路径中有“conf.d”（“：/etc/nginx/conf.d”），我阅读的博客没有包括这部分，它只指定了“：/etc/ nginx/”，没有它图像就不会启动。
  • p 参数告诉在端口 80 上运行 NGINX

转到以下网址

http://localhost:80/a/b/

NGINX 会将该 URL 重定向到“ http://localhost:3000 ”。因此，您的应用程序现在应该可以从具有基本路径的 URL 访问。单击 s 应该有效，链接应包含转到 NGINX 的基本路径，NGINX 重定向回应用程序，剥离基本路径，留下任何其他路径。

使用 Docker 的真实世界服务器部署

如果您将应用程序部署到服务器，而不是在本地运行，您可以构建您的应用程序，然后将相关文件/文件夹复制到服务器计算机。确保在构建和运行应用程序时设置了 BASE_PATH

 export BASE_PATH=a/b
npm run build

cp package*.json [server_location]
cp next.config.js [server_location]
cp ./next [server_location]

然后在该服务器位置运行

npm install
export BASE_PATH=a/b
npm run start

注意：如果您在应用程序中引用了“public”中的图像，请使用“next-images”并导入图像，而不是使用 publicRuntimeConfig.basePath 作为前缀。当我做后者时，找不到图像。有关示例，请参阅有关图像的部分。

原文由 se22as 发布，翻译遵循 CC BY-SA 4.0 许可协议

社区维基
1

在 Next.js ≥ 9.5 中，您可以在 basePath 中设置 next.config.js 。例如，如果您希望整个 Next.js 应用位于 /docs ，您可以使用：

 // next.config.js
module.exports = {
  basePath: '/docs'
}

Next 将确保从正确的位置提供所有资产，它会自动为应用程序中的所有 Link 以及在使用 next/router 的程序导航期间添加此基本路径前缀.例如，

 <Link href="/about">
  <a>About Page</a>
</Link>

将被转换为链接到 /docs/about ，

 router.push('/about')

这意味着您可以更改 basePath 而无需更改应用程序实际代码中的任何内容。

原文由 Luke Taylor 发布，翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录，登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进，让解决方法与时俱进
推荐问题