标签: netlify

我正在尝试找到任何示例来概述如何采用现有的 React 应用程序并逐渐开始迁移到 Next.js。我已经阅读了所有有关增量采用策略（例如子路径、重写、微前端、代理）的 Next.js 文档，但尚未找到一个可靠的示例来展示这在现实生活中的“我”实际上是什么样子。我们已经有了一个庞大的 React 代码库”场景。

期望的结果是关闭我现有应用程序的子路径（例如 ），/workshop并且/workshop成为 Next.js 应用程序的入口点。然后，我希望能够在两个应用程序之间无缝导航，尽管一旦您进入 Next.js 领域并且需要从代理中导航回来，其机制似乎很模糊。

为了增加上下文，React 和 Next.js 应用程序都将在 Netlify 上提供服务。我已经仔细阅读了他们的文档以及 Vercel 的文档，寻找一个可行的示例，但我仍然不走运。非常感谢任何有关如何最好地解决此类问题的知识或指导！

我有一个使用 ES6 模块的普通 HTML/CSS/JavaScript 站点（存储库）。可以成功部署到GitHub页面和Netlify。

在我的 HTML 中，我main.js像这样导入：

<script src="js/main.js" type="module" defer></script>

在我的main.js文件中，我导入了我制作的其他模块，如下所示：

import * as data from './data.js';
import displayUserCard from './displayUserCard.js';

现在我还想安装和导入npm 模块以在我的网站上使用，就像我在我的网站上使用我自己的代码一样。

我这样安装lodash：

npm i lodash

然后在我的main.js文件中，我像这样导入 lodash，就像我在 Node 应用程序中所做的那样：

import _ from 'lodash';

这当然不起作用，并给了我以下错误，因为我们现在在浏览器中而不是在 Node 应用程序中：

^未捕获类型错误：无法解析模块说明符“lodash”。相对引用必须以“/”、“./”或“../”开头。^

经过研究，我了解到这样的开发环境需要一个 Web 捆绑器，但我发现从 Browserify 和 RequireJS 等过时的工具，到 WebPack 等过于复杂的工具，再到 Parcel、Vite 和 Snowpack 等较新的捆绑器，这些都不需要似乎没有解决为开发和生产构建轻松捆绑 npm 包的问题。

2021/2022 年，在普通 HTML/CSS/JavaScript 前端应用程序中使用 lodash 等节点模块以便可以在 GitHub 页面、Netlify 和 Vercel 等 CDN 上进行捆绑、构建和部署的最直接方式是什么？

部署到 netlify 失败并出现 error: [vite]: Rollup failed to resolve import...，但当我使用本地构建时它可以工作npm run build（与 netlify 相同）。无法解析的包是直接从 github 安装的，而不是其他包。

包.json：

    "dependencies": {\n        "@tailwindcss/line-clamp": "^0.2.2",\n        "focus-visible": "^5.2.0",\n        "just-throttle": "^4.0.1",\n        "lrud": "github:bbc/lrud#master",\n        "sapper-environment": "^1.0.1"\n    }\n

网络化日志：

10:10:48 PM: \xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\n10:10:48 PM:   1. build.command from netlify.toml                            \n10:10:48 PM: \xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\xe2\x94\x80\n10:10:48 PM: \xe2\x80\x8b\n10:10:48 PM: $ npm run build\n10:10:48 PM: > sveltekit-movie-app@0.0.1 build\n10:10:48 PM: > svelte-kit build\n10:10:49 PM: vite v2.7.10 building for production...\n10:10:49 PM: transforming...\n10:10:52 PM: \xe2\x9c\x93 54 modules transformed.\n10:10:52 PM: [vite]: Rollup …

我需要重定向到 Netlify 上的一个 React 项目的主页，但我使用的是 vite。

我曾经使用 CRA (create-react-app) 来完成此操作，并使用此配置在公共文件夹中创建_redirects文件。

/*  /index.html 200

我该如何在vitejs中做到这一点？

我在 Netlify 上部署的 SvelteKit 应用程序遇到了一个问题，如果我加载该应用程序，然后让页面处于非活动状态几分钟，在某些时候它会中断，如果我尝试导航或执行某些操作，它就会卡住，而且看起来like 无法获取组件，但在某个时刻它最终会加载，但需要很长时间（例如几分钟）。所附的屏幕截图是我尝试通过单击按钮导航到页面后得到的。

这是 Sveltkit 配置：

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: preprocess({
        postcss: true
    }),

    kit: {
        adapter: adapter(),
    }
};

export default config;

有什么线索吗？

我在 Netlify 上部署了我的 Vite React 站点，但我的技能图标没有呈现！ 这是网站。。我在部署之前执行了 npm run build，我得到了 dist 文件夹并将其部署在 Netlify 上。但起初资产文件夹没有图标，所以我也将其添加到资产（dist 文件夹）文件夹中，但没有成功！请帮忙。

我想渲染我的作品集网站的技能图标。

我创建了一个带有create-react-app的网站,我建立了这个网站,./client/build并使用快递服务.

使用express,我还设置了两个在dev(localhost)中运行良好的基本API路由.

我在netlify上部署的内容是什么？

我构建客户端react-scripts
然后我手动将环境设置为生产以在本地构建服务器webpack
最后我将我的代码推送到我的GitLab仓库,它会自动触发部署.

使用Netlify部署的设置:

Build command:         Not set
Publish directory:     client/build

问题

当我尝试使用我的一条API路线时,收到错误404 ...

项目

我的项目结构是这样的:

|   package.json
|   server.js
|   webpack.config.js
+---API
|       dbHandler.js
|       routesHandler.js
+---client
|   |   package.json
|   +---src
|   |   |   App.js
|   |   |   ...
|   +---node_modules
|   +---public
|   |       index.html
|   |       manifest.json
|   |       _redirects
|   \---build
|       |   index.html
|       | …

我有一个回购，在两个单独的文件夹中具有后端和前端（create-react-app）。对于build命令，我有类似的东西cd frontend && npm run build，对于publish目录，我有类似的东西frontend/build，但这不起作用。

我部署到netlify使用ng build --prod,网站工作.但是当我转到它时,它会通过添加/home到结尾自动更改链接.它仍然有效,但如果我刷新页面或点击任何其他页面的链接,它就不再起作用了.添加"/ home"的原因是因为我有一个RouterModule设置,它具有home作为它的初始路径.以下是我在"app.module.ts"中设置路由的代码:

 NgbModule.forRoot(),
    RouterModule.forRoot([
      {
        path: '',
        redirectTo: '/home',
        pathMatch: 'full'
      },
      {
        path: 'home',
        component: HomeComponent
      },
      {
        path: 'terms-and-conditions',
        component: TermsAndConditionsComponent
      },
      {
        path: 'privacy',
        component: PrivacyPolicyComponent
      },
      {
        path: 'about',
        component: AboutComponent
      },
      {
        path: 'contact',
        component: ContactComponent
      },
      {
        path: 'team',
        component: TeamComponent
      },
      {
        path:'safety',
        component: SafetyComponent
      }
    ])
  ],
  providers: [],
  bootstrap: [AppComponent]

那么为什么构建不适用于页面链接呢？它只是转到"404:找不到页面",控制台没有错误.

是否可以仅对图像，字体，css和js等静态资产进行缓存控制？

这是我的解决方法

[[headers]]
  for = "/*" # This defines which paths this specific [[headers]] block will cover.
  [headers.values]
    Cache-Control = "public, max-age=604800"

它很可爱，但是效果不如我预期。即使更新内容，该网站似乎仍使用旧版本。