이 세 번째Opine 기사에서는 Opine CLI 을(를) 사용하여 웹 사이트 프로젝트 설정을 통해 폭발하는 방법을 살펴보겠습니다.

Prerequisites:

Objective: Start your own new website projects using the Opine CLI.

개요

이 문서에서는 Deno용 Opine CLI을 사용하여 웹 사이트의 기본 템플릿을 만드는 방법에 대해 설명합니다.

실제로 생성된 템플릿은 이 시리즈에서 다룬 것과 매우 유사합니다! 처음부터 프로젝트를 구축해 보고 싶다면 확인하는 것이 좋습니다.

이미 프로젝트 구조를 다루고 보기와 같은 개념을 설명했기 때문에 여기서는 주로 프로젝트를 부트스트랩하는 방법과 사용 가능한 다양한 옵션에 중점을 둘 것입니다.

오파인 CLI 사용

Denoscript installer commandlet를 사용하여 Opine CLI를 설치할 수 있습니다.

deno install -f -q --allow-read --allow-write --allow-net --unstable https://deno.land/x/[email protected]/opine-cli.ts

이 설치 명령은 지정된 CLI 플래그와 기본 모듈을 사용하여 Deno를 실행하는 작은 실행 가능한 셸 스크립트 래퍼를 생성합니다. 생성된 스크립트는 설치 루트의 bin 디렉토리에 배치됩니다. 사용되는 정확한 루트 디렉토리는 다음에 의해 결정됩니다.

--root 플래그(제공된 경우)

DENO_INSTALL_ROOT 환경 변수(설정된 경우).

$HOME/.deno .

Note you will need to add the installation directory to your path in order to invoke the CLI with providing a full directory path.

For example, add export PATH="$HOME/.deno/bin:$PATH" to your $HOME/.bashrc. Remember you will need to source this file or restart your shell / terminal for it to take effect!

이제 모든 셸에서 Opine CLI를 실행할 수 있습니다! 🎉 🎉

Opine CLI에는 몇 가지 옵션이 있으며 모두 보는 가장 쉬운 방법은 --help 또는 -h 플래그를 사용하는 것입니다.

> opine-cli --help

  Usage:   opine-cli [option] [dir]
  Version: v1.0.2                  

  Description:

    Opine's application generator.

  Options:

    -h, --help                      - Show this help.                            
    -V, --version                   - Show the version number for this program.  
    -v, --view     <engine:string>  - add view <engine> support (ejs|eta)        
    -g, --git                       - add .gitignore                             
    -f, --force                     - force on non-empty directory   

옵션이나 플래그 없이 CLI를 실행하기만 하면 기존 CSS, HTML 및 JS와 같은 보기 엔진 없이 현재 디렉터리에 Opine 프로젝트를 설정할 수 있습니다.

> opine-cli

   create : public/
   create : public/js/
   create : public/images/
   create : public/css/
   create : routes/
   create : public/index.html
   create : public/css/style.css
   create : routes/index.ts
   create : mod.ts
   create : routes/users.ts
   create : app.ts
   create : deps.ts

   run the app:
     $ deno run --allow-net --allow-read --allow-env mod.ts

CLI는 생성하는 모든 파일과 디렉토리를 나열하고 출력의 끝에서 애플리케이션을 실행할 수 있는 방법을 설명합니다.

CLI에 인수로 제공하여 사용할 디렉토리를 지정할 수도 있습니다(존재하지 않는 경우 생성됨).

> opine-cli hello-opine

   create : hello-opine/
   create : hello-opine/public/
   create : hello-opine/public/js/
   create : hello-opine/public/images/
   create : hello-opine/public/css/
   create : hello-opine/routes/
   create : hello-opine/public/index.html
   create : hello-opine/public/css/style.css
   create : hello-opine/routes/index.ts
   create : hello-opine/mod.ts
   create : hello-opine/routes/users.ts
   create : hello-opine/app.ts
   create : hello-opine/deps.ts

   change directory:
     $ cd hello-opine

   run the app:
     $ deno run --allow-net --allow-read --allow-env mod.ts

Opine CLI는 프로젝트 내에서 보기/템플릿 엔진을 설정하는 기능도 제공합니다. 보기 논리를 추가하려면 지원되는 보기 엔진 뒤에 --view 또는 -v 플래그를 제공하기만 하면 됩니다.

예를 들어 다음을 실행하여 Opine 웹 프로젝트에서 eta 보기 엔진을 사용하도록 선택할 수 있습니다.

> opine-cli opine-eta-example --view eta

   create : opine-eta-example/
   create : opine-eta-example/public/
   create : opine-eta-example/public/js/
   create : opine-eta-example/public/images/
   create : opine-eta-example/public/css/
   create : opine-eta-example/routes/
   create : opine-eta-example/views/
   create : opine-eta-example/routes/users.ts
   create : opine-eta-example/public/css/style.css
   create : opine-eta-example/mod.ts
   create : opine-eta-example/routes/index.ts
   create : opine-eta-example/views/error.eta
   create : opine-eta-example/app.ts
   create : opine-eta-example/views/index.eta
   create : opine-eta-example/deps.ts

   change directory:
     $ cd opine-eta-example

   run the app:
     $ deno run --allow-net --allow-read --allow-env --unstable mod.ts

--view 플래그를 추가하여 CLI가 템플릿과 함께 views 디렉토리를 도입하고 app.ts가 제공된 엔진을 사용하도록 자동으로 설정되는 방법에 주목하십시오.

애플리케이션 실행

CLI를 사용하여 ejs Deno 모듈을 통해 dejs 보기 템플릿을 사용하고 새./opine-ejs-example 디렉토리에 넣는 Opine 웹 애플리케이션을 빌드해 보겠습니다.

> opine-cli opine-ejs-example --view ejs

   create : opine-ejs-example/
   create : opine-ejs-example/public/
   create : opine-ejs-example/public/js/
   create : opine-ejs-example/public/images/
   create : opine-ejs-example/public/css/
   create : opine-ejs-example/public/css/style.css
   create : opine-ejs-example/routes/
   create : opine-ejs-example/routes/index.ts
   create : opine-ejs-example/routes/users.ts
   create : opine-ejs-example/views/
   create : opine-ejs-example/views/error.ejs
   create : opine-ejs-example/views/index.ejs
   create : opine-ejs-example/mod.ts
   create : opine-ejs-example/app.ts
   create : opine-ejs-example/deps.ts

   change directory:
     $ cd opine-ejs-example

   run the app:
     $ deno run --allow-net --allow-read --allow-env mod.ts

그런 다음 새 프로젝트 디렉토리로 이동합니다.

> cd opine-ejs-example

이제 제공된 명령을 사용하여 Opine 웹 애플리케이션을 실행할 수 있습니다.

> deno run --allow-net --allow-read --allow-env mod.ts

브라우저에서 http://localhost:3000/을 로드하여 앱을 확인해 보겠습니다. 다음과 같은 내용이 표시되어야 합니다.



놀라운! 🎉 🎉 이제 작동하고 실행 중인 Opine 애플리케이션이 있습니다. 잘 했어!


영감: 이 기사는 Express web framework 시리즈에서 몇 가지 포인터를 가져옵니다.