当前位置:   article > 正文

docker-compose部署vue项目_docker compose部署vue项目

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部署

项目目录结构

Dockerfilenginx配置文件都存放在项目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;"]

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
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;
        }
   }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
.dockerignore
/code-web/node_modules
  • 1
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
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
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
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51

三、测试运行

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

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

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

访问页面-成功访问

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

在这里插入图片描述

总结

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

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/知新_RL/article/detail/218313
推荐阅读
相关标签
  

闽ICP备14008679号