请教下前端 docker 部署问题

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 612 天前的主题，其中的信息可能已经有所发展或是发生改变。

部署简单的架构

用户请求域名->服务器 nginx->前端 docker 服务

前端 docker 配置如下

docekrfile

FROM node:lts-alpine AS builder

# install simple http server for serving static content
RUN npm install -g http-server

# make the 'app' folder the current working directory
WORKDIR /app

# copy both 'package.json' and 'package-lock.json' (if available)
COPY package*.json ./

# install project dependencies
RUN npm install

# copy project files and folders to the current working directory (i.e. 'app' folder)
COPY . .

# build app for production with minification
RUN npm run build

# build the nginx image
FROM nginx:1.17
COPY --from=builder /app/dist /usr/share/nginx/html
COPY ./nginx.conf /etc/nginx/conf.d/
EOF

2.docker nginx 配置 nginx.conf

server {
  listen 80;
  server_name localhost;
  root /usr/share/nginx/html;
  index index.html;
  location ~* ^.+\.(jpg|jpeg|gif|png|ico|css|js|pdf|txt){
    root /usr/share/nginx/html;
  }
  location / {
    try_files $uri $uri/ @router;
    index index.html;
  }

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

服务器的 nginx 配置

现在是这样的配置

 location /api/ {
        rewrite  ^.+api/?(.*)$ /$1 break; # 去除本地接口 /api 前缀, 否则会出现 404
        proxy_pass http://xxx.xxxx:8081;  # 前端代理的后端服务接口
         proxy_set_header X-Real-IP       $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Server $host;
        #add_header 'Access-Control-Allow-Origin' '*'; 
        #add_header 'Access-Control-Allow-Credentials' 'true'; 
    }
  
    location / {
        proxy_pass http://127.0.0.1:8080; #前端 docker 访问的路径

       # try_files $uri $uri/ /index.html; 
				
    }

上面这种配置后，访问刷新路由会 404 ，如果加上 try_files $uri $uri/ /index.html; 就会报错

iled to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.

注：两边 nginx 都有配置

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

求大佬解答

3 条回复 • 2023-04-25 15:38:33 +08:00

dier

2023-04-24 17:27:48 +08:00

可以倒着排查试试，先确认 docker 部署的服务是否能正常访问。如果 docker 部署的前端没问题，就看服务器 nginx 的日志，有可能是这里的两个 location 没区分成功，导致全都走到某一个 location 上了

julyclyde

2023-04-25 12:33:01 +08:00

不懂
前端和 docker 有啥关系？前端的程序不是在浏览器里运行的吗？

caicaiwoshishui

2023-04-25 15:38:33 +08:00

@dier 感谢，已经搞定了，原因是 nginx 容器在 /etc/nginx/conf.d 文件夹默认有一个 default 文件导致的，需要删除这个就行，或者 mount 配置文件 nginx.conf 修改为 default.conf 即可。

结帖！感谢各位