前端项目docker部署

部署方式

使用docker部署，所以要预先在服务器上安装docker，同时为了方便连接服务器，要先配置ssh连接。

以下内容，假设以上2个工作已完成。

配置

对于一个前端项目，./指项目根目录。

区分环境

在./创建3个文件，用来区分环境，提供环境变量：

.env.dev-mode：本机运行
.env.test-mode：测试环境
.env.pro-mode：正式环境

其中可以定义环境变量，比如：

VITE_API_HOST="http://localhost:8000/api/v1"

package.json

json

  "scripts": {
    "dev": "vite --mode dev-mode",
    "build-test": "vite build --mode test-mode --outDir docker/dist",
    "build-pro": "vite build --mode pro-mode --outDir docker/dist",
    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
    "format": "prettier --write src/"
  },

Dockerfile

创建./docker/Dockerfile文件，其作用是：构建Nginx镜像、复制前端打包的dist

dockerfile

FROM nginx:1.22.0

WORKDIR /usr/share/nginx/html

COPY ./dist ./admin
COPY ./nginx/etc/nginx.conf /etc/nginx/

Nginx配置文件

创建./docker/nginx/etc/nginx.conf文件，主要是指定前端项目部署以后，访问的根路径为/admin（需要在vite中修改为对应的路径）

nginx

# 配置文件

# user nobody nobody;
worker_processes auto;
error_log /var/log/nginx/error.log;
pid /run/nginx.pid;

# 这个文件夹里面，没有文件
include /usr/share/nginx/modules/*.conf;

events {
    # 事件驱动模型
    use epoll;
    # 每一个worker_process的最大连接数
    worker_connections 1024;
}

http {
    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;
#     autoindex_localtime on;

    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 4096;

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

    # 这个文件夹里面，是折分的配置文件
    include /etc/nginx/conf.d/*.conf;

    # 开启 gzip，Default: off
    gzip on;
    # 压缩级别： 1-9。5 是推荐的压缩级别，Default: 1
    gzip_comp_level 5;
    # gzip 压缩文件体积的最小值。如果文件已经足够小了，就不需要压缩了，因为即便压缩了，效果也不明显，而且会占用 CPU 资源。Default: 20
    gzip_min_length 1k;
    # 设置用于压缩响应的 number 和 size 的缓冲区。默认情况下，缓冲区大小等于一个内存页。根据平台的不同，它也可以是4K或8K。
    gzip_buffers 4 16k;
    # 是否开启对代理资源的压缩。很多时候，nginx 会作为反向代理服务器，实际的静态资源在上有服务器上，只有开启了 gzip_proxied 才会对代理的资源进行压缩。Default: off
    gzip_proxied any;
    # 每当客户端的 Accept-Encoding-capabilities 头发生变化时，告诉代理缓存 gzip 和常规版本的资源。避免了不支持 gzip 的客户端（这在今天极为罕见）在代理给它们 gzip 版本时显示乱码的问题。
    # 如果指令gzip， gzip_static 或 gunzip 处于活动状态， 则启用或禁用插入“ Vary：Accept-Encoding”响应标头字段。Default: off
    gzip_vary on;
    # 压缩文件的 MIME 类型。`text/html` 默认就会开启 gzip 压缩，所以不用特别显示配置 `text/html` 的 MIME 类型。Default: text/html
    gzip_types
        application/javascript
        application/x-javascript
        text/javascript
        text/css
        text/xml
        application/xhtml+xml
        application/xml
        application/atom+xml
        application/rdf+xml
        application/rss+xml
        application/geo+json
        application/json
        application/ld+json
        application/manifest+json
        application/x-web-app-manifest+json
        image/svg+xml
        text/x-cross-domain-policy;
    # 服务器开启对静态文件（ CSS, JS, HTML, SVG, ICS, and JSON）的压缩。但是，要使此部分与之相关，需要在 gzip_types 设置 MIME 类型，，仅仅设置 gzip_static 为 on 是不会自动压缩静态文件的。
    gzip_static on;
    # IE6 以下的浏览器禁用 gzip 压缩。
    gzip_disable "MSIE [1-6]\.";

    server {
        listen 80;

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

        error_page 404 /404.html;
        location = /404.html {
        }

        error_page 500 502 503 504 /50x.html;
        location = /50x.html {
        }
    }
}

vite修改打包根路径

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: "/admin/",
  plugins: [
    vue(),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

compose.yaml

对于测试环境、正式环境，在docker目录中创建2个compose文件，用来构建镜像、启动容器：

文件：

compose-test.yaml
compose-pro.yaml

compose-test.yaml内容举例：

yaml

version: "3.8"

name: my-pro

services:

  admin-test:
    build:
      context: .
      dockerfile: Dockerfile
    restart: always
    environment:
      TZ: Asia/Shanghai
    expose:
      - "80"
    networks:
      - somenet

networks:
 somenet:
   name: somenet0

注意，其中的somenet0网络，需要在宿主机上通过docker network命令创建

启动脚本

创建./deploy.sh

#!/bin/zsh

# [指定工作目录]为脚本所在目录
workdir=$(dirname $0)
cd $workdir

echo "[deploy.sh] 当前工作目录：$workdir"

# [发布web]
# 1. 构建web程序
# 2. 构建镜像
# 3. compose发布

function admin_test() {
  pnpm run build-test \
  && \
  DOCKER_HOST=ssh://root@testhost \
  docker compose -f docker/compose-test.yaml up -d --build admin-test
}


function admin_pro() {
  pnpm run build-pro \
  && \
  DOCKER_HOST=ssh://root@prohost \
  docker compose -f docker/compose-pro.yaml up -d --build admin-pro
}



echo "[脚本] 开始部署：$1"
case $1 in
  admin_test )
    admin_test ;;
  admin_pro )
    admin_pro ;;
  * ) echo 输入不符合要求
esac

一键部署

运行deploy.sh脚本，即可一键部署：

部署到测试环境：./deploy admin_test
部署到测试环境：./deploy admin_pro

INFO

在其它工作目录中运行此脚本也有效，因为脚本中有将当前工作目录切到脚本所在的目录

前端项目docker部署 ​

部署方式 ​

配置 ​

区分环境 ​

package.json ​

Dockerfile ​

Nginx配置文件 ​

vite修改打包根路径 ​

compose.yaml ​

启动脚本 ​

一键部署 ​