Question

我有一个用 Laravel 编写的后端 API，一个用 NextJS 编写的前端应用程序，它们使用 NGinx 与 Docker 进行容器化。这是我的 docker-compose.yml 文件：

version: '3.9'
services:

  # frontend nextjs app
  nextjs:
    build: ./hike-frontend
    container_name: nextjs
    volumes:
      - ./hike-frontend:/usr/app
      - /app/node_modules
      - /app/.next
    restart: always
    networks:
      - app-network

  # API Laravel app
  laravel:
    build:
      context: ./hike-backend
      dockerfile: Dockerfile
    image: digitalocean.com/php
    container_name: laravel
    restart: unless-stopped
    tty: true
    environment:
      SERVICE_NAME: laravel
      SERVICE_TAGS: dev
    working_dir: /var/www
    volumes:
      - ./hike-backend:/var/www
      - ./php/local.ini:/usr/local/etc/php/conf.d/local.ini
    networks:
      - app-network
    expose:
      - "9000"

  # Nginx Service
  nginx:
    image: nginx:alpine
    container_name: nginx
    restart: unless-stopped
    tty: true
    ports:
      - "80:80"
      - "443:443"
    expose:
      - "80"
      - "443"
    volumes:
      - ./hike-backend:/var/www
      - ./nginx/conf.d/:/etc/nginx/conf.d/
    networks:
      - app-network

#Docker Networks
networks:
  app-network:
    driver: bridge

这是我的下一个应用程序的 dockerfile：

# Base on offical Node.js Alpine image
FROM node:alpine

# Set working directory
WORKDIR /usr/app

# Install PM2 to automatically restart server if it crashes
RUN npm install --global pm2

# install react globally
RUN npm install --global react react-dom

# Copy package.json and package-lock.json before other files
# Utilise Docker cache to save re-installing dependencies if unchanged
COPY ./package*.json ./

# Install dependencies
RUN npm install --production

# Copy all files
COPY ./ ./

# Build app
RUN npm run build

# Expose the listening port
EXPOSE 3000

# Run container as non-root (unprivileged) user
# The node user is provided in the Node.js Alpine base image
USER node

# Run npm start script with PM2 when container starts
CMD [ "pm2-runtime", "npm", "--", "run", "dev" ]

这是我的 Laravel 应用程序的 dockerfile：

FROM php:7.4-fpm

# Copy composer.lock and composer.json
COPY composer.lock composer.json /var/www/

# Set working directory
WORKDIR /var/www

# Install dependencies
RUN apt-get update && apt-get install -y \
    build-essential \
    libpng-dev \
    libjpeg62-turbo-dev \
    libfreetype6-dev \
    locales \
    zip \
    libzip-dev \
    jpegoptim optipng pngquant gifsicle \
    vim \
    unzip \
    git \
    curl

# Clear cache
RUN apt-get clean && rm -rf /var/lib/apt/lists/*

# Install extensions
RUN docker-php-ext-install pdo_mysql zip exif pcntl
#RUN docker-php-ext-configure gd --with-gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ --with-png-dir=/usr/include/
RUN docker-php-ext-install gd

# Install composer
RUN curl -sS https://getcomposer.org/installer | php -- --install-dir=/usr/local/bin --filename=composer

# Add user for laravel application
RUN groupadd -g 1000 www
RUN useradd -u 1000 -ms /bin/bash -g www www

# Copy existing application directory contents
COPY . /var/www

# Copy existing application directory permissions
COPY --chown=www:www . /var/www

# Change current user to www
USER www

# Expose port 9000 and start php-fpm server
EXPOSE 9000
CMD ["php-fpm"]

这是我的 Nginx 配置：

upstream nextjs_upstream {
  server nextjs:3000;
}

server {
  listen 80;

  server_name local.hike.com;

  server_tokens off;

  gzip on;
  gzip_proxied any;
  gzip_comp_level 4;
  gzip_types text/css application/javascript image/svg+xml;

  proxy_http_version 1.1;
  proxy_set_header Upgrade $http_upgrade;
  proxy_set_header Connection 'upgrade';
  proxy_set_header Host $host;
  proxy_cache_bypass $http_upgrade;

  location / {
    proxy_pass http://nextjs_upstream;
  }
}

server {
    listen 80;
    server_name local.api.hike.com;
    index index.php index.html;
    error_log  /var/log/nginx/error.log;
    access_log /var/log/nginx/access.log;
    root /var/www/public;
    location ~ \.php$ {
        try_files $uri =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        fastcgi_pass laravel:9000;
        fastcgi_index index.php;
        include fastcgi_params;
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        fastcgi_param PATH_INFO $fastcgi_path_info;
    }
    location / {
        try_files $uri $uri/ /index.php?$query_string;
        gzip_static on;
    }
}

这一切正常我可以在我的浏览器中访问 local.hike.com 或 local.api.hike.com 的两个站点，并且客户端的 ajax 请求也可以正常工作。但是我无法像这样从 getServerSideProps 中的下一个应用程序连接到 Laravel 应用程序：

    export async function getServerSideProps(context) {
    const eventDetails = await Axios.get('http://laravel/api/events/1')
        .then(result => {
            console.log('result', result);
            return result.data.data
        })
        .catch(error => {
            console.log('error', error);
            return {}
        });
}

它只是返回：

Error: connect ECONNREFUSED 172.22.0.4:80

我可以在浏览器中访问 local.api.hike.com/api/events/1 或从下一个应用程序中的 ajax 请求访问 local.api.hike.com/api/events/1，但在 getServerSideProps 中无法访问。

NextJS + Laravel + NGinx + Docker：无法在 getServerSideProps

0 个答案: