Laradock 运行 Nuxt 的一些问题

作者: hedeqiang

发布时间: 2020-08-23 22:14:22

上周入职新公司,公司用的 后端服务是 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 会报如下错误 laradock 中运行后端服务以及 Nuxt 一些问题

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

laradock 中运行后端服务以及 Nuxt 一些问题

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

host 指向 laradock 的 Nginx 容器即可。

import axios from 'axios';

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

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

这就是躺过的坑,希望可以帮组以后的人......

关于极客返利

极客返利 是由我个人开发的一款网课返利、返现平台。包含 极客时间返现、拉勾教育返现、掘金小册返现、GitChat返现。目前仅包含这几个平台。后续如果有需要可以考虑其他平台。 简而言之就是:你买课,我返现。让你花更少的钱,就可以买到课程。

https://geek.laravelcode.cn

https://geek.idaka.ink

版权许可

本作品采用 知识共享署名 4.0 国际许可协议 进行许可。

转载无需与我联系,但须注明出处,注明文章来源 Laradock 运行 Nuxt 的一些问题