赞
踩
本文将通过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
Dockerfile
和nginx
配置文件都存放在项目docker
文件夹下。.dockerignore
作用:在传递给docker引擎时忽略掉不必要的文件或文件夹。docker-compose.yml需存放到项目根路径。
# 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;"]
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; } } }
/code-web/node_modules
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
自动部署的简单脚本,停止容器,删除代码,从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启动应用服务
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。