docker-compose部署vue项目

一、前言

本文将通过docker-compose来部署前端Vue项目到Nginx中

服务器基本环境：

• CentOS Linux release 7.6.1810 (Core)
• Docker version 18.03.0-ce, build 0520e24
• docker-compose version 1.18.0, build 8dd22a9

二、docker-compose部署

项目目录结构

Dockerfile 和 nginx配置文件都存放在项目docker文件夹下。 .dockerignore 作用：在传递给docker引擎时忽略掉不必要的文件或文件夹。docker-compose.yml需存放到项目根路径。

配置文件内容

docker/Dockerfile

# node镜像
FROM node:latest as build-stage
# 维护者信息
MAINTAINER Mr.Gao "a.gxz@qq.com"

RUN echo "-------------------- web environment configuration --------------------"

# 指定接下来的工作路径为/app  - 类似于cd命令
WORKDIR /app
# 拷贝前端项目 当前目录下的所有文件到app目录下(./指当前所有的代码路径 .指上一步cd到app的路径)
COPY ./ .

# 设置淘宝npm镜像
RUN npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安装依赖
RUN cnpm install

# 打包 - 目的：丢到nginx下跑
RUN cnpm run build:prod

# 前端项目运行命令
#CMD ["npm","run","start"]


# ======================== 上：npm打包  下：nginx运行 ========================
# nginx镜像
FROM nginx:1.15.3-alpine as production-stage
# 维护者信息
MAINTAINER Mr.Gao "a.gxz@qq.com"

# 移除nginx容器的default.conf文件、nginx配置文件
RUN rm /etc/nginx/conf.d/default.conf
RUN rm /etc/nginx/nginx.conf
# 把主机的nginx.conf文件复制到nginx容器的/etc/nginx文件夹下
COPY ./docker/nginx.conf /etc/nginx/
# 拷贝前端vue项目打包后生成的文件到nginx下运行
COPY --from=build-stage /app/dist /usr/share/nginx/html

# 暴露8101端口
EXPOSE 8101

# 注：CMD不同于RUN，CMD用于指定在容器启动时所要执行的命令，而RUN用于指定镜像构建时所要执行的命令。
#    RUN指令创建的中间镜像会被缓存，并会在下次构建中使用。如果不想使用这些缓存镜像，可以在构建时指定--no-cache参数，如：docker build --no-cache

# 使用daemon off的方式将nginx运行在前台保证镜像不至于退出
CMD ["nginx", "-g", "daemon off;"]

docker/nginx.conf

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;

events {
    worker_connections  1024;
}

http {
    include       /etc/nginx/mime.types;
    default_type  application/octet-stream;

    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';

    access_log  /var/log/nginx/access.log  main;

    sendfile        on;

    keepalive_timeout  65;

    # include /etc/nginx/conf.d/*.conf;

  	server {
        listen       8101;
        charset utf-8;
        server_name  localhost;# 服务器地址或绑定域名

    	# start ---------------------------------------------------------------------------------------------

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

        # end ---------------------------------------------------------------------------------------------

        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   /usr/share/nginx/html;
        }
   }
}

.dockerignore

/code-web/node_modules

docker-compose.yml

version: '3'
services:
  geosphere-web:                        # 前端node容器(运行nginx中的Vue项目)
    restart: always                     # 重启策略: 容器退出时总是重启容器
    build:
      context: ./                       # 指定设定上下文根目录，然后以该目录为准指定Dockerfile
      dockerfile: docker/Dockerfile
    environment:
      TZ: Asia/Shanghai
    ports:
      - "80:8101"                      # 映射端口
    networks:
      - geosphere-network-web          # 设置网卡

networks:
  geosphere-network-web:
    driver: bridge

bbbb.sh

自动部署的简单脚本，停止容器，删除代码，从git重新pull代码，编译，运行

因执行docker-compose build 之后，会在docker images里出现一些 的镜像，所以有一些删除操作

#!/bin/bash


echo '开始部署'
if [ ! -d "/home/kzzk" ];then
   mkdir -p "/home/kzzk"
fi
cd /home/kzzk

if [ -d "/home/kzzk/geosphere-web" ]
then
    echo '文件夹存在'
    # shellcheck disable=SC2164
    cd /home/kzzk/geosphere-web
    echo '1.正在停止容器'
    docker-compose down
    echo '2.删除代码目录'
    rm -rf /home/kzzk/geosphere-web
    echo '删除代码目录 正在停止容器 success'
    sleep 1
else
    echo '文件夹不存在'
    # shellcheck disable=SC2046
    docker stop $(docker ps -a  |grep geosphere | awk -F " " '{print $1}')
    # shellcheck disable=SC2046
    docker rm $(docker ps -a  |grep geosphere | awk -F " " '{print $1}')
    docker network rm geosphere-network-web
    rm -rf /home/kzzk/geosphere-web
    echo '手动停止删除容器成功'
fi


echo '删除已废弃的 images'
  docker stop $(docker ps -a  |grep geosphere | awk -F " " '{print $1}')
  docker rm $(docker ps -a  |grep geosphere | awk -F " " '{print $1}')
  docker rmi $(docker images  |grep none | awk -F " " '{print $3}')
  docker rmi $(docker images  |grep none | awk -F " " '{print $3}')


cd /home/kzzk
git clone git@192.168.1.58:a/geosphere-web.git
# shellcheck disable=SC2164
cd  /home/kzzk/geosphere-web
git checkout dev
echo '==============git clone success================'
sleep 1

docker-compose build
docker-compose up -d

echo '==============run success================'

三、测试运行

1.修改bbbb.sh相关地址后执行

2.或者将代码拷贝到服务器执行如下命令

# 1. 构建镜像
docker-compose build
# 2. 运行服务
docker-compose up -d

访问页面-成功访问

如果访问不成功，检查下Linux防火墙是否关闭，关闭防火墙需重启docker

总结

npm拉取项目所需依赖node_modules -> 打包生成dist文件夹 -> 拷贝到nginx中运行
通过docker-compose build构建镜像 -> docker-compose up -d启动应用服务