常連

### 前提

当方Typescriptを学びはじめ、Nest.jsの存在を知り
試しにNest.jsを使用してWEBアプリケーションを作成しようとしています。
かなり初心者です。

### 実現したいこと

Nest.jsで作成したWEBアプリケーションをherokuにデプロイしたい。

### 発生している問題・エラーメッセージ

Nest.jsがサーバーサイド側のフレームワークということは理解できているのですが、実際にWEBアプリケーションとして使用する際にフロントエンド側とどうやって連携させたら良いのかが全然イメージできておらず。そこの方法を教えていただければと思っております。
当方が考えられたのは、
１，フロント側とバックエンド側をそれぞれHeokuにアップしてフロント側からバックエンド側のAPIを取得する。
２，Nest.js内でhtmlをレンダリングできる？(expressのejsのようなイメージ)
３，フロントエンド側は別のフレームワークで作成（vue.js など）してフォルダをNest.jsで作ったものと合わせてHeokuにアップ。（フォルダが連結できるのか？）
上記の方法で実際作成が可能でしょうか？

また、実際によく行われる手法ややり方があれば教えていただけないでしょうか？



Nest.jsを使用したWEBアプリ開発について

### 実現したいこと

- [ ] POSTメソッドも動くようにしたい
※POSTメソッドが成功しないため、DELETE,PUTも試せていません。

### 前提

NestJSでAPIを作成しました。
作成したAPIをLambdaに乗せ、API GateWayでエンドポイントを作成しました。
フロントエンドはNestJSで作成し、Vercelにデプロイしました。

### 発生している問題・エラーメッセージ
POSTメソッドがCORSではじかれます。

```
Access to fetch at 'https://xxxxxx.amazonaws.com/api/v1/login' from origin 'https://xxxxxxx.vercel.app' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
```

### 該当のソースコード

```nest.js

// CORSの設定箇所
 app.use((req: any, res: any, next: any) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type,  Authorization');
    res.header('Access-Control-Allow-Methods', '*');
    next();
  });
```

```next.js

export const connectApi = (method: string, url: string, body: any) => {
  return new Promise<ApiResponse>((resolve, reject) => {
    const URL = process.env.NEXT_PUBLIC_BASE_URL + url
    let headers
    if (getLocalStorage('token')) {
      headers = {
        'Content-type': 'application/json; charset=UTF-8',
        Authorization: `Bearer ${getLocalStorage('token')!}`,
      }
    } else {
      headers = {
        'Content-type': 'application/json; charset=UTF-8',
      }
    }
    // POST送信
    fetch(URL, {
      method: method,
      headers: headers,
      body: JSON.stringify(body),
    })
      .then((response) => {
        return response.json()
      })
      .then((data) => {
        resolve(data)
      })
      .catch((e) => {
        resolve(e)
      })
  })
}
```

**API GateWayのCORS設定**
|Access-Control-Allow-Origin|https://********.vercel.app|
|:----|:----|
|Access-Control-Allow-Headers|content-type,authorization|
|Access-Control-Allow-Methods|*|
|Access-Control-Max-Age|-1秒|
|Access-Control-Allow-Credentials|true|


### 試したこと

下記サイトを参考にAPI GateWayのCORS設定を色々と試してみました。
https://qiita.com/daikiojm/items/4c2143a213332abf11704
https://docs.aws.amazon.com/ja_jp/apigateway/latest/developerguide/how-to-cors.html
https://note.com/shift_tech/n/ne5c3628ec6d1

curlコマンドで試してみました。
```
curl -X POST "https://****.amazonaws.com/api/v1/login" -H "Content-Type:application/json" -d "{\"username\":\"****\",\"password\":\"****\"}"
```
~~上記実行すると期待しているレスポンスが取得できました。
コマンドで取得できるのにブラウザから叩けない理由がわかりません。~~
※コメントに追記しました。

### 補足情報（FW/ツールのバージョンなど）

"@nestjs/common": "^9.0.0",


Lambda関数にのせたNestJSで作成したAPIでGETはできるがPOSTでCORSエラーが出るのを解決したい

YouTubeの動画(https://www.youtube.com/watch?v=GHTA143_b-s&t=2090s)
を参考に、docker-composeで、Nest.js-PostgreSQLの勉強をしています。
しかし動画の36:20あたり、コンテナ内で「npx prisma migrate dev」を実行しようとしたら、以下のエラーが出ました。
```bash
root@-------:/app#  npx prisma migrate dev

Environment variables loaded from .env
Prisma schema loaded from prisma/schema.prisma
Datasource "db": PostgreSQL database "nest", schema "public" at "dev-db:5434"

Error: P1001: Can't reach database server at `dev-db`:`5434`

Please make sure your database server is running at `dev-db`:`5434`.
```
「docker compose ps」では、STATUSはきちんとrunningになっています。
コンテナには「docker compose exec api bash」で入りました。
これを実行したいです。
とても面倒だとは思いますが、ご協力よろしくお願いします。

#### 環境
WSL2: Ubuntu20.04
Docker　　v20.10.13
docker compose　　v2.2.3
#### コード
Dockerfile
```
FROM node:17

RUN mkdir -p /app
WORKDIR /app

RUN npm i -g @nestjs/cli

RUN apt-get update && apt-get upgrade -y

RUN apt-get install -y \
    postgresql-client \
    vim

CMD ["yarn", "start:dev"]
```
docker-compose.yml
```
version: '3'

services:
  api:
    build: .
    container_name: nest
    tty: true
    ports:
      - 3000:3000
    volumes:
      - ./app:/app
    depends_on:
      - dev-db
    links:
      - dev-db
    restart: always

  dev-db:
    image: postgres:14
    container_name: pgdb
    ports:
      - 5434:5432
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: 123
      POSTGRES_DB: nest
      POSTGRES_INITDB_ARGS: "--encoding=UTF-8"
    restart: always
```
.env ("npx prisma init"を実行すると自動で生成される)
```
(省略)
DATABASE_URL="postgresql://postgres:123@dev-db:5434/nest?schema=public"
```

#### やってみたこと
dev-dbコンテナ内にある、/var/lib/postgresql/data/postgresql.conf ファイルを編集。
```
（略）
listen_addresses = '*'

port = 5434
（略）
```
port のコメントアウトを外し、5434に変更。
効果なし。

”npx prisma migrate dev” でエラー

# nestJSを始めたい
nestJSの環境を作りたいのですがエラーになります
```
npm i -g @nestjs/cli
```
でダウンロードされているように動いているのですがダウンロード完了後に
```
nest -v
zsh: command not found: nestjs
```
と出力されます。

 # 調べたこと
先頭にsudoをつけても変わりませんでした。



nestJSを始めたい

今はNestJSでWebAPIを作成しようとしています。

問題はタイトルにあるように、NestJSのサーバーを起動しようとした際に、

```
Error: connect ECONNREFUSED 127.0.0.1:3306
    at TCPConnectWrap.afterConnect [as oncomplete] (net.js:1138:16)
    --------------------
    at Protocol._enqueue (/略/node_modules/mysql/lib/protocol/Protocol.js:144:48)
    at Protocol.handshake (/略/node_modules/mysql/lib/protocol/Protocol.js:51:23)
    at PoolConnection.connect (/略/node_modules/mysql/lib/Connection.js:116:18)
    at Pool.getConnection (/略/node_modules/mysql/lib/Pool.js:48:16)
    at /略/src/driver/mysql/MysqlDriver.ts:1234:18
    at new Promise (<anonymous>)
    at MysqlDriver.createPool (/略/src/driver/mysql/MysqlDriver.ts:1231:16)
    at MysqlDriver.connect (/略/src/driver/mysql/MysqlDriver.ts:387:36)
    at DataSource.initialize (/略/src/data-source/DataSource.ts:232:27)
```
というエラーが出てきてしまいます。
TypeOrmの記述は以下です。
```
import { Module } from '@nestjs/common';
import { UsersModule } from './users/users.module';
import { TypeOrmModule } from '@nestjs/typeorm'

@Module({
  imports: [
    UsersModule,
    TypeOrmModule.forRoot({
      type: 'mysql',
      host: 'localhost',
      port: 3306,
      username: 'root',
      password: '略',
      database: '略',
      autoLoadEntities: true
    })
  ],
  controllers: [],
  providers: [],
})
export class AppModule { }

```
何が悪いのかが全く見当ついておらず申し訳ありませんが、アドバイス頂けますと幸いです。

MySQLはDocker Desktopの機能でRunして作ったものと別にMySQLをDockerで入れたもの2つ試してみましたが、
どちらも接続できませんでした。

NestJSでtypeormライブラリを使って、MySQLにアクセスするも接続できない

### 前提

ここに質問の内容を詳しく書いてください。
（例）
TypeScriptでポートフォリオを作成しております。
Prismaの型を分割代入する関数を作成時にschema.prismaではnullが入っています。
```
type PUser = {
    id: string;
    name: string;
    email: string;
    password: string;
    gender: GenderType | null;
    age: number | null;
    location: LocationType | null;
}
```
上記のように型をつけているのですが、上記を分割代入しようと下記のように記載するとage,gendere,locationから
nullが消えてしまいます。
```
  const { id, gender, location, age, ...omitPUser } = pUser;
```
こちらの型を
```
gender: "MEN" | "WOMEN" | "OTHERS" | null
```
このようにしたいです。

### 試したこと

prismaのバージョン変更
schema.prismaの変更

### 補足情報（FW/ツールのバージョンなど）

    "@prisma/client": "^3.7.0",
    "prisma": "3.12.0",
    "prisma-merge": "^0.2.0",



Prismaでの分割代入でnullがなくなる

現在Webの学習のため、Next.js・NestJS・GCPを扱ったWebサービスを開発しており、
データベースサーバーへのアクセス制限を考えております。

クラウドサービスとAPI連携する際、リクエストヘッダーに「X-API-KEY」などといった独自ヘッダーを設定し、
データベースの取得・更新をする場合がありますが、
どのように独自ヘッダーをHTTP通信上から隠蔽しているのでしょうか？

独自でX-API-KEYを設定したところ、デベロッパーツールのネットワークタブから確認でき、
環境変数でキーを設定してもセキュリティ上問題があることに気づきました。

HTTPリクエストヘッダーの隠蔽方法、またはデータベースサーバーへのアクセス制限方法についてご教示いただけましたら嬉しいです。
よろしくお願いいたします。

HTTPリクエストヘッダーの隠蔽方法について

### 前提

NestJSの勉強をしています。
公式ドキュメントを読みながら触っているのですが、Validationで引っかかっています。

### 実現したいこと

validation後に型がクラスに合わせてtransformされている。

### 該当のソースコード

```javascript
// main.ts
import { ValidationPipe } from '@nestjs/common'
import { NestFactory } from '@nestjs/core'
import { AppModule } from './app.module'

async function bootstrap() {
  const app = await NestFactory.create(AppModule)
  app.useGlobalPipes(new ValidationPipe(
    { transform: true } // transformをオン
  ))
  await app.listen(3000)
}
bootstrap()
```

```javascript
// users.controller.ts
import { Controller, Get, Param, Query } from '@nestjs/common'

import { IsNumberString, IsOptional } from 'class-validator'

class GetParams {
  @IsNumberString()
  @IsOptional()
  limit?: number
}

@Controller('users')
export class UsersController {
  @Get()
  findAll(@Query() query: GetParams): string {
    console.log(typeof query.limit) // stringのまま
    return 'This action returns all users'
  }

  @Get(':id')
  findOne(@Param('id') id: number): string {
    console.log(typeof id) // numberにtransformされている
    return `This action returns user(id: ${id})`
  }
}

```

findAllが実行された際に、
query.limitはnumberになっていると想定していたがstringのまま。
これは記述方法が間違っているのでしょうか?
もしくは@Queryに対してはtransformは効かないのでしょうか?