docker-compose部署SSR Nuxt.js未生成dist目录无法配置nginx反向代理

核心问题原因 #

1. 未生成dist目录属于正常现象
   你当前Nuxt配置的target: 'server'为SSR服务端渲染模式，该模式下yarn build只会生成.nuxt目录存放构建后的服务端运行代码，不会生成用于纯静态站点部署的dist目录。只有当你将配置改为target: 'static'并执行yarn generate命令时，才会产出dist目录，你无需纠结该目录不存在的问题。

2. Nginx报错是配置逻辑错误
   你把SSR服务按照静态站点的逻辑配置了root指令指向本地文件目录，但SSR模式下没有可直接读取的静态index.html文件，Nginx不需要找本地静态资源根目录，只需要做反向代理转发到Nuxt服务的3000端口即可。你注释root后出现的重定向循环，就是因为Nginx找不到静态index.html反复触发内部跳转规则导致的死循环。

修复方案 #

1. 调整Nginx配置

替换原来的静态站点配置，改为反向代理配置即可，参考配置如下：

server {
    listen 80;
    server_name app.site.com;

    # 动态请求转发到Nuxt服务
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # 静态资源直接交由Nginx处理，提升响应性能
    location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg|woff|woff2|ttf|eot)$ {
        root /home/path/project-1/.nuxt/dist/client;
        expires 1y;
        add_header Cache-Control "public, immutable";
    }
}

如果你的Nginx是运行在Docker容器中，proxy_pass的地址要替换为Nuxt容器的服务名或者宿主机的局域网IP，不能写127.0.0.1。

2. Docker运行失败排查

你在宿主机直接执行yarn start可以正常访问，说明业务代码本身没有问题，Docker运行失败优先排查以下几点：

• 查看Docker构建日志，确认yarn build阶段没有报错，部分带原生编译的依赖包在alpine镜像下可能缺少运行依赖，构建失败会导致容器无法正常启动
• 确认docker-compose.yml中配置了正确的端口映射，参考配置如下：

services:
  nuxt:
    build: .
    ports:
      - "3000:3000"
    restart: always

• 容器启动后执行docker exec <你的容器名> curl localhost:3000，确认容器内部可以正常访问Nuxt服务，排除容器内部服务启动异常的问题

内容的提问来源于stack exchange，提问作者Saeed