graph TD
安装 --> 打包 --> 运行

windows要开启虚拟化

1 在本地

1.1 安装docker

官网安装

1.2 在vue项目目录下添加docker打包需要的文件

1.2.0 配置nginx文件(可省略)

在项目根目录下建立nginx文件夹,在nginx文件夹内建立default.conf文件

server {
    gzip on;
    gzip_static on; # 开启静态文件压缩
    gzip_min_length  1k;
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 5;
    gzip_types
        application/atom+xml
        application/geo+json
        application/javascript
        application/x-javascript
        application/json
        application/ld+json
        application/manifest+json
        application/rdf+xml
        application/rss+xml
        application/vnd.ms-fontobject
        application/wasm
        application/x-web-app-manifest+json
        application/xhtml+xml
        application/xml
        font/eot
        font/otf
        font/ttf
        image/bmp
        image/svg+xml
        text/cache-manifest
        text/calendar
        text/css
        text/javascript
        text/markdown
        text/plain
        text/xml
        text/vcard
        text/vnd.rim.location.xloc
        text/vtt
        text/x-component
        text/x-cross-domain-policy;
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6].";

    listen       80;
    server_name  localhost;

    #charset koi8-r;
    access_log  /var/log/nginx/host.access.log  main;
    error_log  /var/log/nginx/error.log  error;

    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;
    }
}

1.2.1 Dockerfile

普通vue项目

# build stage
FROM node:14.15.0 as build-stage
ADD . /app

WORKDIR /app

COPY package.json ./

RUN npm install

COPY . .

RUN npm run build

# production stage
FROM nginx:stable-perl as production-stage

# 复制替换文件
COPY --from=build-stage /app/dist /usr/share/nginx/html
# 上一步没做,这一步可以省略
COPY --from=build-stage /app/nginx/default.conf /etc/nginx/conf.d/default.conf

EXPOSE 80

CMD ["nginx", "-g", "daemon off;"]

node后端项目则不需要nginx

FROM node:14.15.0 as build-stage
ADD . /app

WORKDIR /app

COPY package.json ./

RUN npm install

COPY . .

EXPOSE 8083

CMD ["npm", "run", "dev"]

1.2.2 .dockerignore(可省略)

在项目根目录建立.dockerignore文件

node_modules
.git
.gitignore

1.3 本地建立镜像

docker build -t [镜像名称] .

1.4 本地运行

把镜像运行到容器内

docker run -p 8081:80 --name [容器名] [镜像名]

80是1.2.1暴露出的端口,8081是自定义的访问端口

浏览器输入本机ip地址+8081端口就能访问了

2 在服务器(centos 7.9)

2.0 先白嫖一下阿里的免费远程镜像仓库 Docker 打包镜像 | 发布至阿里云镜像仓库

2.1 安装docker和docker-compose

# CentOS安装Docker和Docker Compose

一、安装Docker

# 安装必要的工具
yum install -y yum-utils device-mapper-persistent-data lvm2
# 设置yum源
yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo
# 下载docker
yum install -y docker-ce
# 启动docker
systemctl start docker

二、安装Docker Compose (网上很多给的地址是github的,服务器连接不上)

# 下载 Docker-Compose 的当前稳定版本
curl -L https://get.daocloud.io/docker/compose/releases/download/1.25.5/docker-compose-`uname -s`-`uname -m` > /usr/local/bin/docker-compose
# 将可执行权限应用于二进制文件
chmod +x /usr/local/bin/docker-compose

2.2 安装mongo

docker pull mongo

2.2.1 运行mongo(带用户密码校验的)

把默认的mongodb端口改为映射27018端口

docker run -d -p 27018:27017 --name mongo-container  -e MONGO_INITDB_ROOT_USERNAME=[用户名]   -e MONGO_INITDB_ROOT_PASSWORD=[密码]  mongo

2.2.2 mongodb数据库导入导出命令

数据导出:

mongodump -h localhost:27017 -d [数据库名] -o [导出路径]

(带用户密码校验的)导入数据库:

mongorestore -h localhost:27018 --username [用户名] --password [密码] --authenticationDatabase admin --db [导出的数据文件路径]

2.2.3 mongodb 操作容器

$ docker exec -it mongo-container /bin/bash #进入容器

$ mongsh #mongo6.0版本后进入控制台命令

$  use admin  #切到admin集合

$  db.auth("用户名","密码") #登录

$  use "其他集合"

 #在其他集合建立角色
 db.createUser({ user: "用户名", pwd: "密码", roles: [{ role: 'readWrite', db: "其他集合" }] })

2.3 docker-compose

1.4 本地运行中运行容器的命令如果每次都要输入岂不是很不方便,于是有了docker-compose减轻工作量.

建立一个mongodb的volumn,用来数据持久化,否则容器删除,数据就没了

docker volume create mongo-volume

在服务器的 root 目录下建立 docker-compose.yml 文件,内容如下

version: "3.7"

networks:
  share-net: #使得容器内可以通信
    driver: bridge

volumes:
  mongo-volume:
   external: true #加上这个才能使得volume生效

services:
  vue:
    container_name: vue-web
    image: [远程镜像仓库地址]
    ports:
      - "8081:80"
    restart: on-failure
  vue-admin:
    container_name: vue-admin
    image: [远程镜像仓库地址]
    ports:
      - "8082:80"
    restart: on-failure 
    
  mongo:
    container_name: mongo-container
    image: mongo
    ports:
      - "27017:27017"
    environment:
      MONGO_INITDB_ROOT_USERNAME: ["用户名"]
      MONGO_INITDB_ROOT_PASSWORD: ["密码"]
      volumes:
         #注意,version: "3.0"的版本前面的-和内容之间没有空格
         #巨坑,绝对路径在docker-compose不起效果
         #但是docker run -d --name mongo-container  -e MONGO_INITDB_ROOT_USERNAME=[用户名]   -e MONGO_INITDB_ROOT_PASSWORD=[密码] -v /var/lib/docker/volumes/mongo-volume/_data:/data/db -p 27017:27017 mongo
却起效了   
       # -/data/db:/var/lib/docker/volumes/mongo-volume/_data
       - mongo-volume:/data/db
       restart: always

在docker-compose.yml 文件所在目录(centos为root目录)，执行：docker-compose up就可以跑起来了。
命令参考：在后台运行只需要加一个 -d 参数docker-compose up -d
查看运行状态：docker-compose ps
停止运行：docker-compose stop
重启：docker-compose restart
重启单个服务：docker-compose restart service-name
进入容器命令行：docker-compose exec service-name sh
查看容器运行log：docker-compose logs [service-name]

docker-compose就相当于省去docker run的功夫了

3 CI/CD 自动打包部署

使用git action部署到阿里云镜像 Docker + GitHub Actions 持续集成工作流

# deploy.yml
name: deploy-docker
on:
  workflow_dispatch:
  push:
    branches:
      -master # 上传到此分支触发
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      # 检查代码
      - name: Checkout # 将仓库内master分支的内容下载到工作目录
        uses: actions/checkout@v3 # 脚本来自 https://github.com/actions/checkout
      # 登录到阿里云容器镜像服务
      - name: Login to Ali Docker
        uses: docker/login-action@v1
        # 配置登录信息，secrets 变量在 github settings -> secrets 中设置
        with:
          registry: ${{ secrets.REGISTRY_PATH }}
          username: ${{ secrets.REGISTRY_USERNAME }}
          password: ${{ secrets.REGISTRY_PASSWORD }}
        # 构建镜像并上传到阿里云容器镜像仓库 (自行百度创建自己的镜像仓库)
      - name: Build and push
        id: docker_build
        uses: docker/build-push-action@v2
        with:
         context: .
         push: true
         tags: ${{ secrets.REGISTRY_PATH }}

secrets在这里配置

username,password就是阿里云镜像仓库的账户密码，registry是仓库的公网地址

[vue&docker&node] docker安装部署记录