web-dev-qa-db-ja.com

Nest.jsで静的HTMLファイルを提供する方法

Nestプロジェクトの外部の/distフォルダにある静的HTMLファイルを提供したい。 index.htmlは正常にロードされますが、JSファイルのロードに失敗します（404エラー）。

私はNode/Express.jsプロジェクトを使用しています

app.use('/', express.static('../client/dist'))

そしてそれは完全にうまく働きます。

ただし、Nestプロジェクトでは

app.setBaseViewsDir(join(__dirname, '../../client/dist'))

トリックを行いません。

AppControllerで試しました

import { Response } from 'express';

@Get()
  get(@Res() res: Response) {
    res.sendFile('index.html', {
      root: '../client/dist',
    });
  }

しかし、運はありません。

前述のように、index.htmlは正常にロードされます。したがって、問題は間違ったパスではありません。 Expressプロジェクトではまったく同じファイルが使用されるため、index.htmlのsrc-pathsの問題も同様です。

/dist
  |-index.html
  |-main.js
  |-etc.

Index.htmlで：

<script type="text/javascript" src="main.js"></script>

DistフォルダをNestプロジェクトに入れても（そしてパスを調整しても）機能しません。

私は解決策を見つけました：

私は今エクスプレスモジュールを使用しています：

import * as express from 'express';
...
app.use('/', express.static('../client/dist'));
javascriptnode.jsexpressnestjsstatic-files
5
Maurice Wipf

Nest.jsの 公式ドキュメント については、次のような静的ファイルを提供する必要があります。

必要なパッケージをインストールします。

npm install --save @nestjs/serve-static

app.module.ts を次のように更新します。

import { Module } from '@nestjs/common';
import { AppController } from './app.controller';
import { AppService } from './app.service';
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'client'),   // <-- path to the static files
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}
1
Philipp Kief

静的ファイルを提供するには、useStaticAssets()の代わりにsetBaseViewsDir()を使用する必要があります。

app.useStaticAssets(join(__dirname, '../../client/dist'))

useStaticAssetsを使用すると、コントローラーを設定する必要がなく、すべてのファイルが自動的に提供されます。

client/distの下に、ファイルindex.htmlおよびpic.jpgがあるとします。それらは次のように提供されます：

localhost:3000 -> index.html
localhost:3000/pic.jpg -> pic.jpg

たとえばhbsのようなビューエンジンを使用する場合は、ベースビューディレクトリの設定が必要です。 docs を参照してください。

1
Kim Kern

Main.tsにapp.useStaticAssets(join(__dirname, '../../client/dist'))を書き込みます

そして、あなたはこれをfastifyアプリに試すことができます：

import { resolve } from 'path';

app.useStaticAssets({
    root: resolve("./build")
});
0
Serhii

このようなものがあれば

/public
  |-index.html
  |-main.js
  |-etc.
/src
  |-app.controller.js
  |-app.module.js
  |-main.js

Main.tsまたはmain.js

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.useStaticAssets(join(__dirname, '..', 'public'));
  app.setViewEngine('html');

  await app.listen(5000);
}
bootstrap();

App.module.js

@Module({
  imports: 
  [ 
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'public'),
      exclude: ['/api*'],
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

App.controller.js内

@Controller()
@Dependencies(AppService)
export class AppController {
  constructor(appService) {
    this.appService = appService;
  }

  @Get()
  @Render('index')
  root() {
  }
}

このコードで、トリックを行うことができます:) :) :)

0
Marco Muñoz