全干工程师养成记（上）: Next.js 多用户全栈基建实践

前端

2023-11-05 20:00:24

次世代全干工程师养成计划（上）

欢迎来到「次世代全干工程师养成计划」的第一篇章，我们将带领大家使用 Vercel 和 Next.js 相关技术快速构建一个多用户体系的全栈基建项目。

何为全干工程师？

全干工程师是近年来兴起的一个新概念，指的是能够独立完成整个软件开发生命周期的工程师，从需求分析、设计、开发、测试到部署运维，无所不能。

本系列教程的目标

本系列教程旨在通过一个实战项目，帮助大家掌握全栈开发的基本流程和核心技术，培养独立解决问题的能力，进阶成为一名合格的全干工程师。

教程内容

我们将在本系列教程中使用以下技术：

前端：Next.js（TypeScript）
后端：GraphQL（Apollo Server）
数据库：MongoDB（Atlas）
部署：Vercel
测试：Jest、Cypress
CI/CD：GitHub Actions
容器化：Docker

项目概览

我们将构建一个多用户博客系统，具有以下功能：

用户注册和登录
文章发布和管理
评论和点赞功能

准备工作

在开始之前，请确保您已经安装并配置了以下工具：

Node.js 和 npm
Next.js CLI
Vercel CLI
MongoDB Atlas
Docker
GitHub

开始构建

1. 创建 Next.js 项目

npx create-next-app my-blog-app --typescript

2. 安装依赖项

cd my-blog-app
npm install apollo-server-express graphql express mongoose dotenv

3. 设置数据库

在 MongoDB Atlas 中创建一个新的数据库并获取连接字符串。

4. 设置环境变量

在 .env 文件中设置以下环境变量：

MONGODB_URI=<YOUR_MONGODB_CONNECTION_STRING>

5. 编写后端代码

在 pages/api/graphql.ts 文件中编写 GraphQL 后端代码：

import { ApolloServer, gql } from 'apollo-server-express';
import { ApolloServerPluginLandingPageGraphQLPlayground } from 'apollo-server-core';
import express from 'express';
import mongoose from 'mongoose';
import { typeDefs } from './schema';
import { resolvers } from './resolvers';

const app = express();
app.use(express.json());

const server = new ApolloServer({
  typeDefs,
  resolvers,
  plugins: [ApolloServerPluginLandingPageGraphQLPlayground()],
});

mongoose.connect(process.env.MONGODB_URI, { useNewUrlParser: true, useUnifiedTopology: true })
  .then(() => {
    server.start().then(() => {
      server.applyMiddleware({ app });
    });
  });

app.listen(3000, () => {
  console.log('Server running on port 3000');
});

6. 部署到 Vercel

在 Vercel 上创建一个新项目并连接您的 GitHub 仓库。

7. 编写前端代码

在 pages/index.tsx 文件中编写前端代码：

import { useQuery } from 'react-query';
import { gql } from 'graphql-request';
import { getSdk } from '../generated/graphql';

const query = gql`
  query MyQuery {
    posts {
      id
      title
      content
    }
  }
`;

const IndexPage = () => {
  const { data, isLoading, error } = useQuery('posts', async () => {
    const sdk = getSdk();
    const data = await sdk.MyQuery();
    return data.posts;
  });

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <ul>
      {data.map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

export default IndexPage;