Vue 프로젝트 빌드 환경 구분/포트 변경/도커 빌드/원격지 도커 실행까지!

1. 뷰 프로젝트 빌드 

env.test 파일을 만들고, VUE_APP_으로 시작하는 변수를 생성하여 사용한다. 

그리고, package.json의 script에 아래의 내용을 추가

8080 포트가 기본이지만 8080씨는 너무 인기가 많아서.. 일단 8082로 변경해본다.

script에 자주 사용하는 명령어들을 미리 지정해놓으면 유용하게 사용할 수 있다.

"script":{
	"serve" : "vue-cli-service serve --port 8082"
	"build:test": "vue-cli-service build --mode op"
}

 

 

빌드 해보자 ㅎㅎ

npm install
npm run serve //원하는 포트로 잘 실행되는지 확인
npm run build:test

 

 

 

2. 뷰 프로젝트 안에 server.js 파일 생성

요 server.js 파일의 위치도 중요하다. 나는 프로젝트/src 하위에 만들었다. App.vue, main.js와 같은 선상.

그래서 아래 도커 파일을 만들 때에도 디렉토리 구조가 좀 달라진다.

const express = require('express');
const path = require('path');
const app = express();

// 정적 파일 제공 (Vue 빌드 파일)
app.use(express.static(path.join(__dirname, '../dist')));

// 다른 라우트와 마지막에 빌드된 앱을 제공
app.get('*', function(req, res) {
    res.sendFile(path.join(__dirname, '../dist/index.html'));
});

// 포트 설정 및 서버 시작
const port = process.env.PORT || 8082;
app.listen(port, () => {
    console.log(`서버가 포트 ${port}에서 실행 중입니다.`);
});

3. 뷰 프로젝트 안에서 도커 파일 생성

vi Dockerfile

근데.. 다들 프로젝트 안에 dist/js/app.js 파일을 실행시키는데.. 이건 잘 모르겠음.

FROM node:20.13.1

#도커 폴더 생성
RUN mkdir -p /app
RUN mkdir -p /dist

#필요한 것들을 도커 폴더로 복사해준다. 아래 세개는 필수 dist는 디렉토리 하위 데이터를 모두 옮기는거임
COPY ./src/server.js /app
COPY ./dist/ /dist
COPY package.*json /app

# 어플리케이션 폴더를 WORKDIR명령어로 지정 - 서버 가동용
WORKDIR /app

# 의존성 설치
RUN npm install npm@10.5.2

# 앱이 8082 포트에 바인딩 되어있기 때문에 컨테이너의 8082 포트를 열어줌
EXPOSE 8082

# 인자값을 지정하지 않을시 node app.js를 실행
CMD [ "node", "server.js" ]

4. 도커 이미지 빌드

나는 wsl을 통해 ubuntu에 도커를 설치했다. local 경로 접근하려면 마운트 경로를 통해 접근한다. cd /mnt/c/Users/,,

만약 원격지 전송이 필요없다면 3~5 패스 

 

1) 도커 빌드

sudo docker build . -t 이미지명

2) 이미지 확인
sudo docker images 

3) 원격지로 전송을 위해 tar 파일로 생성
docker save -o my_image.tar image_name:tag

4) 생성된 my_image.tar를 scp를 이용하여 원격지로 전송
scp myimage username@123.456.789:/remote/dir

5) 원격지 서버로 접속하여 Docker 이미지 로드
docker load -i /path/on/remote/host/my_image.tar

6) Docker 이미지 실행 //요때 포트 꼭 지정해줘야 한다.
docker run -d- p 8082:8082 image_name:tag

 

7) Docker 실행 확인

docker container ls 

 

8) 접속

docker를 실행한 환경에서 ifconfig로 주소 확인. 보통 3번째임

해당 주소:8082로 실행하면 된다.