docker + vue + express + mongodb 部署

提醒

这篇记录是刚接触 docker 时最简单的项目记录，后续可查看升级版 Express+Mongodb 动态注入 mongodb 密码实践记录。

初衷

这两天研究了docker部署vue+express+mongodb项目，简单做了个小例子回顾下。

一、部署vue

打包vue

首先要对开发完的vue项目进行打包:

npm build

default.conf

在根目录添加default.conf文件

server {
    listen       80;
    server_name  localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    #error_page  404              /404.html;

    # redirect server error pages to the static page /50x.html
    #
    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }
}

Dockerfile

FROM nginx
COPY dist/ /usr/share/nginx/html/
COPY ./default.conf /etc/nginx/conf.d/default.conf

构建vue镜像

docker build -t zhihu/portal .

启动镜像

docker run -p 3000:80 -d --name zhihu-mcn-portal zhihu/portal

二、部署express+mongodb

添加.dockerignore文件

node_modules
npm-debug.log

添加Dockerfile文件

FROM node:10.15.3

LABEL maintainer="webB1anyaoyao@gmail.com"

COPY . /app

WORKDIR /app

RUN npm install

RUN ls

RUN npm install --registry=https://registry.npm.taobao.org

RUN ls

EXPOSE 3981

CMD [ "npm", "start" ]

添加docker-compose.yml文件

version: "3" # 版本
services:
  app:
    container_name: service # 容器名称
    restart: on-failure # 重启方式
    build: ./ # 构建dockerfile目录
    ports: # 暴露端口
      - "3981:3981"
    # volumes:
    #   - .:/app
    links: # 依赖容器
      - mongo
  mongo:
    container_name: mongo
    image: mongo:4.0.8 # 依赖镜像
    volumes:
      - ~/mongo/db:/data/db # 数据挂载
    ports:
      - "27017:27017"

修改env文件

MONGODB_URL=mongodb://localhost:27017/service
改为
MONGODB_URL=mongodb://mongo:27017/service

执行

docker-compose up -d