node_modules와 안녕 바이바이. vno를 사용하여 Vue.js를 deno 환경에서 사용해보십시오.

소개

여러분은 Deno를 아십니까?
Node.js의 작가님이 새롭게 Node.js의 단점을 없애기 위해서 개발을 하고 있는 JS/TS의 런타임이 됩니다.
개인적으로 큰 장점으로는 기존 package.json, npm로 관리하고 있던 node_modules가 없어진 것, TypeScript가 표준으로 지원되고 있는 것을 들 수 있습니다.

Node.js에 대한 10개의 반성점

Deno 공식

vno는 그 Deno 런타임 환경에서 Vue.js를 움직일 수 있는 프레임워크로서 개발이 이루어지고 있는 OSS가 됩니다.
특징으로는, Vue2, 3이 서포트되고 있는 것, SFC의 번들 빌드의 서포트등을 들 수 있습니다.

InfoQ - vno

vno 공식

조속히 구축해 보자

조속하지만, 시험에 구축해 봅시다.
나의 GitHub 에도 샘플을 올리고 있으므로, 서둘러 분은 그쪽을 Clone 해 놀아 봐 주세요.

먼저 Dockerfile을 만들고 vno 프로젝트를 만들 수 있는 토대를 만들어 갑니다.
(이번 확장성을 갖게 하기 위해 DockerCompose도 준비하고 있습니다만, Dockerfile 단독으로도 문제 없습니다.)

Dockerfile

FROM debian:stable-slim
WORKDIR /app

RUN apt-get update && apt-get install -y \
    curl \
    zip \
    unzip \
    git \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/*

RUN curl -fsSL https://deno.land/x/install/install.sh | sh
ENV DENO_INSTALL="/root/.deno"
ENV PATH="$DENO_INSTALL/bin:$PATH"
RUN deno install --allow-net --unstable https://deno.land/x/vno/install/vno.ts

docker-compose.yml

version: '3'

services:

  app:
    build:
      context: ./app
      dockerfile: Dockerfile
    volumes:
      - ./app:/app
    ports:
      - 3000:3000

폴더 구성은 아래와 같은 형태입니다.


이제 terminal에서 vno 프로젝트를 만들어 보겠습니다.
※sample-project의 부분은 임의의 이름이 됩니다.

$ docker compose run app vno create sample-project

아래와 같은 형태로 질문이 들리므로, port 번호등 바꾸고 싶은 경우는 입력합시다.


프로젝트 작성이 완료되면 아래 그림과 같은 형태로 폴더와 파일이 생성됩니다.


여기까지 한가지의 구축은 끝났습니다.
다음은 개발을 해 나가기 위한 환경을 정돈해 갑시다.

개발을 하기 위한 환경 만들기

이번 DockerCompose를 사용하고 있으므로, docker compose up -d를 하면 그대로 상승 상태로 해 두고 싶습니다.
따라서 Dockerfile을 변경합니다. (vno run dev를 넣어 라이브 로드 할 수 있습니다.)
※Dockerfile 단체이면, port를 EXPOSE해 주세요.

Dockerfile

FROM debian:stable-slim
WORKDIR /app

RUN apt-get update && apt-get install -y \
    curl \
    zip \
    unzip \
    git \
 && apt-get clean \
 && rm -rf /var/lib/apt/lists/*

RUN curl -fsSL https://deno.land/x/install/install.sh | sh
ENV DENO_INSTALL="/root/.deno"
ENV PATH="$DENO_INSTALL/bin:$PATH"
RUN deno install --allow-net --unstable https://deno.land/x/vno/install/vno.ts
WORKDIR /app/sample-project
CMD deno run --allow-read --allow-write --allow-net --unstable https://deno.land/x/vno/install/vno.ts run dev

실제로 확인해 보기

수정을 한 후 아래 명령을 입력하여 반영되었는지 확인합시다.

$ docker compose up -d --build

일어나면 브라우저를 확인해 봅시다.
아래와 같은 샘플 프로젝트를 볼 수 있습니다.

마지막으로

이번에는 시험에 docker를 이용하여 vno와 deno 환경을 만들어 갔습니다.
아직 vno는 방금 나왔고 앞으로의 프레임 워크이지만,
향후 성장이 기대되는 프레임워크이기도 합니다.
React.js계 쿠마에서도 Aleph 되는 것이 나오고 있거나,
2021년 이후 프런트엔드의 트렌드가 더욱 바뀔 것으로 예상됩니다.
아직도 모든 프레임 워크는 개발 도상이지만,
시험을 만져 보면 재미있을지도 모릅니다.
여기까지 기사를 읽어 주셔서 감사합니다!
※좋으면 GitHub 의 팔로우 잘 부탁드립니다!