用户中心前端 [ nginx docker] 部署 - 编程导航 | 一线开发者编程经验和技术实战分享

nginx 方式部署

环境：
nginx 版本 1.18.0-1.27.1
os: linux

nginx 安装方式很多自行百度，最简单的使用安装包的方式，下面都是基于安装包的模式进行的。

前端项目构建 npm run build 构建成功目录 dist ,里面的内容放入 /usr/share/nginx/html 中或自己定义一个。（安装包模式下 nginx 不是 root 用户注意权限问题，目录所属用户应为 www-data）

nginx 配置文件 http 模块如果有 include /etc/nginx/conf.d/*.conf; 下面的文件放入目录即可，如果没有直接将配置放入 htpp 模块
nginx 配置文件 frontend.conf (名字带 .conf 即可)

▼
text
复制代码
server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    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;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    location / {
        # 用于配合 browserHistory使用
        try_files $uri $uri/index.html /index.html;
        root /usr/share/nginx/html; // 前端代码构建后内容存放的目录
        # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
        # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;
    }

    location /api {
        proxy_pass 后端地址; 
        proxy_set_header   Host $host;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

检查 nginx 配置是否正确
nginx -t
没有报错，重启 nginx（若有问题根据报错信息修改）
nginx -s reload 或 systemctl restart nginx
直接访问服务器 ip 即可（配置 80端口）

docker nginx 容器方式

项目结构

▼
text
复制代码
├── config
├── default.conf.template
├── Dockerfile
├── jest.config.ts
├── jsconfig.json
├── node_modules
├── package.json
├── package-lock.json
├── pnpm-lock.yaml
├── public
├── README.md
├── src
└── tsconfig.json

nginx 模板文件(文件名 default.conf.template )（docker 环境变量 BACKEND_URL，启动容器时配置即可，方便随时修改）

▼
text
复制代码
server {
    listen 80;
    # gzip config
    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    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;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";

    location / {
        # 用于配合 browserHistory使用
        try_files $uri $uri/index.html /index.html;
        root /usr/share/nginx/html;
        # 如果有资源，建议使用 https + http2，配合按需加载可以获得更好的体验
        # rewrite ^/(.*)$ https://preview.pro.ant.design/$1 permanent;
    }

    location /api {
        proxy_pass ${BACKEND_URL}; # // 配置模板变量
        proxy_set_header   Host $host;
        proxy_set_header   X-Forwarded-Proto $scheme;
        proxy_set_header   X-Real-IP         $remote_addr;
    }
}

Dockerfile

▼
text
复制代码
# date: 2024/9/17
# os: ubuntu 20.0.4
# glibc: Ubuntu GLIBC 2.31-0ubuntu9.16 （与 node 18 有版本要求）
# docker hub mirror: aws ecr
# docker-ce version: 27.2.1

# 项目ant design pro 6.0.0 需要使用高版本 node ,支持 node 18+
FROM public.ecr.aws/docker/library/node:18.18-alpine AS builder

# 创建工作目录
WORKDIR /app

# 复制 package.json 和 package-lock.json
COPY package*.json .

# 安装依赖，建议配置阿里云比较稳定，我这里配置自己的镜像源
# RUN npm config set registry https://registry.npmmirror.com -g
RUN npm config set registry http://192.168.1.23:8081/repository/npm_taobo/ -g && npm i --no-cache

# 复制项目源码
COPY . .

# 构建项目
RUN npm run build

# 建议使用 alpine 小
FROM public.ecr.aws/docker/library/nginx:alpine AS production

COPY --from=builder /app/dist/ /usr/share/nginx/html/
COPY default.conf.template /etc/nginx/templates/default.conf.template

构建运行命令（建议分步构建）

▼
text
复制代码
docker build --target builder -t frontend-template-build:0.0.1 .
docker build -t frontend-template:0.0.1 .
docker run -itd -p 8080:80 -e BACKEND_URL=192.168.1.22:8081 --name frontend-template frontend-template:0.0.1

部署服务器不建议使用国内的，备案很麻烦。
前端已使用 nginx 进行部署地址: http://165.154.55.198

部署方式已经脚本化代码见仓库： https://github.com/wolf-li/web-frontend-templage

问题

前端构建后文件放到 nginx 进行部署后（docker 部署没有问题），展示效果与开发时不一样（已解决）

查看浏览器 F12 开发者控制台发现没有按照样式进行加载，nginx 问题查看nginx 配置配置文件s是否有下面的内容没有添加即可

▼
text
复制代码
include mime.types;
default_type application/octet-stream;