
### Local 환경에서 https 설정이 필요한 이유

로컬 환경에서 내가 원하는대로 기능들이 작동한다고 해도, 배포 환경과 로컬 개발 환경의 차이로 인해 코드의 수정이 필요해질 수 있다. 이러한 이유로 개발 환경을 배포 환경과 최대한 동일하게 만들어주는 것이 좋다. 또한 최근의 배포 환경들은 대부분 https로 이뤄져 있기 때문에 그에 맞춰 설정해줄 필요가 있다.

### 자체 서명 인증서 생성 (openssl 사용)

```bash
# 개인 키 생성
$ openssl genrsa -out private-key.pem 2048

# 개인 키를 사용한 새로운 인증서 요청서 생성
$ openssl req -new -key private-key.pem -out cert-request.csr

# 요청서를 사용한 자체 서명 인증서 생성
$ openssl x509 -req -in cert-request.csr -signkey private-key.pem -out cert.pem
```

인증서 생성 시 입력사항은 모두 건너뛰어도 무관하다.

### HTTPS 구성 설정 - main.ts

```typescript
import * as fs from "fs";
import * as https from "https";

async function bootstrap() {
  const httpsOptions = {
    key: fs.readFileSync("./private-key.pem"),
    cert: fs.readFileSync("./cert.pem"),
  };
  const app = await NestFactory.create(AppModule, {
    httpsOptions,
  });
  // 필요에 따라 cors 설정도 가능
  // app.enableCors({
  //  origin: [url,...],
  //  credentials: true, 쿠키를 사용하는 경우 설정
  // });
  await app.listen(3000);
}
bootstrap();
```

설정이 완료되면 로컬에서 https 환경처럼 적용할 수 있다.

하지만 자체 인증서로 https를 만들어 SSR(ServerSideRendering)이나 API 요청 시 self certifi 에러가 발생할 수 있다. 이런 경우 프론트단 env에 다음과 같이 설정해주면 된다.

```bash
# .env
NODE_TLS_REJECT_UNAUTHORIZED=0
```

그럼에도 오류가 발생하는 경우 아래의 링크를 통해 크롬 환경설정을 해주면 된다.

chrome://flags/#allow-insecure-localhost

유효하지 않은 인증서 허용으로 설정

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F3WChm%2Fbtsdi3DwSL4%2F5cdQ9YFzgaKugT4u9ewDk0%2Fimg.png)


Localhost 환경에서 HTTPS 적용하기

nestjs localhost https


### **[서버에서 브라우저로 쿠키 저장](https://lee-yo-han.github.io/nestjs-server-client-cookie)**

분명 로컬에서는 쿠키가 정상적으로 브라우저에 저장되는 것을 볼 수 있었는데, 배포를 하고 나니 또다시 쿠키가 보이지 않았다. response headers에는 쿠키 값과 함께 다음과 같은 에러 문구를 볼 수 있었다.

> **this attempt to set a cookie via a set cookie header was blocked because its domain attribue was invalid with reqards to the current host url**
>
> > "설정된 쿠키 헤더를 통해 쿠키를 설정하려는 이 시도는 해당 도메인 속성이 현재 호스트 URL에 대해 유효하지 않기 때문에 차단되었습니다."

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcGZzIY%2FbtsdemcKoT1%2FcT16wBLzk5J48gv37fGyPK%2Fimg.png)

쿠키 전송 옵션은 다음과 같다.

```typescript
res.cookie("cookie", "cookie", {
  maxAge: 0,
  sameSite: process.env.COOKIE_PARSE_SAME_SITE as SameSite, // "none"
  secure: true,
  httpOnly: true,
  domain: process.env.COOKIE_PARSE_DOMAIN, // "www.backend.com"
});
```

프론트엔드의 URL이 https://www.frontend.com 이고,

백엔드의 URL이 https://www.backend.com 이라고 했을 때, domain 속성을 백엔드 URL로 설정했을 때 발생한 오류이며, domain을 프론트엔드 URL로 바꾸면 response headers에 쿠키 값 자체가 확인되지 않았다.

cors 설정도 credential: true나 origin 등을 정상적으로 해놓은 상태이기 때문에 쿠키 외 다른 데이터는 정상적으로 받아오는걸 확인할 수 있었다.

다른 자료를 찾아보니, secure 속성을 적용하면 쿠키가 정상적으로 저장된다고는 하지만 본인은 이런 문제가 해결되지 않았다.

결국 도메인을 구매해서 사용하게 되었다.

예를 들어 프론트엔드의 URL은 https://www.product.com 로,

백엔드의 URL은 https://api.product.com 으로 연동시켜주고, 쿠키 옵션은 아래처럼 바꿨다.

```typescript
res.cookie("cookie", "cookie", {
  maxAge: 0,
  sameSite: process.env.COOKIE_PARSE_SAME_SITE as SameSite, // "lax"
  secure: true,
  httpOnly: true,
  domain: process.env.COOKIE_PARSE_DOMAIN, // ".product.com"
});
```

같은 도메인을 사용하고 나서야 쿠키가 정상적으로 브라우저로 접속하는 것을 확인할 수 있었다.


NestJS에서 클라이언트로 쿠키 보내기 (왜 내 쿠키는 안받아줘요?) - 배포환경

nestjs server client cookie2


![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FpD9qr%2Fbtr9Oa0APIT%2FFuzZyjjney7aKkIXy6BAfK%2Fimg.png)

## 쿠키(Cookie)란?

쿠키는 서버에서 클라이언트에게 보내는 작은 데이터 조각이다. 일반적으로 브라우저에서 웹 사이트를 방문할 때 쿠키를 사용하여 사용자의 활동을 기록하고, 이후에 그 사용자가 같은 웹 사이트를 방문할 때 이 정보를 사용해 그에 맞게 동작하게 해준다. 하지만 쿠키는 당사자뿐만 아닌 제 3자가 조회하는 것도 가능하기 때문에 개인 정보를 담는 등 보안상 민감한 정보를 저장하는 데에는 적합하지 않기 때문에 탈취되거나 사용자에 의해 조작되어도 크게 문제 되지 않을 정보를 주로 저장한다. (ex. 다크 모드, 장바구니 목록 등)

## 서버에서 클라이언트로 Cookie 전송 예제

### 모듈 설치

```bash
yarn add cookie-parser @types/cookie-parser # 쿠키 관리 모듈
```

### 모듈 적용

```typescript
// main.ts

import { NestFactory } from "@nestjs/core";
import { AppModule } from "./app.module";
import * as cookieParser from "cookie-parser";

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.enableCors({
    // cors 설정
    origin: "http://localhost:3000",
    credentials: true, // 쿠키를 사용할 수 있게 해당 값을 true로 설정
  });
  app.use(cookieParser()); // 쿠키의 편리한 이용을 위해 cookieParser 적용
  await app.listen(3001);
}
bootstrap();
```

### 쿠키 사용 로직

```typescript
// controller.ts

import { Response } from "express";
import { Controller, Get, Res } from "@nestjs/common";

@Controller("myController")
export class MyController {
  @Get()
  getCookie(@Res() res: Response) {
    // express의 Response 객체를 불러와 사용해준다.
    // 쿠키 설정
    res.cookie("cookieName", "cookieValue", { maxAge: 900000, httpOnly: true });
    // maxAge : 유효기간을 밀리초 단위로 설정
    // httpOnly : 클라이언트에서 쿠키에 접근할 수 없도록 설정

    // HTTP 응답 반환
    return res.send("쿠키가 설정되었습니다.");
  }
}
```

쿠키를 요청하는 클라이언트에서도 withCredentials 값을 true로 설정해준다.

```typescript
axios.get(BASE_URL, {
  withCredentials: true,
  headers: {
    "Content-Type": "application/json",
  },
});
```

## 문제상황

보통 예제는 위와 같지만 나는 쿠키가 브라우저에 저장되지 않았다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2Fd0P7QS%2Fbtr9SjoI9ke%2FIW9CJf8K5mS7kDuau67KDK%2Fimg.png)

로직이 잘못된 것처럼 보이지도 않았고 별도의 에러 메시지도 없어서 문제 파악이 어려웠다.

네트워크 탭을 통해 확인해 보니 response 헤더에 쿠키도 정상적으로 들어가 있었다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDRJgW%2Fbtr9NnsBfTs%2FlGo4A2uw6n2UXPJJQVwbb1%2Fimg.png)

그런데 노란 경고판이 눈에 띄었다.

경고 문구는 다음과 같다.

> **this set-cookie header didn't specify a samesite attribute, was defaulted to sameSite=Lax, and was blocked because it came from a cross-site reponse which was not the response to a top-level navigation. this response is considered cross-site because the URL has a different scheme than the current site**

요청 URL과 서버 URL의 체계가 달라서 차단됐다고 한다. 내 클라이언트는 http://localhost인데 서버가 https://localhost라서 그런 것 같았다.

sameSite를 none으로 설정해주고 난 후에는 다음과 같은 경고 문구가 생겼다.

> **this attempt to set a cookie via a set-cookie header was blocked because it had the "SameSite=None" attribute but did not have the "Secure" attibute, which is required in order to user "sameSite=None"**

sameSite=none을 적용하기 위해 필요한 Secure 속성이 없기 때문에 쿠키 설정이 차단되었단다.

쿠키 생성 옵션을 마저 추가해 줬다.

```typescript
res.cookie("cookieName", "cookieValue", {
  maxAge: 300000,
  // none, lax, strict 중 none은 쿠키가 항상 전송되도록 허용.
  sameSite: "none", // HTTPS 프로토콜을 사용하고 secure 옵션이 설정된 경우에만 사용 가능
  secure: true, // 쿠키가 HTTPS 프로토콜을 사용하는 경우에만 전송되도록 제한
  httpOnly: true, // 쿠키에 접근할 수 있는 영역을 HTTP(S) 프로토콜로 제한하여,
  // 브라우저의 자바스크립트 코드로부터 쿠키에 접근할 수 없게 함
});
```

secure 속성을 사용하기 위한 https 설정은 아래를 참고할 수 있다.

### [Localhost 환경에서 https 적용하기](https://lee-yo-han.github.io/nestjs-localhost-https)

그 결과 쿠키를 브라우저에서 잘 받는 것을 볼 수 있었다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FJwJs6%2Fbtr9SkupB08%2FbXf0Hf9swCaY3uL8cxMh7K%2Fimg.png)

마지막으로 서버에서 쿠키를 받아 사용하는 방법이다.

```typescript
import { Response, Request } from "express";
import { Controller, Get, Post, Res, Req } from "@nestjs/common";

@Controller("myController")
export class MyController {
  @Get()
  getCookie(@Res() res: Response) {
    // express의 Response 객체를 불러와 사용해준다.
    // 쿠키 설정
    res.cookie("cookieName", "cookieValue", { maxAge: 900000, httpOnly: true });
    // maxAge : 유효기간을 밀리초 단위로 설정
    // httpOnly : 클라이언트에서 쿠키에 접근할 수 없도록 설정

    // HTTP 응답 반환
    return res.send("쿠키가 설정되었습니다.");
  }

  @Get()
  postCookie(@Req() req: Request) {
    // express의 Request 객체를 불러와 사용해준다.
    // request 객체의 cookies를 통해 생성했던 쿠키의 이름을 통해 값을 가져온다.
    req.cookies["cookieName"];
  }
}
```

클라이언트 단에서는 withCredentials:true 옵션 설정 외에는 특별히 해줄 것이 없다.

---

참조 : https://docs.nestjs.com/techniques/cookies


NestJS에서 클라이언트로 쿠키 보내기 (왜 내 쿠키는 안받아줘요?)

nestjs server client cookie


## bycrypt란?

비밀번호 등을 안전하게 암호화하여 저장하고 검증할 수 있도록 도와주는 라이브러리로, 랜덤한 salt를 생성하고 이를 비밀번호와 함께 암호화하여 저장한다. 이후 비밀번호 검증 시에도 같은 salt를 사용하여 입력받은 비밀번호를 암호화한 후, 저장된 암호화된 비밀번호와 비교하여 일치하는지 검증한다.

bcrypt는 암호화 강도를 선택할 수 있는 기능을 제공한다. 기본값은 10으로, 숫자가 클수록 강도가 높아지며 암호화에 소요되는 시간도 늘어난다. 보안을 위해 기본값 이상의 값을 권장한다.

## 사용법

```bash
yarn add bcrypt @types/bcrypt # nestjs는 타입스크립트가 기본이기 때문에 타입으로 설치
```

따로 module이나 main에 등록할 필요 없이 사용하고자 하는 파일에 불러오면 된다.

```typescript
import * as bcrypt from 'bcrypt';

// 암호화 후 저장
const someFN = async (userData:UserData) => {
	const hashPassword = await bcrypt.hash(userData.password,10)
	const saveData = {
    	email:userData.email,
        password: hashPassword,
    }
    // 정보 저장 로직
}

// 저장된 데이터를 통해 비밀번호 확인
const checkFN = async (userData:UserData) =>{
	const hashedPassword = // 저장된 정보 불러오는 로직

    // true or false
    const match = await bcrypt.compare(userData.password,hashedPassword)
    if(match) // 인증 후 로직
}
```

---

참조 : https://github.com/kelektiv/node.bcrypt.js#readme


nestjs use bcrypt


## 포스팅 시점 nestjs 버전 : 9.x.x

새로운 토이 프로젝트를 만들면서 백엔드를 구축할 프레임워크로 nestjs를 이용하기로 마음먹었다.

원래 사용하고 있던 javascript/typescript와 동일한 언어를 사용하기 때문에 백엔드 구축에 비교적 진입장벽이 낮다고 생각했기 때문에다.

# nest 작동순서

request -> controller -> service -> controller -> response 순으로 작동하나, DB와 관련된 일을 시키기 위해서는 repository를 생성해야한다고 한다. 즉,

request -> controller -> service -> repo\* -> service -> controller -> response
로 한 단계가 추가된다. (Repostitory pattern)

@EntityRepository를 통해 레포지토리를 설정해주는 방식이 많이 보였지만

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FlkldE%2FbtrUQbTjKZA%2FA6hFzyRy8SsueBbUk8cTA1%2Fimg.png)

현재 버전에서는 사용할 수 없어 다른 방법을 알아봤다.

## 기본 설정

config 설정

```typescript
// src/configs/typeorm.configs.ts

export const typeORMConfig: TypeOrmModuleOptions = {
  // Database Type
  type: "postgres", // 본인은 pg를 사용
  host: "localhost",
  port: 5432,
  username: "postgres",
  password: "password",
  database: "database",
  entities: [__dirname + "/../**/*.entity.{js,ts}"], // 해당 경로 + 엔티티이름.entity.{js.ts}로 된 엔티티를 이용
  // autoLoadEntities: true, // 위와 다르게 entity들 알아서 찾아줌
  synchronize: true, // @@@@@@@@ 배포할때 true 사용 시 데이터 삭제될 수 있음. production 단계에서는 필히 false로 해줄 것 권장 @@@@@@
};
```

config 설정 후 root 모듈에 import

```typescript
// app.module.ts

import { Module } from "@nestjs/common";
import { AppController } from "./app.controller";
import { PostlistModule } from "./postlist/postlist.module";
import { typeORMConfig } from "./configs/typeorm.configs";
import { TypeOrmModule } from "@nestjs/typeorm/dist";

@Module({
  imports: [TypeOrmModule.forRoot(typeORMConfig), PostlistModule],
  controllers: [AppController],
  providers: [],
})
export class AppModule {}
```

entity 생성

```typescript
// src/postlist/entities/postlist.entity.ts

import { BaseEntity, Column, PrimaryGeneratedColumn, Entity } from "typeorm";

@Entity()
export class Postlist extends BaseEntity {
  @PrimaryGeneratedColumn()
  id: number;

  @Column()
  title: string;

  @Column()
  content: string;

  @Column()
  nickname: string;

  @Column()
  imageUrl?: string;
}
```

> config 설정 시 entities에 이름을 ~~.entity.{js.ts} 로 설정해놓고, 정작 entity 파일 이름을 설정한 형식과 다르게 작성하면 [EntityMetadataNotFound] 에러를 띄우게 되기 때문에 설정한대로 이름을 지어줘야 한다.

참조 : https://github.com/typeorm/typeorm/issues/1327

## custumRepository 만들기

본인은 src에 database 디렉토리를 만들어, 데코레이터와 모듈을 그 안에 넣어줬다.

```typescript
// src/database/typeorm-ex.decorator.ts

import { SetMetadata } from "@nestjs/common";

export const TYPEORM_EX_CUSTOM_REPOSITORY = "TYPEORM_EX_CUSTOM_REPOSITORY";

export function CustomRepository(entity: Function): ClassDecorator {
  return SetMetadata(TYPEORM_EX_CUSTOM_REPOSITORY, entity);
}

// typeorm-ex.module.ts

import { DynamicModule, Provider } from "@nestjs/common";
import { getDataSourceToken } from "@nestjs/typeorm";
import { DataSource } from "typeorm";
import { TYPEORM_EX_CUSTOM_REPOSITORY } from "./typeorm-ex.decorator";

export class TypeOrmExModule {
  public static forCustomRepository<T extends new (...args: any[]) => any>(
    repositories: T[],
  ): DynamicModule {
    const providers: Provider[] = [];

    for (const repository of repositories) {
      const entity = Reflect.getMetadata(
        TYPEORM_EX_CUSTOM_REPOSITORY,
        repository,
      );

      if (!entity) {
        continue;
      }

      providers.push({
        inject: [getDataSourceToken()],
        provide: repository,
        useFactory: (dataSource: DataSource): typeof repository => {
          const baseRepository = dataSource.getRepository<any>(entity);
          return new repository(
            baseRepository.target,
            baseRepository.manager,
            baseRepository.queryRunner,
          );
        },
      });
    }

    return {
      exports: providers,
      module: TypeOrmExModule,
      providers,
    };
  }
}
```

## 사용할 repository 생성

```typescript
// src/postlist/repository/postlist.repository.ts

import { CustomRepository } from "src/database/typeorm-ex.decorator";
import { Repository } from "typeorm";
import { Postlist } from "../entities/postlist.entity";

@CustomRepository(Postlist)
export class PostlistRepository extends Repository<Postlist> {}
```

## module에 생성한 repository import

```typescript
// src/postlist/postlist.module.ts

import { Module } from "@nestjs/common";
import { PostlistController } from "./postlist.controller";
import { PostlistService } from "./postlist.service";
import { PostlistRepository } from "./repository/postlist.repository";
import { TypeOrmExModule } from "src/database/typeorm-ex.module";

@Module({
  imports: [TypeOrmExModule.forCustomRepository([PostlistRepository])],
  controllers: [PostlistController],
  providers: [PostlistService],
})
export class PostlistModule {}
```

### Module에 import 후 service 비즈니스 로직에만 repository를 넣어주면 된다.

```typescript
// src/postlist/postlist.service.ts

import { Injectable, NotFoundException } from "@nestjs/common";
import { UpdatePostDto } from "./dto/update-postlist.dto";

import { PostlistRepository } from "./repository/postlist.repository";
import { Postlist } from "./entities/postlist.entity";
import { CreatePostDto } from "./dto/create-postlist.dto";

@Injectable()
export class PostlistService {
  constructor(private readonly postlistRepository: PostlistRepository) {}

  async getAllPost(): Promise<Postlist[]> {
    const found = await this.postlistRepository.find();
    return found;
  }

  async getPostById(id: number): Promise<Postlist> {
    const found = await this.postlistRepository.findOne({ where: { id: id } });
    if (!found) {
      throw new NotFoundException(`Cannot find post with id ${id}`);
    }
    return found;
  }
}

// src/postlist/postlist.controller.ts

import { Body, Controller, Get, Param, Patch, Post } from "@nestjs/common";
import { CreatePostDto } from "./dto/create-postlist.dto";
import { PostlistService } from "./postlist.service";
import { UpdatePostDto } from "./dto/update-postlist.dto";
import { Delete } from "@nestjs/common/decorators";
import { Postlist } from "./entities/postlist.entity";

@Controller("postlist")
export class PostlistController {
  constructor(readonly postlistService: PostlistService) {}

  @Post()
  createOne(@Body() createPostDto: CreatePostDto): Promise<Postlist> {
    return this.postlistService.createPost(createPostDto);
  }

  @Get()
  getAll(): Promise<Postlist[]> {
    return this.postlistService.getAllPost();
  }

  @Get(":id")
  getOne(@Param("id") id: number): Promise<Postlist> {
    return this.postlistService.getPostById(id);
  }

  @Patch(":id")
  updateOne(
    @Param("id") id: number,
    @Body() updateData: UpdatePostDto,
  ): Promise<Postlist> {
    return this.postlistService.updatePost(id, updateData);
  }

  @Delete(":id")
  deleteOne(@Param("id") id: number): Promise<void> {
    return this.postlistService.deletePost(id);
  }
}
```

필요한 로직을 설정한 후 postman을 작동시켜주면 정상적으로 실행되는 것을 볼 수 있다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbMxspb%2FbtrUIZG6vWP%2F0dVetFuaUfkfuI9EXCKeN0%2Fimg.png)

nextjs와 동시에 작업하기 위해 nestjs 포트를 3001로 설정했지만, 보통은 nest 설치 시 app에 3000으로 설정된다.

![image](https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FcOfHG5%2FbtrUOQBYHjX%2FoGOqOJtiF2KbPiyKu9JCdK%2Fimg.png)

DB는 postgreSQL을 이용했다.
정상적으로 테이블에 있는 데이터가 추출되는 것이 잘 확인된다.

### 참고 :

https://orkhan.gitbook.io/typeorm/readme_ko

https://docs.nestjs.com/techniques/database


Entityrepository()를 대신한 Repository 생성