Docker에서 VueJS + NodeJS + MongoDB 애플리케이션을 패키징하는 방법

이전 기사에서 알 수 있듯이 저는 다양한 프로젝트를 진행했습니다. 새로운 팀의 첫 날은 일반적으로 같은 방식으로 진행됩니다. 즉, 백엔더가 나와 함께 앉아 애플리케이션을 설치하고 배포하는 마법 같은 작업을 수행합니다. Docker는 프론트엔드 개발자에게 없어서는 안되는 존재입니다. 백엔드는 광범위한 PHP/Java/Python/C# 스택으로 작성되는 경우가 많으며, 프론트는 모든 것을 설치하고 배포할 때마다 백엔드를 방해할 필요가 없습니다. 투명한 배포, 로그 및 자동화된 테스트를 갖춘 Docker-Jenkins 조합을 한 곳에서만 볼 수 있었습니다.

Docker에 대한 자세한 기사가 많이 작성되었습니다. 이 기사에서는 VueJS/Vue Router를 사용하여 단일 페이지 애플리케이션을 배포하는 방법에 대해 설명합니다. 서버 부분은 NodeJS를 사용하는 RESTful API 형식이며 MongoDB는 데이터베이스로 사용됩니다. Docker Compose는 여러 컨테이너 애플리케이션을 정의하고 실행하는 데 사용됩니다.

도커가 필요한 이유

Docker를 사용하면 애플리케이션 배포 프로세스를 자동화할 수 있습니다. 개발자는 더 이상 스스로 프로그램을 설치하거나 컴퓨터의 버전 비호환성을 처리할 필요가 없습니다. Docker를 설치하고 콘솔에 1~2개의 명령을 입력하기만 하면 됩니다. 이를 수행하는 가장 편리한 방법은 Linux를 사용하는 것입니다.

시작하기

세트 도커 과 도커 작성

폴더 구조

클라이언트 및 서버 애플리케이션용으로 2개의 폴더를 만듭니다. .yml 확장자를 가진 파일은 구성입니다. 도커 작성, 애플리케이션 컨테이너가 정의되고 연결되는 곳입니다.
Docker-compose.yml:

version: "3"
services:
  mongo:
    container_name: mongo
    hostname: mongo
    image: mongo
    ports:
      - "27017:27017"
  server:
    build: server/
    #command: node ./server.js #здесь можно перезаписать CMD из Dockerfile в /server
    ports:
      - "3000:3000"
    links:
      - mongo
  client:
    build: client/
    #command: http-server ./dist #здесь можно перезаписать CMD из Dockerfile в /client
    network_mode: host
    ports:
      - "8089:8089"
    depends_on:
      - server

Docker에서 NodeJS, MongoDB 및 Vue의 정적 서비스의 3가지 서비스를 만듭니다. 클라이언트를 서버에 연결하기 위해 추가됨 서버에 따라 다름. MongoDB를 서버 API와 연결하려면 다음을 사용하세요. 링크 몽고. 서버, 클라이언트, 몽고 - 서비스 이름.

VueJS 클라이언트

폴더에 /고객 이 애플리케이션은 VueJS를 기반으로 합니다. 응용 프로그램은 다음을 사용하여 생성되었습니다. 뷰 클리. 이미지를 빌드할 때 클라이언트 애플리케이션은 폴더의 정적 파일 세트에 내장됩니다. /거리. Dockerfile은 이미지 빌드를 위한 명령 세트를 설명합니다.

FROM node:10
WORKDIR /client
COPY ./package*.json ./
RUN npm install
RUN npm install -g http-server
COPY . .
RUN npm run build
EXPOSE 8081
CMD ["npm", "test:dev"]

package.json은 나머지 프로젝트 파일과 별도로 복사되어 설치됩니다. 이는 성능을 위해 수행되므로 다시 빌드할 때 /node_modules 폴더의 내용이 캐시됩니다. 각 명령줄은 별도로 캐시됩니다.

마지막으로 컨테이너가 시작되면 명령이 실행됩니다. npm run dev. 이 명령은 package.json에 설명되어 있습니다.

"scripts": {
	 "test:dev": "http-server dist -p 8081 -c 1 --push-state"
}

폴더에서 파일을 실행하려면 /거리, 전 세계적으로 설치됨 http-server, 그리고 개발 종속성에서 패키지 spa-http-serverVue Router가 올바르게 작동하도록 합니다. --push-state 플래그는 index.html로 리디렉션됩니다. 값이 1초인 -c 플래그가 다음에 추가되었습니다. http 서버 스크립트를 캐시하지 않았습니다. 이는 테스트 예시이므로 실제 프로젝트에서는 nginx를 사용하는 것이 더 좋습니다.

Vuex 스토어에서 필드를 생성합니다. apiHost: 'http://localhost:3000', NodeJS Api 포트가 등록되어 있습니다. 클라이언트 부분이 준비되었습니다. 이제 클라이언트에서 백으로 보내는 모든 요청이 이 URL로 이동합니다.

NodeJS 서버 API

폴더에 /server 만들다 서버.js 및 Dockerfile:

FROM node:10
WORKDIR /server
COPY ./package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["node", "server.js"]

В 서버.js 표시됨 URL 데이터베이스용 const url = 'mongodb://mongo:27017/';. 클라이언트의 도메인 간 요청 허용:

const clientUrl = 'http://localhost:8081';
const corsOptions = {
  origin: clientUrl,
  optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204
};
app.use(cors());
app.all('/*', (req, res, next) => {
  res.header('Access-Control-Allow-Origin', clientUrl);
  res.header('Access-Control-Allow-Headers', 'X-Requested-With');
  next();
});
  app.get('/getProducts', cors(corsOptions), (req, res) => {
    products.getContent
      .then(data => res.json(data), err => res.json(err));
  });
  app.get('/getUsers', cors(corsOptions), (req, res) => {
    db.getUsers()
      .then(data => res.json(data), err => res.json(err));
  });

결론

이제 프로젝트 디렉토리로 이동하여 실행해 봅시다. docker-compose build 이미지 구축을 위한 docker-compose up 컨테이너를 실행합니다. 팀은 3개의 컨테이너를 들어올립니다. 서버, 클라이언트, 몽고. NodeJS 서버의 경우 사용자 폴더에 연결하여 핫 리로드를 구성할 수 있습니다. 그리고 개발 중인 클라이언트는 핫 리로드를 통해 로컬에서 시작되어야 하며 별도로 실행되어야 합니다. 섬기는 사람 и 몽고. 별도의 서비스를 시작하려면 이름을 지정하세요. docker-compose up client. 가끔 잊지 말고 꼭 해보세요 prune 컨테이너, 네트워크, 이미지를 삭제하여 리소스를 확보합니다.

전체 코드를 보실 수 있습니다 여기에. 이 프로젝트는 아직 개발 중입니다.

출처 : habr.com