docker-compose部署vue项目

本文介绍如何使用docker-compose部署Vue项目至Nginx,包括配置Dockerfile及nginx.conf,实现自动化部署并测试运行。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一、前言

本文将通过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;"]

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启动应用服务

<think>好的,我现在需要帮助用户解决如何使用docker-compose部署Vue项目,并修改Nginx配置文件的问题。用户之前已经询问过关于Docker部署NginxVue的问题,现在想了解如何用docker-compose来实现。首先,我应该回顾之前的对话和用户提供的引用,确保回答一致并覆盖所有关键点。 首先,用户提供的引用中提到使用docker-compose build和up命令启动服务,以及如何复制dist文件和配置Nginx。引用[4]还提到了使用Dockerfile多阶段构建,这可能是一个优化的方法。用户现在明确提到要使用docker-compose,所以需要整合这些步骤到一个docker-compose.yml文件中。 接下来,我需要考虑用户可能的实际需求。他们可能希望有一个简单的一键部署流程,同时能够灵活地修改Nginx配置,特别是处理Vue的路由问题,比如history模式导致的404错误。此外,用户可能关心如何管理不同环境(开发、生产)的配置,以及如何处理静态资源缓存等问题。 在之前的回答中,我已经提到了Nginx配置中的try_files指令,这一点需要再次强调,因为它是解决Vue路由问题的关键。同时,用户可能需要了解如何通过docker-compose管理多个服务,比如同时运行Vue前端和后端API,但根据当前问题,重点应放在VueNginx上。 现在需要整理步骤:构建Vue项目、准备Dockerfile、编写docker-compose.yml、配置Nginx,最后启动服务。用户可能需要一个结构清晰的目录,比如将dist、nginx配置、docker-compose文件放在合适的目录结构中。此外,权限问题和缓存配置也是需要注意的细节。 还要考虑用户是否希望将构建过程集成到Docker中,这样可以在部署时自动构建Vue项目,而不是手动构建后再复制。引用[4]中的Dockerfile示例使用了多阶段构建,这可以简化流程,适合在docker-compose中使用。因此,在docker-compose.yml中可能需要指定构建上下文和Dockerfile的位置。 另外,用户可能希望修改Nginx配置后能够方便地重新加载,而不需要重新构建整个镜像。因此,在docker-compose中挂载配置文件作为卷是一个好方法,这样可以实时修改生效。需要确保Nginx配置文件的路径正确,并且容器内的路径正确映射。 最后,常见问题如路由404、静态资源加载失败等,应该在回答中提到解决方案,确保用户部署后能够顺利运行。同时,提供相关问题,帮助用户扩展知识,比如环境变量配置、Docker Compose编排多服务、缓存优化等。 总结步骤: 1. 构建Vue项目生成dist。 2. 创建Dockerfile进行多阶段构建(可选)。 3. 编写Nginx配置文件,处理路由和静态资源。 4. 编写docker-compose.yml,定义服务和卷挂载。 5. 启动服务并验证。 6. 处理常见问题和优化配置。 需要确保所有步骤清晰,命令准确,特别是路径和挂载点正确。同时,提醒用户注意路径权限和配置文件的正确性,避免常见错误。</think>以下是使用Docker Compose部署Vue项目并配置Nginx的完整方案,整合了**多阶段构建**和**动态配置挂载**技术: --- ### **一、项目结构准备** ```bash project-root/ ├── docker-compose.yml # Docker Compose主文件 ├── frontend/ # Vue项目目录 │ ├── Dockerfile # 前端多阶段构建文件 │ └── nginx/ # Nginx配置目录 │ └── vue-app.conf # 自定义Nginx配置 └── backend/ # 后端服务目录(可选) ``` --- ### **二、核心配置文件** #### 1. **Nginx配置** (`frontend/nginx/vue-app.conf`) ```nginx server { listen 80; server_name localhost; # 静态资源缓存优化 location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ { expires 365d; add_header Cache-Control "public, immutable"; } # Vue路由配置 location / { root /usr/share/nginx/html; index index.html; try_files $uri $uri/ /index.html; # 关键配置[^1][^3] } # API反向代理示例 location /api { proxy_pass http://backend:8000; # 后端服务名需与docker-compose中一致 proxy_set_header Host $host; } } ``` #### 2. **Dockerfile** (`frontend/Dockerfile`) ```dockerfile # 构建阶段 FROM node:16 as builder WORKDIR /app COPY package*.json ./ RUN npm install --registry=https://registry.npmmirror.com COPY . . RUN npm run build # 运行阶段 FROM nginx:alpine COPY --from=builder /app/dist /usr/share/nginx/html COPY nginx/vue-app.conf /etc/nginx/conf.d/default.conf ``` #### 3. **docker-compose.yml** ```yaml version: '3.8' services: frontend: build: context: ./frontend dockerfile: Dockerfile ports: - "80:80" volumes: - ./frontend/nginx:/etc/nginx/conf.d # 动态挂载配置目录 - static_volume:/usr/share/nginx/html # 持久化静态文件 environment: - TZ=Asia/Shanghai backend: # 示例后端服务(可选) image: backend-service:latest ports: - "8000:8000" volumes: static_volume: ``` --- ### **三、部署操作流程** 1. **构建镜像并启动服务** ```bash docker-compose build # 首次构建 docker-compose up -d # 后台运行 ``` 2. **动态修改配置** ```bash # 修改本地frontend/nginx/vue-app.conf后执行 docker-compose exec frontend nginx -s reload ``` 3. **查看实时日志** ```bash docker-compose logs -f frontend ``` --- ### **四、高级配置技巧** #### 1. **环境变量注入** 在`docker-compose.yml`中添加: ```yaml environment: - API_BASE_URL=${API_BASE_URL} ``` 通过`.env`文件传递变量: ```bash # .env文件 API_BASE_URL=http://api.example.com ``` #### 2. **多环境部署** 创建不同配置目录: ```yaml volumes: - ./frontend/nginx/${ENV:-dev}:/etc/nginx/conf.d ``` 启动时指定环境: ```bash ENV=prod docker-compose up -d ``` #### 3. **性能优化参数** 在`docker-compose.yml`中添加资源限制: ```yaml deploy: resources: limits: cpus: '0.5' memory: 512M ``` --- ### **五、故障排查指南** | 现象 | 解决方案 | |----------------------|------------------------------------------------------------------------| | 路由404 | 检查`try_files`配置,确保Vue路由模式为history[^1] | | 静态资源加载失败 | 检查`vue.config.js`中的`publicPath`设置,验证Nginx的`root`路径是否正确 | | API代理失败 | 使用`docker-compose exec frontend curl http://backend:8000`测试容器间通信 | | 配置文件未生效 | 执行`docker-compose exec frontend nginx -T`查看最终生效配置 | --- ### **六、典型应用场景** 1. **CI/CD流水线集成** 在GitLab CI中配置: ```yaml deploy: stage: deploy script: - docker-compose -f docker-compose.prod.yml up --build -d ``` 2. **蓝绿部署实现** 通过双容器方案滚动更新: ```bash docker-compose up -d --scale frontend=2 --no-recreate docker-compose exec frontend nginx -s reload ``` ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值