[TODO] Docker 배포환경 설정

이번에는 개발을 잠깐 멈추고 배포 환경세팅을 했다.

Dockerize Vue.js App 글을 참고하여 진행했다.

 

Dockerfile 추가

# install NODE
FROM node:lts-alpine as build-stage
WORKDIR /homepage
COPY package*.json ./

ARG script 
RUN npm install
COPY . .
RUN npm run $script

FROM nginx:stable-alpine as production-stage
RUN rm /etc/nginx/conf.d/default.conf
COPY  ./nginx/homepage.conf /etc/nginx/conf.d/homepage.conf

COPY --from=build-stage ./homepage/dist /usr/share/nginx/html/homepage
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

 

프로젝트의 루트위치에 Dockerfile을 만들어서 위와 같이 작성한다.

도커 실행 시 보는 파일의 디폴트 이름이 Dockerfile 이기 때문에 다른이름은 안된다.

간략하게 보자면 node를 설치하고 homepage라는 폴더를 작업 폴더로 지정한다.

package.json, package-default-lock.json을 폴더에 복사한다.

 

script라는 이름의 파라미터를 하나 받는데 이건 npm run build, npm run build-dev를 나누기 위해서 build, build-dev를 script라는 파라미터로 외부에서 주입받게 수정했다. (리얼인 경우 build, 개발-알파인 경우 build-dev를 사용하기 위함)

install 후 결과를 모두 복사한다. 이 후 빌드.

 

프로젝트 빌드는 이것으로 끝나는데, 별도의 nginx 설정을 추가해줬다.

Nginx 설정을 추가하지 않으면 path를 다이렉트로 접근시 파일을 제대로 찾아가지 못한다.

(참고 : HTML5 히스토리 모드)

 

 

파일을 찾지 못함.

 

server {
    listen 80;

    location / {
        alias /usr/share/nginx/html/homepage/;
        try_files $uri $uri/ /index.html;
    }
}

nginx폴더를 만들고 homepage.conf라는 이름의 파일을 만들어 위와 같이 설정을 추가했다.

어떤 경로로 오든 index.html 파일을 제공하게 수정.

docker build --build-arg script=build-dev -t homepage .
docker run -it -p 8080:80 --rm --name homepage-1.0.0 homepage

도커 실행은 위와같은 명령어로 한다.

첫번째 줄은 Dockerfile을 실행한다. script 파라미터를 build-dev로 줘서

npm run build-dev 를 실행한다.

두번째 줄은 docker run한다. 80포트로 띄워놓은 homepage 프로젝트를 8080 외부포트로 연결(?)한다.

따라서 localhost:8080 으로 접근하면 된다.

 

결과

 

 

환경별 변수 분리

 

// config/env.development
NOW=dev!!

 

// config/env.production
NOW=prod!!

 

config 폴더를 만들고 위와 같이 2개의 파일을 만든다.

리얼인 경우 env.production을 리얼이 아닌경우 env.development 파일을 참고하도록 만들어보자.

 

// src/components/Todo/index.ts
created() {
    console.log(process.env.NOW); // 추가
    this.$store.dispatch('todo/getTodos');
}

todo 컴포넌트에 간단하게 NOW를 콘솔에 출력하게 추가했다.

 

$ npm install --save-dev dotenv

 

dotenv 다운.

 

// webpack.config.js
module.exports = (env, options) => {
// add
    require('dotenv').config({ path: path.join(__dirname, `config/env.${options.mode}`) });
    
    const config = {
        // ...

        plugins: [
             new HtmlWebpackPlugin({
            vue: true
          }),
          new webpack.DefinePlugin({
            'process.env': JSON.stringify(process.env) // add
          })
        ]
    }
    return config;
}

 

처음에는 process.env.NODE_ENV로 환경을 분리하려고 했는데 잘 안먹어서 webpack.config.js를 env, options도 참고하게 수정했다.

(참고 : 요즘 잘나가는 프론트엔드 개발환경 만들기(2018): Webpack4)

dotenv를 사용해서 config/env.${options.mode} 파일을 process.env에 넣는다.

options.mode는 webpack 시에 mode로 들어가는 값이다. (development, production 이 들어감.)

webpack.DefinePlugin 설정도 추가하면

process.env.XXX 로 환경별 다른 변수에 접근할 수 있다.

 

 

build-dev 결과

 

build 결과

 

---

 

참고 깃허브

 

add Dockerfile

Separate setting variables