上周入职新公司，公司用的 后端服务是 Laravel，前端是 Nuxt，我个人本地开发环境一直是 Laradock。所以就想在 laradock 中跑这两个服务。但是中间出了一点问题，困扰了好几天（太菜.....）。但是结局是完美的。总算是解决了，接下来还原一下步骤。

编辑本机 host 文件

127.0.0.1  api.ppp.test   # 后端接口地址
127.0.0.1  www.ppp.test   # Nuxt 前端地址

laradock Nginx 配置文件 (后端服务)

server {

    listen 80;
    listen [::]:80;

    # For https
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server ipv6only=on;
    # ssl_certificate /etc/nginx/ssl/default.crt;
    # ssl_certificate_key /etc/nginx/ssl/default.key;

    server_name api.ppp.local;
    root /var/www/ppp/public;
    index index.php index.html index.htm;

    location / {
         try_files $uri $uri/ /index.php$is_args$args;
    }

    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_pass php-upstream;
        fastcgi_index index.php;
        fastcgi_buffers 16 16k;
        fastcgi_buffer_size 32k;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        #fixes timeouts
        fastcgi_read_timeout 600;
        include fastcgi_params;
    }

    location ~ /\.ht {
        deny all;
    }

    location /.well-known/acme-challenge/ {
        root /var/www/letsencrypt/;
        log_not_found off;
    }
}

Nuxt 前端 Nginx ,配置 proxy_pass 到 nuxtjs 容器中

server {

    listen 80;
    listen [::]:80;

    # For https
    # listen 443 ssl default_server;
    # listen [::]:443 ssl default_server ipv6only=on;
    # ssl_certificate /etc/nginx/ssl/default.crt;
    # ssl_certificate_key /etc/nginx/ssl/default.key;

    server_name www.ppp.local;

    index index.html index.htm;

    location / {
        proxy_redirect                      off;
        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;
        proxy_read_timeout                  1m;
        proxy_connect_timeout               1m;
        proxy_pass                          http://nuxtjs:9999;   # Nuxt 服务
    }
}

新建 nuxtjs 容器

### nuxtjs #######################################################
    nuxtjs:
      build:
        context: ./nuxt
      environment:
        - HOST=0.0.0.0
      ports:
        - "9999:9999"
      volumes:
        - ${APP_CODE_PATH_HOST}:${APP_CODE_PATH_CONTAINER}${APP_CODE_CONTAINER_FLAG}
      networks:
        - backend
        - frontend
      tty: true

在 Laradock 根目录 新建 nuxt 文件夹。创建 Dokerfile 文件，并写入如下代码：

########
# THIS FILE IS INSIDE YOUR NUXTJS APPLICATION ROOT DIR
####
FROM node:latest

USER root

WORKDIR /var/www/nuxt  # 前端代码目录

构建 Nginx

docker-compose build nginx 

构建 nuxtjs

docker-compose build nuxtjs 

进入 nuxtjs 容器运行 Nuxt 服务

docker-compose exec nuxtjs bash

# 运行 Nuxt 服务 0.0.0.0:9999
npm run dev 

接下来前端 后端都可以运行，但是 前端 Nuxt 会报如下错误

我把 Nuxt 的启动端口换成 80 端口 会出现以下错误：

最终这个问题困扰了好几天.......最后的解决方案如下：

host 指向 laradock 的 Nginx 容器即可。

import axios from 'axios';

axios.defaults.proxy = { host: 'nginx' }

其实我一开始就往这里想，一直改的是 nuxt.config.js 文件，发现并不生效，但其实 我司这个项目自己改写了 axios，自己封装了 axios 导致我改的代码不生效.......

这就是躺过的坑，希望可以帮助以后的人......

2021-12-09 新的解决方案

只需设置 proxy_pass http://host.docker.internal:3000; 即可。

#server {
#    listen 80;
#    server_name node.com.co;
#    return 301 https://node.com.co$request_uri;
#}

server {

    listen 80;
    listen [::]:80;

    #listen 443;
    #listen [::]:443;

    server_name www.pxpxx.local;

    #ssl on;
    #ssl_certificate /var/certs/node.com.co/cert.pem;
    #ssl_certificate_key /var/certs/node.com.co/privkey.pem;
    #ssl_protocols       SSLv3 TLSv1 TLSv1.1 TLSv1.2;
    #ssl_ciphers         HIGH:!aNULL:!MD5;

    location / {
        proxy_pass http://host.docker.internal:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_cache_bypass $http_upgrade;
    }

    location ~ /\.ht {
        deny all;
    }

    location /.well-known/acme-challenge/ {
        root /var/www/letsencrypt/;
        log_not_found off;
    }

    error_log /var/log/nginx/www.pxpxx.local.local_error.log;
    access_log /var/log/nginx/www.pxpxx.local.local_access.log;
}