Docker -AWS+Docker+Vue 설치하고 외부에서 접속하기

이번에도 제목처럼 AWS EC2에 도커를 올리고 그 안에 뷰 컨테이너를 실행시킬거예요.

 

이번에는 도커파일을 만들어서 간단하게 컨테이너를 실행시켜보도록 할게요..

 

우선 aws를 켜볼게요

 

 

aws를 켜줬으면 처음에 관리자 권한부터 부여해야겠죠?

 

sudo su -

 

위 명령어를 통해 관리자 권한을 먼저 주세요

 

그 다음은 지금 이글을 보시는 분의 상황에 따라 2가지 선택지가 있습니다.

1. 아직 vue프로젝트는 없지만 docker에 올리는 방법만 알고 싶은 경우

2. git에 이미 만들어놓은 vue 프로젝트가 있는경우,

 

2가지 모두 따로 알려드리겠습니다.

 

 

1. 아직 vue프로젝트는 없지만 docker에 올리는 방법만 알고 싶은 경우

만들어 두신 vue 프로젝트가 없다면 우선 vue를 설치하셔야하는데요

npm 명령어를 사용하기 위해 아래 명령어를 입력합니다.

 

yum install npm

 

그러면 잘 설치되시는 분도 있을거고 

 

# yum install npm Loaded plugins: priorities, update-motd, upgrade-helper No package npm available. Error: Nothing to do

 

 

위 같은 오류가 뜨시는 분들이 계실텐데요

 

그러면 아래 명령어를 입력해주세요

 

curl -sL https://rpm.nodesource.com/setup_8.x | sudo -E bash -

 

 

20초안에 설치가 시작될거구요

잘 끝나면

 

yum install nodejs --enablerepo=nodesource

 

위 명령어로 다시 npm을 설치해주도록 할게요

 

 

계속 "y"로 승인만 해주시면 설치가 완료 될거예요~

 

 

 

npm -v 로 버전확인도 해보니까

6.13.4 버전이 잘 확인되네요

 

이제 vue를 설치하기에 앞서 npm을 초기화 해주겠습니다.

 

npm init

을 쳐주세요

 

뭐 치라고 하는데

그냥 enter만 계속 쳐서 넘기셔도 됩니다.

 

그러면 이제 init은 끝납니다.

근데 이렇게 만 넘어가면 npm install 을 했을때

 

 

위처럼 오류가 나는데요!!

 

오류를 해결하기 위해 package.json파일 내용을 조금 수정해 줄거예요

 

vi package.json

 

위 기존 내용에서

 한줄을 추가해줄게요

 

 

이제 npm install을 다시하면

 

 

위처럼 문제 없이 처리가 되는걸 보실 수 있습니다.

 

 

 

그다음은 본격적으로 vue project를 만들기 위해 vue 명령어를 써야겠죠?

 

다음 명령어는 

npm install -g @vue/cli

입니다.

 

설치가 잘 되는듯하네요

버전도 확인해 볼까요!

 

vue --version

 

 

vue 설치도 4.3.1 버전으로 잘 되었네요

 

이제 프로젝트를 생성해 볼게요

프로젝트 이름은 'vue_front'로 하겠습니다.

 

 

vue create vue_front

를 쳐주시고 엔터 치신다음 다시 엔터를 쳐주시면

아래처럼 진행이 됩니다.

 

 

 

이제 ls 명령어로 프로젝트가 생성되었는지 확인해 볼게요

 

 

여기 보시면 vue_front 디렉토리가 생성되었죠?

 

 

vue_front폴더 안에도 vue를 위한 프로젝트 파일들이 잘 생성된것을 확인할 수 있습니다.

이파일들을 실행시키기 전에 "2. git에 이미 만들어놓은 vue 프로젝트가 있는경우," 에 대한 설명을 먼저 하겠습니다.

 

 

 

 

 

2. git에 이미 만들어놓은 vue 프로젝트가 있는경우,

 

 

그다음은 우선 먼저 git에다가 만든 vue 프로젝트 파일을 가져올텐데요!

그러기 위해서는 git 명령어를 사용할 수 있어야겠죠?

 

 

 

yum install git

을 해줍니다.

 

 

그런 다음 git이 설치가 잘 되었는지 버전 확인을 해볼게요~

 

git --version

을 통해 확인해보니 2.23.3 버전으로 잘 설치가 되었네요

 

이제 git에 만든 vue 프로젝트를 가져오겠습니다.

 

저는 제가 만들고있는 vue_front 리포지토리를 클론하겠습니다.

 

git clone [리포지토리 클론 주소]

 

 

 

그러면 아래처럼 클론이 진행됩니다.

 

 

 

 

ls 명령어로 확인해보니 vue_front 도 생성되었고

내용도 잘 clone 된것을 확인할 수 있습니다.

 

 

--------------------------------

3. 공통 부분( Docker에 올리고 실행시키기)

이제 vue 프로젝트가 있던 없던 공통 부분입니다.

우선 git에서 가져온 프로젝트이던 새로 create 한 vue 프로젝트던 한번 실행이 되는지 확인해 보셔야 겠죠?

 

 

 

npm run serve를 통해

서버를 실행시켜주세요!

 

 

 

요렇게 뜨신다면 이제

저 network 주소가 아니라 public ip주소를 알아야 하는데요

AWS Console 창 아래의 public ips 주소뒤에 :8080을 주소창에 쳐볼게요

 

예시 = 3.123.123.123:8080

 

이런식으로 치면 되겠죠?

 

 

 

위처럼 잘 작동하네요

 

ctrl+ C 를 이용해 서버를 꺼주세요

 

 

그러면 위처럼 다시 입력을 받을 준비가 되고

서버는 종료됩니다.

이제 도커를 위한 도커파일을 만들어 볼거예요

 

우선 현재 콘솔이 위치한 폴더는 프로젝트 폴더 안 입니다.

 

 

이제 도커파일을 만들어 볼게요

 

vi Dockerfile

 

# base image
FROM node:12.2.0-alpine

# set working directory
WORKDIR /app

# add `/app/node_modules/.bin` to $PATH
ENV PATH /app/node_modules/.bin:$PATH

# install and cache app dependencies
COPY package.json /app/package.json
RUN npm install
COPY . .

RUN npm run build

EXPOSE 8080

# start app
CMD ["npm", "run", "serve"]

 

wq로 저장을 마치면 이제 도커이미지를 빌드하겠습니다.

도커는 이미 설치되어있고 실행되어져있어야합니다.

그렇지 않다면 앞의 포스팅을 참고해주세요..

 

docker build -t vuef:dev .

 

vuef 라는 이름으로 이미지를 빌드해줍니다.

 

 

그 다음

이제 도커이미지를 컨테이너로 실행시켜야겠죠?

 

docker run -it -p 8080:8080 --rm vuef:dev

 

이제 실행이 됬습니다.

 

[public ip]:8080 으로 접속하면 vue create하신분들은 아래처럼 나올거예요~

 

 

 

 

그럼aws ec2위에 docker설치하고 vue 외부실행시키기 끄읕~~