Webpack 发布

引言

Nginx 与 Webpack 结合是前端项目生产环境部署的标准方案。该方案可高效托管静态资源，通过反向代理实现前后端分离，依托 Nginx 的高性能特性，大幅提升项目的访问速度、稳定性与安全性。

构建前端项目：使用 Webpack 打包项目，生成 dist 目录下的静态资源文件
配置 Nginx：指定 Nginx 根目录指向前端打包输出目录，提供静态资源访问
代理 API 请求：通过 Nginx 反向代理转发接口请求，解决跨域问题，实现前后端分离
启动 Nginx 服务：启动服务并监听指定端口，开放防火墙权限
发布上线：将打包文件部署至服务器，同步更新 Nginx 配置与前端资源

Nginx

Nginx 是一款高性能的开源 Web 服务器，核心支持静态资源服务、反向代理、负载均衡等功能，是前端项目部署的首选工具。

静态文件服务：高效分发网页、图片、字体、JS/CSS 等静态资源，传输速度远超传统服务器
反向代理：接收客户端请求，转发至后端服务，隐藏后端真实地址，提升安全性
负载均衡：分发请求至多个后端服务器，均衡负载，保证系统高可用

部署

本节使用 Docker Compose 容器化部署 Nginx，实现环境一键搭建、配置持久化、项目快速上线。

Compose

编写 docker-compose.yml 配置文件，定义 Nginx 容器服务，实现配置与静态资源挂载。

services:
  myweb:
    image: nginx
    restart: always
    container_name: myweb
    environment:
      NGINX_HOST: localhost
      NGINX_PORT: 80
    ports:
      - 80:80
    volumes:
      # 挂载 Nginx 主配置文件
      - ./nginx.conf:/etc/nginx/nginx.conf
      # 挂载站点虚拟主机配置
      - ./myweb-nginx.conf:/etc/nginx/conf.d/myweb-nginx.conf
      # 挂载 Webpack 打包后的 dist 目录（核心静态资源）
      - ./dist:/usr/share/nginx/html

nginx.conf

nginx.conf 是 Nginx 全局主配置文件，定义进程、日志、压缩、连接等核心参数。

# 使用 nginx 用户，工作进程数自动适配 CPU 核心
user  nginx;
worker_processes  auto;

# 错误日志配置
error_log  /var/log/nginx/error.log notice;
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;

    # 开启 gzip 压缩，优化前端资源加载速度
    gzip on;
    gzip_min_length 1k;
    gzip_buffers 4 16k;
    gzip_comp_level 2;
    gzip_types text/plain application/javascript text/css application/xml image/jpeg image/png;
    gzip_vary on;

    # 加载子配置文件
    include /etc/nginx/conf.d/*.conf;
}

虚拟主机配置

myweb-nginx.conf 为项目专属站点配置，适配 SPA 单页面应用（Vue/React/TS 项目）路由，配置资源缓存规则。

server {
    # 监听 80 端口
    listen 80;
    server_name  localhost;

    # 根路径匹配
    location / {
        # 指向 Webpack 打包的 dist 目录（推荐 root，适配前端静态资源）
        root /usr/share/nginx/html/;
        index index.html;

        # HTML 文件不缓存，保证实时更新
        if ($request_filename ~* .*\.(html|htm)$) {
            expires -1s;
            add_header Cache-Control "no-cache";
        }
    }

    # SPA 应用路由重定向（解决刷新 404 问题）
    location / {
        try_files $uri $uri/ /index.html;
    }

    # 前后端分离 - API 反向代理（解决跨域）
    location /api {
        proxy_pass http://localhost:5000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }

    # 错误页面配置
    error_page 500 502 503 504 /50x.html;
    location = /50x.html {
        root /usr/share/nginx/html;
    }
}

部署流程

标准化的前端项目部署步骤，适配 Webpack + Nginx + Docker 架构。

打包应用

在本地开发环境，执行 Webpack 打包命令，生成生产环境静态资源：

npm run build

压缩目录

将打包生成的 dist 文件夹压缩为 dist.zip，方便服务器上传。

上传应用

通过 FTP/SCP 工具，将 dist.zip 上传至服务器指定部署目录。

解压应用

在服务器终端，解压压缩包，生成完整的静态资源目录：

unzip dist.zip

部署运行

执行 Docker 命令，后台启动 Nginx 服务，完成项目上线：

docker-compose up -d