[英]Serving multiple static files in nestjs for different locations and prefixes?
[英]NestJS deliver static files based on language of browser
Nestjs 應該提供基於瀏覽器中定義的語言的 Angular 應用程序。
Angular 應用程序位於dist/public/en
或dist/public/de
。
如果用戶使用英文瀏覽器訪問/
,nestjs 應該從文件夾dist/public/en
傳送文件。 在這種情況下,瀏覽器中的路徑應該指向fqdn/en/
。
我已經在單語言 Angular App 中使用了它:
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets(join(__dirname, 'public'));
await app.listen(process.env.PORT || 3000);
}
bootstrap();
我還查看了i18next ,它看起來很有希望。
但我不確定這是否是正確的方向。
任何提示都受到熱烈歡迎。
比靜態提供dist
文件夾更好的是將所有非 api 路由重定向到index.html
以便您的 Angular SPA 可以處理路由。 有關更多詳細信息,請參閱此答案。
您可以通過考慮要檢測用戶語言的因素(例如ACCEPT-LANGUAGE
標頭或某個 cookie)來調整上面鏈接答案中的中間件:
@Middleware()
export class FrontendMiddleware implements NestMiddleware {
use(req: Request, res: Response, next: Function) {
// Some way of detecting the user's language
const languages = req.header('ACCEPT-LANGUAGE') || 'en-US';
if (languages.contains('de-DE')) {
res.sendFile(join(__dirname, 'public', 'de' ,'index.html'));
} else {
res.sendFile(join(__dirname, 'public', 'en', 'index.html'));
}
}
}
@kim-kern 非常感謝您的回答。 它把我推向了正確的方向。
我現在通過以下方式解決了這個問題:maint.ts 將基於全局中間件進行語言檢測並定義文件的靜態交付:
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as compression from 'compression';
import { NestExpressApplication } from '@nestjs/platform-express';
import { join } from 'path';
const i18next = require('i18next');
const middleware = require('i18next-http-middleware');
async function bootstrap() {
const app = await NestFactory.create<NestExpressApplication>(AppModule);
i18next.use(middleware.LanguageDetector).init({
detection: {
order: ['path', 'session', 'querystring', 'cookie', 'header'],
},
});
app.use(
middleware.handle(i18next, {
ignoreRoutes: ['/api'],
removeLngFromUrl: false,
}),
);
app.useStaticAssets(join(__dirname, 'public'));
app.use(compression());
await app.listen(process.env.PORT || 3000);
}
bootstrap();
我定義了一個自定義中間件,用於檢查找到的語言,並根據 baseUrl 提供正確的 index.html 文件:
import { NestMiddleware, Injectable } from '@nestjs/common';
import { Request, Response } from 'express';
import { join } from 'path';
@Injectable()
export class FrontendMiddleware implements NestMiddleware {
use(req: any, res: Response, next: Function) {
if (req.lng && !req.baseUrl && req.lng.startsWith('de')) {
res.sendFile(join(__dirname, 'public', 'de', 'index.html'));
} else if (!req.baseUrl) {
res.sendFile(join(__dirname, 'public', 'en', 'index.html'));
} else {
next();
}
}
}
然后將自定義中間件包含在 app.module.ts 中:
...
export class AppModule implements NestModule {
configure(consumer: MiddlewareConsumer): void {
consumer.apply(FrontendMiddleware).forRoutes({
path: '/**',
method: RequestMethod.ALL,
});
}
}
現在唯一開放的問題是它總是嘗試從固定目錄 public 傳遞文件,如果在開發模式而不是生產模式下運行會失敗。
我會在那里尋找解決方案。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.