V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
caicaiwoshishui
V2EX  ›  问与答

请教下前端 docker 部署问题

  •  
  •   caicaiwoshishui · 2023-04-24 12:08:31 +08:00 · 967 次点击
    这是一个创建于 579 天前的主题,其中的信息可能已经有所发展或是发生改变。

    部署简单的架构

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

    前端 docker 配置如下

    1. 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
        1
    dier  
       2023-04-24 17:27:48 +08:00
    可以倒着排查试试,先确认 docker 部署的服务是否能正常访问。如果 docker 部署的前端没问题,就看服务器 nginx 的日志,有可能是这里的两个 location 没区分成功,导致全都走到某一个 location 上了
    julyclyde
        2
    julyclyde  
       2023-04-25 12:33:01 +08:00
    不懂
    前端和 docker 有啥关系?前端的程序不是在浏览器里运行的吗?
    caicaiwoshishui
        3
    caicaiwoshishui  
    OP
       2023-04-25 15:38:33 +08:00
    @dier 感谢,已经搞定了,原因是 nginx 容器在 /etc/nginx/conf.d 文件夹默认有一个 default 文件导致的,需要删除这个就行,或者 mount 配置文件 nginx.conf 修改为 default.conf 即可。

    结帖!感谢各位
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1060 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 19:18 · PVG 03:18 · LAX 11:18 · JFK 14:18
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.