NextJS-NestJS-GraphQL-Starter 项目教程

NextJS-NestJS-GraphQL-Starter 项目教程

NextJS-NestJS-GraphQL-StarterA production-ready NextJS & NestJS GraphQL starter pack项目地址:https://gitcode.com/gh_mirrors/ne/NextJS-NestJS-GraphQL-Starter

1. 项目的目录结构及介绍

NextJS-NestJS-GraphQL-Starter/
├── client/
│   ├── public/
│   ├── src/
│   ├── .env
│   ├── package.json
│   ├── README.md
│   └── yarn.lock
├── server/
│   ├── src/
│   ├── .env
│   ├── package.json
│   ├── README.md
│   └── yarn.lock
├── nginx.conf
├── build.sh
├── LICENSE
└── README.md

• client/: NextJS 前端项目目录。

  • public/: 存放静态资源文件。
  • src/: 存放前端源代码。
  • .env: 环境变量配置文件。
  • package.json: 前端项目的依赖管理文件。
  • README.md: 前端项目的说明文档。
  • yarn.lock: 锁定依赖版本。

• server/: NestJS 后端项目目录。

  • src/: 存放后端源代码。
  • .env: 环境变量配置文件。
  • package.json: 后端项目的依赖管理文件。
  • README.md: 后端项目的说明文档。
  • yarn.lock: 锁定依赖版本。

• nginx.conf: Nginx 配置文件。

• build.sh: 构建脚本。

• LICENSE: 项目许可证。

• README.md: 项目总体说明文档。

2. 项目的启动文件介绍

前端启动文件

• client/package.json
  • scripts 部分包含了启动命令：

    "scripts": {
      "dev": "next dev",
      "build": "next build",
      "start": "next start"
    }
    

  • dev: 开发模式启动命令。
  • build: 构建生产环境包。
  • start: 启动生产环境服务。

后端启动文件

• server/package.json
  • scripts 部分包含了启动命令：

    "scripts": {
      "start": "nest start",
      "build": "nest build",
      "dev": "nest start --watch"
    }
    

  • start: 启动生产环境服务。
  • build: 构建生产环境包。
  • dev: 开发模式启动命令。

3. 项目的配置文件介绍

前端配置文件

• client/.env
  • 包含前端项目的环境变量配置，例如：

    NEXT_PUBLIC_API_URL=http://localhost:5000/graphql
    

后端配置文件

• server/.env
  • 包含后端项目的环境变量配置，例如：

    PORT=5000
    MONGO_URI=mongodb+srv://<username>:<password>@cluster0.mongodb.net/mydatabase
    

Nginx 配置文件

• nginx.conf
  • 包含 Nginx 服务器的配置，例如：

    server {
        listen 80;
        server_name example.com;
    
        location / {
            proxy_pass http://localhost:3000;
            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 /api {
            proxy_pass http://localhost:5000;
            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;
        }
    }
    

通过以上配置，您可以启动前端和后端服务，并通过 Nginx 进行反向代理。

NextJS-NestJS-GraphQL-StarterA production-ready NextJS & NestJS GraphQL starter pack项目地址:https://gitcode.com/gh_mirrors/ne/NextJS-NestJS-GraphQL-Starter