우분투 22.04에 Vue.JS 설치하는 방법

Vue.js는 인터랙티브한 사용자 인터페이스와 단일 페이지 애플리케이션을 만들기 위해 사용되는 자바스크립트 프레임워크입니다. AngularJS 프레임워크보다 가볍고 더 적응력이 뛰어납니다. 간단하고 유연하며 모듈화되어 있고, 성능이 뛰어나며 배우기 쉽고 애플리케이션 개발을 용이하게 하는 많은 도구와 라이브러리를 제공합니다. 기본 HTML, CSS 및 JavaScript를 알고 있다면 Vue.js로 웹 애플리케이션을 빠르게 구축할 수 있습니다.

이 가이드는 우분투 22.04에 Vue JS를 설치하는 방법을 보여줍니다.

전제 조건

HAProxy를 위한 우분투 22.04가 실행되는 서버.
모든 서버에 루트 비밀번호가 설정되어 있어야 합니다.

Node.js 설치

시작하기 전에 서버에 Node.js를 설치해야 합니다. 기본적으로 우분투 22.04의 기본 저장소에는 최신 버전의 Node.js가 포함되어 있지 않습니다. 따라서 Node 소스 저장소에서 설치해야 합니다.

먼저, 다음 명령어를 사용하여 필요한 종속성을 설치합니다:

apt install curl gnupg2 gnupg git wget -y

다음으로, 다음 명령어를 사용하여 Node 소스 저장소를 추가합니다:

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -

저장소가 추가되면 다음 명령어를 사용하여 Node.js를 설치할 수 있습니다:

apt install nodejs -y

Node.js가 설치되면 다음 명령어를 사용하여 Node.js 버전을 확인할 수 있습니다:

node --version

다음과 같은 출력이 표시됩니다:

v16.16.0

이제 다음 명령어를 사용하여 NPM을 최신 버전으로 업데이트합니다:

npm install npm@latest -g

다음 명령어로 NPM 버전을 확인할 수도 있습니다:

npm --version

다음과 같은 출력이 표시되어야 합니다:

8.13.2

Vue CLI 설치

이제 NPM을 사용하여 다음 명령어로 Vue CLI 패키지를 설치할 수 있습니다:

npm install -g @vue/cli

Vue가 설치되면 다음 명령어를 사용하여 Vue JS 버전을 확인할 수 있습니다:

vue --version

다음과 같은 출력이 표시되어야 합니다:

@vue/cli 5.0.8

Vue JS로 간단한 앱 만들기

이제 Vue CLI를 사용하여 애플리케이션을 쉽게 만들 수 있습니다. 다음 명령어를 실행하여 myapp이라는 샘플 애플리케이션을 만듭니다:

vue create myapp

다음과 같은 출력이 표시됩니다:

Vue CLI v5.0.8
?  Creating project in /root/myapp.
????  Initializing git repository...
??  Installing CLI plugins. This might take a while...


added 848 packages, and audited 849 packages in 24s

88 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
????  Invoking generators...
????  Installing additional dependencies...


added 95 packages, and audited 944 packages in 6s

98 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
?  Running completion hooks...

????  Generating README.md...

????  Successfully created project myapp.
????  Get started with the following commands:

 $ cd myapp
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

다음으로, myapp 디렉토리로 변경하고 다음 명령어를 사용하여 설치된 모든 파일과 디렉토리를 나열합니다:

cd myapp  
ls

다음과 같은 출력이 표시됩니다:

babel.config.js  jsconfig.json  node_modules  package.json  package-lock.json  public  README.md  src  vue.config.js

Vue JS 애플리케이션 시작

이제 다음 명령어를 실행하여 Vue JS 애플리케이션을 시작할 수 있습니다:

npm run serve

애플리케이션이 시작되면 다음과 같은 출력이 표시됩니다:

> [email protected] serve
> vue-cli-service serve

 INFO  Starting development server...

 DONE  Compiled successfully in 6469ms                                                                                              8:45:33 AM


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: unavailable

  Note that the development build is not optimized.
  To create a production build, run npm run build.

Vue JS 웹 인터페이스 접근

이 시점에서 Vue JS 애플리케이션이 설치되었고 포트 8080에서 수신 대기하고 있습니다. 이제 웹 브라우저를 열고 URL http://your-serevr-ip를 사용하여 Vue JS 애플리케이션에 접근할 수 있습니다. 다음 페이지에서 Vue JS 대시보드를 볼 수 있어야 합니다:

결론

이 게시물에서는 우분투 22.04에 Vue JS를 설치하는 방법을 설명했습니다. 이제 Vue JS 프레임워크를 사용하여 단일 페이지 애플리케이션을 구축할 수 있습니다. 질문이 있으시면 언제든지 문의해 주세요.

전제 조건

Node.js 설치

Vue CLI 설치

Vue JS로 간단한 앱 만들기

Vue JS 애플리케이션 시작

Vue JS 웹 인터페이스 접근

결론

새 게시물을 받은 편지함에서 받기