使用Docker部署SPA项目（Vue3）

valentinelzt
1,144 阅读3分钟

使用vite创建一个vue3项目

pnpm create vite

根据自己的需求选择，如下图：

image.png

创建docker相关配置项

初始化配置文件

我们通过命令docker init进行初始化

这里我们选择Other，然后回车

image.png

更新Dockerfile

主要是使用 Node.js 镜像安装并构建 Vue 3 应用，然后使用 Nginx 镜像将构建结果和 Nginx 配置文件复制到生产镜像中，并在容器中运行 Nginx。

FROM node:20-alpine as build-stage

WORKDIR /root/app

COPY . .

RUN npm config set registry https://registry.npmmirror.com/

RUN npm i -g pnpm && pnpm i && pnpm build

FROM nginx:alpine as production-stage

COPY --from=build-stage /root/app/nginx/nginx.conf /etc/nginx/nginx.conf

COPY --from=build-stage /root/app/nginx/conf.d/* /etc/nginx/conf.d/

COPY --from=build-stage /root/app/dist /usr/share/nginx/html

EXPOSE 80

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

创建nginx相关配置

nginx
├── conf.d
│   └── default.conf
└── nginx.conf

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;
    #tcp_nopush     on;

    keepalive_timeout 65;

    #gzip  on;

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

default.conf内容

server {
  listen 80;
  # listen 443 ssl; #开启443 ssl
  # server_name xxx.cn www.xxx.cn; #你的域名
  # ssl_certificate "/usr/nginx/cert/xxx.cn.pem"; #证书文件
  # ssl_certificate_key "/usr/nginx/cert/xxx.cn.key"; #证书秘钥

  # 开启gzip
  gzip on;

  # 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
  gzip_min_length 1k;

  # gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
  gzip_comp_level 1;

  # 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
  gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;

  # 是否在http header中添加Vary: Accept-Encoding，建议开启
  gzip_vary on;

  # 禁用IE 6 gzip
  gzip_disable "MSIE [1-6]\.";

  # 设置压缩所需要的缓冲区大小
  gzip_buffers 32 4k;

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

  location @router {
    rewrite ^.*$ /index.html last;
  }
}

编辑compose.yaml文件

这里主要是配置定义了一个名为 vue-app 的服务，指定其使用名为 vue-app 的 Docker 镜像，并将构建上下文设置为当前目录下的 Dockerfile。容器将被命名为 vue-app，并映射主机的6008端口到容器的80端口，同时配置为在异常退出时自动重启。

services:
  vue-app:
    image: vue-app
    container_name: vue-app
    build:
      context: .
      dockerfile: Dockerfile
    ports:
      - "6008:80"
    restart: always

构建 & 启动容器

这里有两个命令

  • docker compose up --build
  • docker compose up -d

--build 选项：强制重新构建镜像，即使没有检测到 Dockerfile 或上下文中的变化。它确保你始终使用最新的代码和依赖项构建容器。

-d 选项：表示以分离（detached）模式运行容器。即，容器在后台运行，终端不会显示容器的日志输出。

以第一个命令为例，运行之后如图：

image.png

image.png

总结

本文主要讲述了如何使用 Docker 和 Docker Compose 来构建和部署一个单页应用（SPA）。以下是总结要点：

  1. 构建 Dockerfile：

    • 通过多阶段构建，我们首先使用 Node.js 环境构建 Vue 3 应用，并在构建阶段安装依赖并生成构建产物。
    • 然后，我们使用 Nginx 作为生产环境的基础镜像，将构建好的静态文件和 Nginx 配置文件复制到生产镜像中。
    • 最终的 Dockerfile 通过这种方式减少了镜像体积并提高了构建效率。

  2. Docker Compose 配置：

    • 在 docker-compose.yml 文件中，我们定义了一个 vue-app 服务，指定其使用构建好的 Dockerfile。
    • 通过 image 指令，我们指定了构建后镜像的名称，并配置了端口映射和自动重启策略。
    • docker compose up --build 命令强制重新构建镜像，确保应用使用最新的代码和依赖项。
    • docker compose up -d 命令以分离模式启动容器，使服务在后台运行，不阻塞终端。

  3. Gzip 压缩和 Nginx 配置：

    • 我们在 Nginx 配置中启用了 Gzip 压缩，以提高应用的加载速度。
    • 通过 try_files 指令，我们确保 Vue Router 的 history 模式在刷新页面时不会导致 404 错误。
avatar
文章
阅读
粉丝