우분투에서 컨테이너를 만들고
컨테이너 안에서 vue 개발 환경을 세팅하고
테스트 프로젝트를 만들고
테스트를 해보자!
기본 환경 정보
vue 프로젝트를 하기 위해 환경 세팅을 하려고 한다. .
이제 막 공부를 하는 거라서 이것저것 프로젝트 많이 하고 꼬일 거 같아서 도커에 올려서 하기로 했다 !!!
도커도 배운지 얼마 안 돼서 마스터 하려면 열심히 써야 함 !!!
쨋든, 내 로우 환경은 우분투 22.04! 정보는 아래와 같다
Distributor ID: Ubuntu
Description: Ubuntu 22.04.5 LTS
Release: 22.04
Codename: jammy
컨테이너 생성
작업 디렉터리를 만들고 컨테이너를 생성하자
나는 vue_tmp라는 이름으로 작업 디렉터리를 만들었다
mkdir vue_tmp
작업 디렉터리로 옮겨 가자
cd vue_tmp
이제 도커 컨테이너를 만들어야 하는데 편하게 하기 위해 Dokerfile을 만들자
먼저 우분투 터미널에서 Dokerfile 작성하기
vi Dokerfile
도커 파일 안에 아래 내용 작성하기
(파일 내용을 작성할 땐 i를 누르고 아래 내용 복붙)
FROM ubuntu:22.04 ENV DEBIAN_FRONTEND=noninteractive # 필수 패키지만 설치 RUN apt-get update && apt-get install -y \ curl wget vim nano ca-certificates \ && rm -rf /var/lib/apt/lists/* WORKDIR /vue_tmp # Vite dev 서버 포트 노출 (기본 5173) EXPOSE 5173
작성이 끝났으면 :wq로 저장하고 나오기!
이번에는 도커 이미지를 빌드해보자
docker build -t vue_img .
위 뜻은 vue_img라는 이름으로 도커 이미지를 빌드한다는 의미이다
doker images [ | grep vue_img ]
docker images라고 입력하면 만든 도커 이미지들이 나오는데 내가 원하는 것만 찾으려면 grep 사용하기!
이번에는 만든 이미지를 가지고 컨테이너를 만들어보자
docker run -it --name vuefront -p 8864:5173 -v "$PWD":/vue_tmp vue_img bash
--name 옵션은 컨테이너 이름
-p 8864:5173 옵션은 외부 접근 포트 8864를 컨테이너 내부 포트 5173으로 연결하겠다는 의미
vue는 프론트엔드 언어이기 때문에 웹 만들테고 테스트를 하면서 컨테이너 내부의 웹 파일을 보기 위해서는 외부 접속 포트가 있어야 한다..
8853는 그냥 정한 숫자라서 원하는 걸로 바꿔도 된다!
즉, 컨테이너 외부에서 localhost:8864로 접속하면 알아서 컨테이너 내부 포트인 5173 즉, vue 포트로 포워딩 되면서 웹페이지가 뜬다는 뜻!
-v "$PWD":/vue_tmp 는 컨테이너 내부에 만들어지는 vue_tmp라는 workdir을 현재 작업중인 디렉토리에 연결한다는 뜻
이렇게 하면 컨테이너 생성 + 진입까지 완료!
npm 설치
vue를 사용하기 위해서는 설치되어야 하는게 몇 개 있는데 그 중 하나가 npm이다
그럼 npm을 한 번 설치해보자!
먼저 apt 업데이트부터 하자..
apt update
npm은 간단한 명령어로 !
apt install npm
npm 설치는 정말 오래 걸리니 ......... 인내를 갖고 기다리기~
npm 버전도 확인해보자 ~
npm --verison
node 설치
npm 다음으로는 node도 설치해야 한다.
단, 여기서 주의할 점은 호환 문제로 npm은 18 이상으로 하자 ^.^
그런데 바로 특정 버전을 설치할 수는 없어서
1. node 설치
2. nvm 설치
3. 특정 버전 설치
4. 버전 변경
이 순서로 가야 한다...
다른 방법이 있는지는 모르겠지만 검색했을 때 다 이렇게 하길래...
다른 방법을 찾게 되면 추가 해야겠다!!!
일단은 위 순서대로 따라가보자!
먼저 node를 설치해야 하는데
node는 컨테이너를 만들 때 이미 포함했다!
그래서 node 설치는 생략하고 바로 버전 확인을 해보자
node --version
이번에는 node 버전을 올려보자
먼저 nvm을 설치해야 한다
여기서 nvm은 Node Version Manager 의 줄임말로, Node.js 버전을 쉽게 설치/전환할 수 있게 해주는 도구이다
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash
nvm은 아쉽게도 gitgub를 통해 sh 파일로 제공하고 있어서 curl 다운받고 sh 파일 실행해서 설치해야 한다...
쩝
파일을 다운 받았으면 적용을 위해 .bashrc를 실행하자!
, ~/.bashrc이건 사진 생략..
이번에는 특정 버전을 설치해보자!
나는 22을 설치했다
nvm install 22
간단하게 nvm install [버전]으로 설치하면 된다
다시 버전을 확인하면 22로 바뀐 걸 볼 수 있다
한 번 더 명시적으로 사용하도록 설정
nvm user [버전]22는 굳이 안 해도 되는 거 같다
vue 프로젝트 생성
npm create 명령어로 프로젝트를 생성하자
npm create vite@latest vue-web
vue-web라는 이름의 프로젝트를 새로 생성한다
vite는 패키저
latest는 최신 버전인 vue3 기반으로 하라는 의미
y를 누르면 아래와 같이 Framework를 선택하게 하는데 이때 방향키로 Vue를 선택하면 된다
이번에는 언어를 선택해야 하는데 방향키로 JS 선택하기
만약 TS 쓸거면 TS 선택 ~
그러면 아래처럼 설치가 끝나고 뭘 해야 할지 표시해준다 굿~
프로젝트 디렉터리로 이동
위에서 생성한 프로젝트 디렉터리로 이동
cd vue-web
의존성 설치
npm과 node 사용시 필요한 의존성을 설치하자
npm install
프로젝트 테스트 실행
간단히 실행은 아래 명령어를 사용하면 된다
npm run dev
로컬 주소:컨테이너 포트
이렇게 접속하면 아래처럼 페이지가 등장~
[Option] 외부 주소(도메인)에서 포트로 접속하기
도메인이 있다면..... 날 따라서 쭉 왔다면 오류가 났을 것이다 ... ^.^
왜냐면 vite에서 허용 도메인을 지정해줘야 하기 때문이다.. !
그럼 한 번 해보자~
먼저 설정파일인 vite.config.js를 열자
vi vite.config.js
그리고 파일 내용을 아래와 같이 바꾸자
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], server: { host: '0.0.0.0', port: 5173, allowedHosts: [ '도메인주소' ] } })
즉, port 부분 뒤에 allowedHosts:[도메인주소] 를 추가한다!
그리고 다시 npm run dev를 하면 도메인:포트로 접속 가능~
뿌듯~
오류 해결
아마 node 버전을 18로 하면 .... 아마 오류가 날 것이다 . . . . .
바로 아래처럼 .....
왜냐면 처음에 깔 때 18 버전으로 깔아서 .......
그래서 사실 중간 중간 읽어보면 사진에 node 버전이 18로 나올 것이다......
다들 명령어 복붙 하느라 사진은 안 보겠지 ㅎ
요즘 vite는 22 버전을 요구한다...
그래서 22 버전을 깔아야 한다..
vue 문법은 다음 글에서 알아보기로 하자~
