I love TypeScript, and I love Docker. Putting these two together, however, can be a giant pain in the ass.

오늘은 TypeScript/Node 프로젝트를 통해 매우 기본적인 다단계 Docker 설정을 완성하도록 안내해 드리겠습니다.
이 설정은 내가 이 기술 창고를 사용할 때 겪는 가장 큰 도전을 해결했다...내 TypeScript를 생산에서 자바스크립트로 컴파일하고 실행 중인 용기에서 개발할 수 있도록 합니다. 이 용기는 내 TypeScript 코드의 변경 사항을 감시합니다.
이 자습서의 모든 코드는 여기에서 찾을 수 있습니다:)

가스델 / TypeScript 노드 Docker

다시 로드된 dev 및 prod의 TypeScript+Node+Docker 설정

유튜브 좋아하세요?비디오 자습서를 보십시오.

1단계: TypeScript & Express를 사용하여 서버 만들기

TypeScript를 사용하여 간단한 Express 서버를 만들고 로컬에서 실행합니다(이후 dockerize!).
프로젝트 및 cd의 디렉토리를 만들려면 다음과 같이 하십시오.

mkdir ts-node-docker
cd ts-node-docker

노드 항목을 초기화하고 프롬프트가 표시될 때 필요한 값을 추가합니다(나는 입력을 혼합해서 모든 내용을 건너뛰었을 뿐입니다).

npm init

그런 다음 TypeScript를 개발자 종속성으로 설치합니다.

npm i typescript --save-dev

다운로드한 후 tsconfig를 만듭니다.json 파일:

npx tsc --init

지금 우리는 tsconfig가 있어야 한다.json은 out 프로젝트 디렉터리의 루트 디렉터리에서 다음 항목을 편집할 수 있습니다.

"baseUrl": "./src"
"target": "esnext"
"moduleResolution": "node"
"outdir": "./build"

베이스울이 TS에 알려줬어.ts 소스 코드 파일은 에서/src 폴더.
목표는 네가 좋아하는 어떤 버전의 JS가 될 수 있다. 나는 esnext를 선택한다.
노드 항목의 경우 moduleResolution을 node로 설정해야 합니다.
outdir는 TS 파일을 컴파일할 때 컴파일된 자바스크립트 코드를 어디에 두는지 알려줍니다.
다음은express를 설치하고 개발자에 의존하는 유형으로 삼겠습니다.

npm i --save express
npm i -D @types/express

좋습니다. 서버를 인코딩할 준비가 되어 있습니다.프로젝트의 루트 디렉터리에 src/폴더를 만들고 색인을 추가합니다.ts 파일.
색인에 있습니다.ts, 다음 코드를 추가합니다.

import express from 'express';

const app = express();
app.listen(4000, () => {
  console.log(`server running on port 4000`);
});

이것이 바로 서버를 시작해야 하는 모든 내용입니다. 그러나 지금은 서버를 실행하고 코드에 대한 변경 사항을 관찰해야 합니다.
이를 위해 다음과 같은 ts node 및 nodemon을 사용합니다.

npm i -D ts-node nodemon

nodemon이 있으면 코드가 실행될 때 파일을 볼 수 있고 tsnode는 ts로 작성된 노드 프로젝트를 쉽게 실행할 수 있습니다.
나는 설정 파일에 nodemon을 설정하는 것을 좋아하기 때문에 nodemon을 추가할 것이다.json 파일 및 다음 옵션을 추가합니다.

{
  "verbose": true,
  "ignore": [],
  "watch": ["src/**/*.ts"],
  "execMap": {
    "ts": "node --inspect=0.0.0.0:9229 --nolazy -r ts-node/register"
  }
}

여기의 관건은watch 명령 (nodemon이 어떤 파일을 감시해야 하는지 알려주는 것) 과execMap의ts 옵션입니다.
이것은 nodemon이 TS 파일을 처리하는 방법을 알려줍니다.우리는 node를 사용하여 그것을 실행하고 디버그 로고를 추가하며tsnode를 등록합니다.
자, 이제 가방에 스크립트를 추가할 수 있습니다.프로젝트를 시작하는 json을 사용합니다.계속해서 가방에 다음 내용을 추가합니다.json:

"scripts": {
    "start": "NODE_PATH=./build node build/index.js",
    "build": "tsc -p .",
    "dev": "nodemon src/index.ts",
}

dev 명령은nodemon을 사용하여 프로젝트를 시작합니다.build 명령은 우리의 코드를 자바스크립트로 컴파일하고 start 명령은 우리가 만든 프로젝트를 실행합니다.
NODE 경로를 지정하여 구축된 응용 프로그램 항목의 루트가 어디에 있는지 알려 줍니다.
이제 다음과 같이 애플리케이션을 핫 재로드 방식으로 실행할 수 있어야 합니다.

npm run dev 

위대하다이제 이 일을 기록합시다.🐳

2단계: Docker 개발 및 프로덕션 단계

Docker를 설치하지 않았다면 지금 설치하십시오.나는 또한 그들의 데스크톱 앱을 추천한다. 이 두 가지 앱은 모두 그들의 사이트에서 찾을 수 있다.
그런 다음 프로젝트 디렉토리의 루트 디렉토리에 Dockerfile을 추가하고 개발 단계에 다음 코드를 추가합니다.

FROM node:14 as base

WORKDIR /home/node/app

COPY package*.json ./

RUN npm i

COPY . .

이것은 노드 이미지를 가져와서 용기에 작업 디렉터리를 설정하고 가방을 복사합니다.json을 설치하고 모든 항목 코드를 용기에 복사합니다.
이제 같은 파일에 프로덕션 단계를 추가합니다.

FROM base as production

ENV NODE_PATH=./build

RUN npm run build

이것은 우리의 개발 절차를 확장하고 환경 변수를 설정하며 생산 과정에서 실행할 TS 코드를 구축했다.
개발이나 생산 구축을 실행하기 위한 명령을 추가하지 않았습니다. 이것이 바로 docker compose 파일의 용도입니다.
docker compose를 만듭니다.yml 파일 및 다음을 추가합니다.

version: '3.7'

services:
  ts-node-docker:
    build:
      context: .
      dockerfile: Dockerfile
      target: base
    volumes:
      - ./src:/home/node/app/src
      - ./nodemon.json:/home/node/app/nodemon.json
    container_name: ts-node-docker
    expose:
      - '4000'
    ports:
      - '4000:4000'
    command: npm run dev

이것은 tsnode docker라는 용기를 만들고 우리가 만든 dockerfile을 사용하며 구축 절차를 실행합니다. (대상 참조)
이것은 또한 우리의 원본 코드와nodemon 설정을 위해 볼륨을 만들었습니다. 열을 다시 불러올 수 있도록 사용해야 합니다.
마지막으로, 이것은 기계의 포트를 docker 용기에 비추는 것입니다. (이것은 우리가express로 설정한 같은 포트이어야 합니다.)
완성되면 우리는 도커의 이미지를 만들 수 있다.

docker-compose build

터미널에서 구축 절차를 볼 수 있을 것입니다.
그런 다음 컨테이너를 다음과 같이 실행할 수 있습니다.

docker-compose up -d

성공!이제 TypeScript 소스 코드에 대한 변경 사항을 받을 수 있는 실행 중인 컨테이너가 있어야 합니다.실행 중인 용기를 보기 위해 docker 데스크톱 프로그램을 사용하는 것을 강력히 권장합니다.

이렇게 컨테이너를 중지할 수 있습니다.

docker-compose down

현재 우리는 이 물건을 생산 중에 운행해야 하기 때문에, 단독 docker compose를 만듭니다.prod.yml은 다음과 같습니다.

version: '3.7'

services:
  ts-node-docker:
    build:
      target: production
    command: node build/index.js

이 파일은 우리의 첫 번째 docker compose 파일과 함께 사용되지만, 생산 과정에서 변경하고자 하는 명령을 덮어씁니다.
따라서 이 예에서는 Dockerfile의 생산 절차에 맞추어 노드 구축/인덱스를 실행하기만 하면 됩니다.npm가 dev를 실행하는 것이 아니라 js를 실행하면 프로젝트를 컴파일하기 시작할 수 있습니다.
컨테이너 생산을 시작하려면 다음을 실행하십시오.

docker-compose -f docker-compose.yml -f docker-compose.prod.yml up -d   

이것은 docker compose가 어떤 파일을 사용해야 하는지 알려 줍니다. 다음 파일은 앞 파일의 모든 절차를 덮어씁니다.
현재 구축된 응용 프로그램을 생산 중인 실행 방식에 따라 실행해야 합니다. 여기는 다시 불러올 필요가 없습니다.
마지막으로, 이 docker 명령을 모두 입력하는 것을 싫어하기 때문에 프로젝트의 루트 디렉터리에Makefile을 만들고 명령줄에서 실행할 수 있는 다음 명령을 추가합니다. (예: make up

up:
    docker-compose up -d

up-prod:
    docker-compose -f docker-compose.yml -f docker-compose.prod.yml up

down: 
    docker-compose down

만약 네가 성공한다면, 축하해, 고마워.이 두 가지 경외심을 불러일으키는 기술을 한데 모으려 할 때 사람들의 생활이 더욱 수월해지기를 바란다.
만약 네가 좋아한다면, 나도 나의 사이트에 강좌와 기술 관련 동영상을 발표할 것이다.
우리는 끊임없이 증가하는 과학 기술 관련Discord Channel이 있으니 언제든지 와서 보십시오.
즐거운 코딩!👨‍💻 🎉