코드 기어 Code Gear - 개발 강좌

Nuxtjs에서 날짜를 그냥 뿌려주면 다음과 같은 형식으로 나타나게 됩니다.

2022-05-13T22:55:12.000Z

이것을 다음과 같은 형식으로 보여주는 방법에 대해 알아보겠습니다.

2022/05/14

순서는 다음과 같습니다.

• nuxt.config.js에 필터 추가
• plugin 폴더에 filter.js 파일 생성
• vue에서 필터 사용

nuxt.config.js에 필터 추가

nuxt.config.js 파일에서 plugins: [] 에 다음 코드를 추가합니다.

plugins: [
   '~/plugins/filter.js',
],

plugin 폴더에 filter.js 파일 생성

plugin 폴더에 filter.js 파일을 생성하고 다음 코드를 입력하고 저장합니다.

import Vue from 'vue';
import moment from 'moment';

Vue.filter('formatDate', (value) => {
    return moment(String(value)).format('YYYY/MM/DD');
})

vue에서 필터 사용

.vue 파일에서 다음과 같이 입력합니다.

{{createdAt | formatDate}}

createdAt 이라는 필드의 값을 formatDate라는 필터를 적용하라는 뜻입니다.
이렇게 하면 다음과 같은 결과가 나오는 걸 확인 할 수 있습니다.

2022/05/14

다음은 이 글의 유튜브 영상입니다.

https://youtu.be/E3i9qt0SS-I

프로젝트를 진행할때 많은 시간을 들여야 하는 것 중에 하나가 바로 배포입니다.

형상관리(Git)에 커밋을 하고, 서버에 파일을 업로드 하고, 서버를 리스타트 하는 과정들을 수작업으로 반복하다 보면 여간 불편한게 아니죠.

이럴때 자동 배포 기능을 만들면 개발 PC에서 커밋하는 것만으로도 배포를 할 수 있습니다. 그럼 나머지 시간들은 다시 개발을 하거나 조금 쉴 수 있는 여유가 생기겠죠?

우선 전체적인 구성은 다음과 같습니다.

1. 로컬 PC에서 개발을 한 후 Github에 Push를 합니다.
2. Github Repository 특정 branch에 push가 되면 Github Action이 동작을 시작합니다.
3. Github Actions가 Github Container Registry에 소스를 받은 후 Docker 이미지로 빌드를 합니다.
4. 빌드된 이미지를 EC2에 등록된 Runner가 복사합니다.
5. 기존 이미지를 삭제하고 새로운 이미지로 실행을 합니다.

환경

• 프론트 : Vuejs (Nuxt)
• 형상관리 : Git (Github)
• 빌드 : Docker (Github Action)
• 서버 : Linux (AWS EC2 micro)

* nodejs, git, docker는 기본적으로 설치되어 있어야 합니다.

순서

• Github 저장소 생성
• 프로젝트 원격 저장소 클론
• Nuxt 프로젝트 생성
• Docker로 로컬 테스트
• Github Actions
• AWS EC2 생성 및 Docker 설치
• 자동 배포 테스트

Github 저장소 생성 및 연결

www.github.com 에서 아래와 같이 저장소를 만듭니다.

• Repository name은 프로젝트명과 동일하게 생성합니다.
• Repository는 아무나 사용할 수 없도록 private으로 만듭니다.
• 주의하실 점은 Owner명에 대문자가 들어가 있으면 안됩니다.
• Github Action에서 도커빌드시에 대문자를 쓸 수 없다는 오류가 납니다.

프로젝트 원격 저장소 클론

원격 저장소를 local PC로 클론합니다.

• 저는 github desktop을 이용했습니다.
• git 명령어 또는 다른 프로그램을 사용하셔도 됩니다.

• 우측 상단의 아래 화살표를 클릭합니다.

• 우측 상단의 Add 버튼을 누르고 clone repository를 선택합니다.

• Repository를 선택하고 Clone 버튼을 클릭하면 로컬PC에 폴더가 생성됩니다.

Vue (Nuxt) 프로젝트 생성

Clone 받은 폴더로 이동한 후 다음과 같이 Nuxt 프로젝트를 생성합니다. 

• 선택항목은 모두 자동으로 선택합니다.

npx create-nuxt-app nuxt-auto-deploy

프로젝트 생성이 완료되면 생성된 모든 파일을 상위 폴더로 옮겨줍니다.

cd nuxt-auto-deploy
mv * ..

다시 상위 폴더로 이동하여 비어있는 nuxt-auto-deploy 폴더를 삭제합니다.

cd ..
rm -Rf nuxt-auto-deploy

다음과 같이 프로젝트를 실행합니다.

npm run dev 또는 yarn dev

실행이 완료되면 브라우저에서 http://localhost:3000으로 실행 화면을 확인할 수 있습니다.

확인이 되었으면 ctrl+C 키를 눌러 프로젝트 실행을 종료합니다.

Docker로 로컬 테스트

Docker 이미지를 만들기 위해 프로젝트 루트에 Dockerfile을 아래와 같이 생성합니다.

FROM node:14.19.0

RUN mkdir -p /app
WORKDIR /app
ADD . /app/

RUN rm yarn.lock || true
RUN rm package-lock.json || true
RUN yarn
RUN yarn build

ENV HOST 0.0.0.0
EXPOSE 3000

CMD [ "yarn", "start"]

• FROM node:14.19.0 : nodejs 14.19.0 버전의 이미지를 받아서 docker image를 생성합니다.
• RUN mkdir -p /app : app 폴더를 생성합니다.
• ADD . /app/ : 현재 폴더의 모든것을 생성된 app 폴더에 복사합니다.
• RUN rm ... || true : 파일 삭제. 뒤의 "|| true" 는 파일이 없을 경우 오류로 인해 실행이 중단되지 않게 하기 위해 추가합니다.
• RUN yarn build : nuxt 프로젝트를 빌드합니다.
• ENV HOST 0.0.0.0 : 모든 IP를 개방합니다.
• EXPOSE 3000 : 3000번 포트를 개방합니다.
• CMD ["yarn", "start"] : yarn start 명령을 실행합니다.

Docker 이미지 생성시 불필요한 파일을 제외하도록 루트 폴더에 .dockerignore 파일을 생성합니다.

node_modules/
dist/

Dockerfile을 저장하고 다음 명령으로 이미지를 생성 합니다.

docker build --tag nuxt-auto-deploy:0.0.1 .

Docker 이미지를 실행합니다.

docker run --name nuxt-auto-deploy -d -p 3000:3000 nuxt-auto-deploy:0.0.1

• --name 뒤의 이름(nuxt-auto-deploy)은 도커 컨테이너명이고,
• 뒤의 nuxt-auto-deploy:0.0.1은 docker image명과 tag명입니다.

localhost:3000으로 접속하면 아까와 동일한 화면을 확인할 수 있습니다.

Docker 테스트가 모두 완료되었으므로 코드를 github에 push 합니다.

Github Actions 

Github Access Token 발급
github에 접속한 후 계정에서 settings 메뉴로 이동합니다.

왼쪽 메뉴 하단의 Developer settings를 선택합니다.

왼쪽 메뉴에서 Personal access tokens를 선택하고, Generate new token을 선택합니다.

토큰의 유효기간과 권한을 설정합니다.

• 유효기간은 최대 1년까지 가능합니다.
• 권한은 workflow, write:packages, delete:packages를 선택합니다.

하단의 generate 버튼을 클릭하면 토큰이 생성됩니다.

생성된 토큰을 복사하여 Repository-Settings-Secret-Actions에 등록합니다.

레파지토리의 Actions 탭으로 이동하여 "set up a workfolow yourself"를 클릭합니다.

아래와 같이 workflow 파일을 작성합니다.

이것은 Github Container Registry를 이용해서 docker를 빌드하고 서버에 푸쉬해주는 역할을 합니다.

• 아래 블로그를 참조하여 작성하였으며 자세한 내용은 해당 블로그를 참고해주세요.
• https://velog.io/@soosungp33/Github-Actions%EC%9C%BC%EB%A1%9C-AWS-EC2%EC%97%90-CICD-%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0

다음은 workflow 파일입니다.( .github/workflows/main.yml)

name: CI/CD Docker

# 트리거를 수행할 브랜치를 지정합니다.
on:
  push:
    branches: [ main ]

# 환경설정
env:
  DOCKER_IMAGE: ghcr.io/${{ github.actor }}/nuxt-auto-deploy
  VERSION: ${{ github.sha }}
  NAME: go_cicd

jobs:
  # 빌드 Job
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      # github repository에서 checkout
      - uses: actions/checkout@v2
      # docker build 수행
      - name: Set up docker buildx
        id: buildx
        uses: docker/setup-buildx-action@v1
      - name: Cache docker layers
        uses: actions/cache@v2
        with:
          path: /tmp/.buildx-cache
          key: ${{ runner.os }}-buildx-${{ env.VERSION }}
          restore-keys: |
            ${{ runner.os }}-buildx-
      # GitHub 컨테이너 레지스트리에 로그인 후 빌드 & 푸시
      - name: Login to ghcr
        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GITHUB_TOKEN }}
      - name: Build and push
        id: docker_build
        uses: docker/build-push-action@v2
        with:
          builder: ${{ steps.buildx.outputs.name }}
          push: true
          tags: ${{ env.DOCKER_IMAGE }}:latest
  # 배포 Job
  deploy:
    needs: build  # build 후에 실행되도록 정의
    name: Deploy
    runs-on: [ self-hosted, label-go ] # AWS ./configure에서 사용할 label명
    steps:
      - name: Login to ghcr
        uses: docker/login-action@v1
        with:
          registry: ghcr.io
          username: ${{ github.repository_owner }}
          password: ${{ secrets.GITHUB_TOKEN }}
      # 3000 -> 80 포트로 수행하도록 지정
      - name: Docker run
        run: |
          docker stop ${{ env.NAME }} && docker rm ${{ env.NAME }} && docker rmi ${{ env.DOCKER_IMAGE }}:latest
          docker run -d -p 80:3000 --name go_cicd --restart always ${{ env.DOCKER_IMAGE }}:latest

commit 버튼을 클릭하면 다음과 같이 파일이 생성됩니다.

.github/workflows/main.yml

AWS EC2 생성 및 Docker 설치

이제 자동 배포가 적용될 서버를 만듭니다.

AWS console에 로그인 한 후 EC2 서비스로 이동합니다.

인스턴스 시작 버튼을 클릭합니다.

무료로 사용할 수 있는 Amazon Linux 2 AMI를 선택합니다.

t2.micro를 선택하고 검토및시작 버튼을 클릭합니다.

보안그룹 편집을 선택합니다.

규칙추가 버튼을 누르고 80번 port를 추가한 후 검토및시작 버튼을 클릭합니다.

인스턴스 실행이 완료되면 해당 인스턴스를 체크하고 연결을 클릭합니다.

SSH 클라이언트를 클릭하면 접속 방법이 나옵니다.

터미널을 이용해 ssh로 접속을 합니다.

AWS에 Docker 설치

아래 내용을 참조해서 Docker를 설치합니다.

https://docs.aws.amazon.com/ko_kr/AmazonECS/latest/developerguide/create-container-image.html#create-container-image-install-docker

AWS에 Github Runner 설치

github repository의 settings 탭에서 Runner를 선택합니다.

Runners / Create self-hosted runner를 선택하고, Linux를 선택합니다.

Architecture는 x64로 하고 Download 항목을 한라인씩 복사해서 EC2에서 실행합니다.

./config.sh 문을 실행하면 다음과 같이 입력을 요청합니다.

• Enter the name of the runner group to add this runner to : 엔터
• Enter the name of runner : 엔터
• Enter any additional label : label-go (워크플로우 yml에 작성했던 라벨명
• Enter name of work folder : 엔터

./run.sh는 다음과 같이 백그라운드로 실행을 합니다.

nohup ./run.sh &

• tail -f nohup.out 명령을 실행하면 ec2상의 빌드 로그를 확인할 수 있습니다.

Runner 셋팅이 끝나면 github의 Settings - Actions - Runner 메뉴에서 다음과 같이 등록된것을 확인할 수 있습니다.

자동 배포 테스트

이제 소스를 수정하고 push를 하면 다음과 같이 빌드가 실행이 됩니다. 

해당 빌드를 클릭하면 세부 정보를 확인할 수 있습니다.

build와 Deploy가 나타나고, 실행되는 것을 확인 할 수 있습니다.

Build 또는 Deploy를 누르면 세부 실행 내역을 볼 수 있습니다.

Deploy가 완료되면 다음과 같은 화면을 볼 수 있습니다.

EC2 인스턴스의 공인 IP를 확인합니다.

브라우저에 아이피를 입력하면 다음과 같은 결과를 확인할 수 있습니다.

이제 Push를 하면 서버에 자동 배포가 되는 것을 확인할 수 있습니다.

branch를 하나 더 만들어서 (예 : develop) 개발시에 사용하고,
main으로 merge 할 때 자동으로 배포되도록 하는 것도 가능합니다.

Vue.js를 사용해서 일렉트론 앱을 만드는 법에 대해 알아봅니다.

Vue CLI 설치

우선 Vue cli를 전역으로 설치합니다.

• 기존 vue/cli가 @vue/cli로 변경되었습니다.
• 이전버전이 설치되어 있다면 삭제 후에 설치해 주세요(npm uninstall vue/cli)

npm i -g @vue/cli

설치가 완료되면 다음 명령으로 설치 버전을 확인합니다.

vue --version

Vue 프로젝트 생성

이제 vue 프로젝트를 만듭니다.

• 프로젝트명 : elec-vue

vue create elec-vue

• Vue 버전 선택 : 최신 버전인 Vue 3를 선택합니다.

• 아래와 같이 설치가 진행됩니다.

• 잠시 후 설치가 완료됩니다.

• 다음 명령어로 프로젝트를 실행합니다.

yarn serve

• http://localhost:8080으로 접속하면 다음과 같은 화면이 나옵니다.

• ctrl + C를 눌러 실행을 종료합니다.

프로젝트에 Electron Builder 추가

Electron Builder는 기존 프로젝트를 Electron으로 바꿔주고 쉽게 build를 할 수 있게 돕습니다.

Vue CLI Plugin으로 제공하는 Electron을 사용하면 쉽게 설치가 가능합니다.

https://nklayman.github.io/vue-cli-plugin-electron-builder/

• 다음 명령으로 Electron Builder를 추가합니다.

vue add electron-builder

• Electron 버전 선택 : 13.0.0

• 설치가 완료되면 package.json에 다음과 같이 스크립트가 추가됩니다.'

Electron 실행

• 이제 Electron이 추가된 프로젝트를 실행합니다.(package.json 참고)

yarn electron:serve

• 실행 화면은 다음과 같습니다.

Electron Build

• 다음 명령으로 App을 Build 할 수 있습니다.

yarn electron:build

• 빌드가 완료되면 다음과 같이 dist_electron 폴더에 실행 파일이 생성됩니다.
  • 맥의 경우 dmg 파일로, 윈도우의 경우는 exe 파일로 생성됩니다.

• 생성된 실행파일을 더블클릭하면 다음과 같이 Application이 실행됩니다.

이렇게 vue 프로젝트에 electron builder를 추가하면 쉽게 electron+vue 프로젝트를 만들 수 있습니다.

이 글의 동영상 강의입니다.

https://youtu.be/zjkaDU3syO8

완성 소스는 github 링크를 참조하세요.

https://github.com/CodeGearGit/nest-sample

환경 설정(Configuration)

Nestjs 프로젝트 실행시에 미리 정의된 환경설정을 읽어와서 실행합니다.

이때 환경변수를 통해서 가져오는 것과 설정파일을 통해 가져오는 것이 있습니다.

• 환경변수
  • 보안상 중요한 내용을 코드에 노출하지 않기 위해 사용.
  • 개발시에는 .env 파일을 이용해서 관리.
  • .env는 .gitignore에 추가해서 서버에 배포되지 않게 합니다.
  • 서버에서는 프로파일에 export로 정의.
  • AWS의 ECS 같은 경우는 작업정의에서 정의.
• 설정파일
  • 개발/운영등의 환경에 맞는 설정을 다르게 사용하기 위해 사용.
  • yaml 형식의 파일을 사용.

Nestjs Config

Nestjs에서는 설정 파일을 쉽게 관리할 수 있도록 @nestjs/config 패키지를 제공합니다.

@nestjs/config 패키지는 dotenv를 포함하고 있으므로 따로 설치하지 않아도 됩니다.

다음 명령을 사용해 패키지를 설치합니다.

npm i @nestjs/config

다음은 AppModule에서 config를 사용할 수 있도록 ConfigModule을 import 합니다.

• isGlobal option은 다른 모듈에서 config를 사용할 수 있도록 global로 설정을 합니다.

src/app.module.ts

import { ConfigModule } from '@nestjs/config';
...

@Module({
  imports: [
    ConfigModule.forRoot({
      isGlobal: true
    }),
    ....]
...

환경 변수 정의

프로젝트 루트 폴더에 .env를 만들고 다음과 같이 작성을 합니다.

NODE_ENV=development
NODE_SERVER_PORT=3000

main.ts 파일에서 다음과 같이 사용할 수 있습니다.

const port = process.env.NODE_SERVER_PORT
...
await app.listen(port);
logger.log(`Application listening on port ${port}`);

환경변수 테스트

서버를 실행해서 port를 읽어오는지 확인합니다.

npm run start

ConfigService 사용하기

이제 ConfigService를 사용하도록 main.ts 를 변경합니다.

• @nestjs/config의 ConfigService를 사용합니다.
• configService.get('NODE_SERVER_PORT')를 사용하여 port를 읽어옵니다.

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as cookieParser from 'cookie-parser';
import { ConfigService } from "@nestjs/config";

async function bootstrap() {
  const app = await NestFactory.create(AppModule);
  app.use(cookieParser());
  const configService = app.get(ConfigService);
  const port = configService.get('NODE_SERVER_PORT');
  await app.listen(port);
  console.log(`Application listening on port ${port}`);
}
bootstrap();

서버를 실행해보면 이전과 동일하게 서버가 올라갑니다.

ConfigService를 다른 곳에서 사용하시려면 construtor 추가하면 됩니다.

import { ConfigService } from '@nestjs/config';
...
constructor(private configService: ConfigService);
...
configService.get('...');

Custom Configuration - 개발 / 운영 설정 파일 분리

yaml 파일 처리를 위해 js-yaml 패키지를 설치합니다.

npm i js-yaml @types/js-yaml

config 폴더를 만들고 다음과 같이 파일을 추가합니다.

- 테스트를 위해 개발/운영 각각 포트를 다르게 주었습니다.

• src/config/production.yaml

server:
  port: 3001

• src/config/development.yaml

server:
  port: 3002

config/config.ts 파일을 다음과 같이 만듭니다.

- 환경변수의 NODE_ENV가 'production'일 경우는 production.yaml을 읽고

- 그외의 경우는 development.yaml을 읽게 합니다.

• src/config/config.ts

import { readFileSync } from 'fs';
import * as yaml from 'js-yaml';
import { join } from 'path';

const YAML_CONFIG_PROD = 'production.yaml';
const YAML_CONFIG_DEV = 'development.yaml';

export default () => {
  return yaml.load(
      (process.env.NODE_ENV==='production')?
        readFileSync(join(__dirname, YAML_CONFIG_PROD), 'utf8')
      : readFileSync(join(__dirname, YAML_CONFIG_DEV), 'utf8'),
  ) as Record<string, any>;
};

AppModule에서 config.ts 정보를 가져옵니다.

import config from './config/config';
...
@Module({
  imports: [
    ConfigModule.forRoot({
      load: [config],
      isGlobal: true
    }),...

main.ts에서 config를 이용해 포트를 읽어오도록 변경합니다.

const configService = app.get(ConfigService);
const port = configService.get<string>('server.port');

yaml은 컴파일시에 dist 폴더로 copy가 되지 않으므로 파일을 찾을 수 없습니다.

package.json에서 script를 이용해 yaml을 copy하기 위해 다음 패키지를 설치합니다.

npm i cpx

package.json을 다음과 같이 파일 복사 스크립트를 추가합니다.

- scripts에 "copy-files"를 아래와 같이 추가합니다.

- "copy-files": "cpx \"src/config/*.yaml\" dist/config/",

- start 및 build 스크립트에 "npm run copy-files" 를 추가합니다.

...
"scripts": {
    "copy-files": "cpx \"src/config/*.yaml\" dist/config/",
    "prebuild": "rimraf dist",
    "build": "npm run copy-files && nest build",
    "format": "prettier --write \"src/**/*.ts\" \"test/**/*.ts\"",
    "start": "npm run copy-files && nest start",
    "start:dev": "npm run copy-files && nest start --watch",
    "start:debug": "npm run copy-files && nest start --debug --watch",
    "start:prod": "npm run copy-files && node dist/main",
...

프로젝트를 실행합니다.

npm run start:dev

.env의 "NODE_ENV=development"일 경우에는 3002번 포트로 서버가 실행됩니다.

.env의 "NODE_ENV=production"일 경우에는 3001번 포트로 서버가 실행됩니다.

이렇게 환경 설정파일을 분리해서 개발과 운영의 환경을 다르게 설정할 수 있습니다.

요즘은 유튜브에 좋은 개발 강의가 많아서, 프로그래밍을 배우고자 하시는 분들에게 너무 좋은 환경이 된것 같습니다.

반면 유튜브를 통해 처음 개발 강의를 배우고자 하는 분들은 어떤 강의를 봐야 하는지, 어떻게 찾아야 하는지가 어려운 점이죠.

그래서 제가 자주 보는 개발자 유튜버를 소개해 드리고자 합니다. 

여기 소개하는 분들은 제 나름대로 엄선한 수준 높은 강의를 제공하는 분들이고, 저는 단순 구독자 입장에서 소개 드립니다.

이 글은 앞으로도 계속 업데이트 하도록 하겠습니다.

생활코딩

• 주제 : 일반인도 배울 수 있는 코딩
• 특징
  • 일반인도도 이해하기 쉽게 개념과 샘플을 잘 만들어진 영상으로 제공.
  • 전문 강사로 활동하시는 이고잉님이 진행하는 채널.
  • 새로운 개념을 배울때 아직도 찾아보는 곳.
  • 처음 프로그래밍을 배우시는 분에게 적극 추천.
  • 커리큘럼을 마인드맵의 노드 형식으로 보여주는 사이트가 있어 한눈에 파악할 수 있음.
    • https://seomal.com/map/1

https://www.youtube.com/channel/UCvc8kv-i5fvFTJBFAk6n1SA

드림코딩 by 엘리

• 주제 : 프론트엔드 (그외에도 다양)
• 특징
  • 초보 개발자도 이해하기 쉽게 개념과 샘플을 잘 설명해 줌.
  • 미국에 살고 있음(영어 발음 굿^^).
  • 영상 편집을 잘해서 보기가 너무 좋음.
  • 별도의 아카데미도 운영하고 있음.

• 채널 : https://www.youtube.com/channel/UC_4u-bXaba7yrRz_6x6kb_w

John Ahn

• 주제 : 백엔드 + 프론트엔드
• 특징
  • 백엔드와 프론트엔드 강의가 모두 있어 풀스택 개발을 배우고자 할 경우 도움이 됨.
  • 같은 강의를 영어 버전으로도 제공함.(영어를 잘 하심)
  • 개인적으로 NestJS 강의를 찾다 발견했고, 가장 좋은 강의인 것 같음.
• 채널 : https://www.youtube.com/channel/UCFyXA9x8lpL3EYWeYhj4C4Q

노마드 코더

• 주제 : 프로그램 트렌드
• 특징 
  • 정말 빠르게 최신 트렌드에 대해 알려줌. (NFT등) 
  • 영어로 강의하지만 한국어 자막이 모두 있음.
  • 별도의 아카데미를 운영 중임.
• 채널 : https://www.youtube.com/c/%EB%85%B8%EB%A7%88%EB%93%9C%EC%BD%94%EB%8D%94NomadCoders

여러분의 개발자의 여정에 많은 도움이 되시길 바랍니다.