.gitignore : node_modules 추가
🪐 TypeScript
GTS
- Google의 TypeScript 스타일 가이드, TypeScript 개발 환경
$ npx gts init- 설치 후
package.json-devDependencies버전 확인
⇒ gts github -package.json-devDependencies를 설치된 것과 비교해보며 수정하기
// 아래와 같이 수정함
"devDependencies": {
"@types/node": "^16.0.0",
"gts": "^4.0.0",
"typescript": "^4.7.0"
}scripts추가
"scripts": {
...
"start": "node build/src/index.js", // 수정
},How it works
lint: Lints and checks for formatting problems.fix: Automatically fixes formatting and linting problems (if possible).clean: Removes output files.compile: Compiles the source code using TypeScript compiler.pretest,posttestandprepare: convenience integrations.
prepare는 이후에 Docker build를 할 때 에러가 발생하므로 삭제하는 것을 추천
package-lock.json삭제 후npm install로 재설치index.js삭제src/index.ts에index.js내용 적용
# 타입스크립트를 적용했으므로 @types/express 설치
$ npm i --save-dev @types/expresstsconfig.json-"compilerOptions":"esModuleInterop": true추가npm run compile,npm run server하면 이 전과 동일하게 "Hello World"가 보이지만 타입스크립트로 변경되어 사용되고 있다!
참고 링크
🪐 Docker
Container
- 컨테이너 기술을 사용하면 OS나 디렉토리, IP 주소 등과 같은 시스템 자원을 마치 각 애플리케이션이 점유하고 있는 것처럼 보이게 할 수 있다.
- 컨테이너 : 호스트 OS상에 논리적인 구획(컨테이너)를 만들고, 애플리케이션을 작동시키기 위해 필요한 리소스들을 하나로 모아, 마치 별도의 서버인 것처럼 사용할 수 있게 만든 것
Docker
- 인프라 환경을 컨테이너로 관리
- 애플리케이션의 실행에 필요한 모든 파일 및 디렉토리들을 컨테이너로 모아버리는 것
- Docker Image : 개발한 애플리케이션의 실행에 필요한 모든 것이 포함된 것. 이미지를 바탕으로 컨테이너를 가동 시킴
Dockerfile
- 인프라 구성을 기술한 파일. 즉, Docker 상에서 작동시킬 컨테이너의 구성 정보를 기술하기 위한 파일.
- 명령어
FROM: 베이스 이미지 지정RUN: 명령 실행CMD: 컨테이너 실행 명령COPY: 파일 복사WORKDIR: 작업 디렉토리
FROM node:18-slim
WORKDIR /usr/src/app
COPY package*.json ./
RUN npm install
COPY . ./
RUN npm run compile
RUN rm -rf ./src
CMD [ "npm", "start" ]참고 링크
🪐 Cloud Run Domain Mapping
- 도메인 구매 : namecheap을 통해 구매
- Cloud Run 도메인 매핑을 사용하여 커스텀 도메인 매핑
Google에서 도메인을 구입하지 않는 한 도메인을 사용하려면 도메인 소유권을 확인해야 합니다.
- 소유권 확인을 위해 웹마스터에서 속성 추가하기
- 도메인 구매 사이트에서 해당 도메인에 DNS TXT 레코드를 추가
- namecheap 기준 DNS TXT 레코드를 추가 방법
⇒ Account
⇒ Domain List
⇒ Advanced DNS
⇒ Add New Record
⇒ Host:@/ Value:DNS TXT 레코드를 추가
- 도메인 소유권 확인 후 Cloud Run ⇒ 커스텀 도메인 관리 ⇒ 매핑 추가
- 매핑할 서비스 선택
- 확인된 도메인 선택에 소유권이 확인된 도메인을 선택
- DNS 레코드 업데이트 : 도메인 구매한 사이트에서 해당 도메인에 DNS 레코드 추가
🪐 body-parser
- Request body를 파싱하여 지정한 형태로 바꿔주는 미들웨어
$ npm install body-parser
$ npm install @types/body-parser --save-dev - body-parser 설정
// src/index.ts
import bodyParser from 'body-parser';
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended: true}));참고 링크
🪐 nodemon / ts-node
nodemon
- 코드가 변하는 것을 감지하여 자동으로 서버를 다시 실행
$ npm install nodemon --save-dev package.json"scripts"에 명령어 추가
"scripts": {
...
"dev": "nodemon src/index.ts"
}ts-node
- TypeScript를 node에서 실행시켜주는 도구
$ npm install ts-node --save-dev 참고 링크
🪐 morgan
- Http Request의 로그를 볼 수 있게 도와주는 미들웨어
$ npm install morgan
$ npm install @types/morgan --save-dev - morgan 설정
// src/index.ts
import morgan from 'morgan';
app.use(morgan('combined'));morgan(format, options)
- Morgan logger middleware function는 지정된
format,options을 사용하여 생성 format: 미리 정의된 형식을 제공combined: 표준 Apache combined 로그 출력:remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length] ":referrer" ":user-agent"
common: 표준 Apache common 로그 출력:remote-addr - :remote-user [:date[clf]] ":method :url HTTP/:http-version" :status :res[content-length]
dev: 개발을 위해 Response staaus에 따라 색이 다른 축약된 로그 출력:method :url :status :response-time ms - :res[content-length]
short: 기본값보다 짧은 로그 출력(응답 시간 포함):remote-addr :remote-user :method :url HTTP/:http-version :status :res[content-length] - :response-time ms
tiny: 최소한의 로그 출력:method :url :status :res[content-length] - :response-time ms
참고 링크
🪐 Firebase Admin SDK
- SDK 추가
$ npm install firebase-admin --saveimport { initializeApp } from 'firebase-admin/app';-
SDK 초기화
-
비공개 키 파일 생성
서비스 계정의 비공개 키 파일을 생성하려면 다음 안내를 따르세요.
- Firebase Console에서 설정 > 서비스 계정을 엽니다.
- 새 비공개 키 생성을 클릭한 다음 키 생성을 클릭하여 확인합니다.
- 키가 들어 있는 JSON 파일을 안전하게 저장합니다.
-
환경변수 설정
GOOGLEAPPLICATIONCREDENTIALS 환경 변수를 서비스 계정 키가 포함된 JSON 파일의 파일 경로로 설정합니다. 이 변수는 현재 셸 세션에만 적용되므로 새 세션을 열면 변수를 다시 설정합니다.
export GOOGLE_APPLICATION_CREDENTIALS="/home/user/Downloads/service-account-file.json"
pwd로 현재 경로 확인 ⇒ 현재 경로에 파일명 추가하여 환경변수 설정
-
import {initializeApp} from 'firebase-admin/app';
initializeApp();
// 초기화가 정상적으로 되었는지 확인하기 위해 아래와 같이 코드 수정 후 다시 원상복귀
const firebaseApp = initializeApp();
console.log(firebaseApp);
🪐 Next.js with Docker
- Next.js는 vercel에 배포하는 것을 권장하지만, Node.js나 Docker를 사용하여 Self Hosting 할 수 있다.
Docker Image
- Install Docker on your machine
- Clone the with-docker example
- Build your container:
docker build -t nextjs-docker .- Run your container:
docker run -p 3000:3000 nextjs-docker
With Docker
- Next.js 예제 생성 : 기본적인 파일들이 미리 생성되어 있다.
npx create-next-app --example with-docker nextjs-docker
# or
yarn create next-app --example with-docker nextjs-docker
# or
pnpm create next-app --example with-docker nextjs-dockerDeploying to Google Cloud Run
- Install the Google Cloud SDK so you can use gcloud on the command line.
- Run
gcloud auth loginto log in to your account.- Create a new project in Google Cloud Run (e.g.
nextjs-docker). Ensure billing is turned on.- Build your container image using Cloud Build:
gcloud builds submit --tag gcr.io/PROJECT-ID/helloworld --project PROJECT-ID. This will also enable Cloud Build for your project.- Deploy to Cloud Run:
gcloud run deploy --image gcr.io/PROJECT-ID/helloworld --project PROJECT-ID --platform managed. Choose a region of your choice.
- Next.js 예제의 package.json에 scripts 추가
"scripts": { ... "gcloud:build": "gcloud builds submit --tag gcr.io/PROJECT-ID/helloworld --project PROJECT-ID", "gcloud:deploy": "gcloud run deploy --image gcr.io/PROJECT-ID/helloworld --project PROJECT-ID --platform managed" },
주의사항
COPY package.json yarn.lock ./
- Next.js 예제를 생성하면 기본적으로 생성된 Dockerfile에서
yarn을 가져가는 코드가 있다.
⇒yarn을 이용하세요..gitignore에yarn.lock이 포함되어 있어 Cloud Build를 할 때 에러가 발생
⇒.gitignore에서yarn.lock제거
