用Serverless构建一个全栈应用程序: PostgreSQL篇

2023-10-31 19:38:19

前言

在上一篇文章中，我们了解了如何使用Serverless Framework构建一个简单的Next.js应用程序。在这篇文章中，我们将更进一步，构建一个全栈应用程序，包括后端和数据库。我们将使用PostgreSQL作为我们的数据库，并使用Node.js、Express.js和Next.js来构建后端和前端。

搭建后端

首先，我们需要创建一个新的Serverless项目。为此，请运行以下命令：

serverless create --template aws-nodejs

这将创建一个新的Serverless项目，其中包含一个简单的“hello world”函数。现在，让我们安装Express.js和PostgreSQL客户端：

npm install express pg

接下来，让我们创建一个新的文件serverless.yml，其中包含我们的Serverless配置：

service: my-app

provider:
  name: aws
  runtime: nodejs16.x

functions:
  hello:
    handler: handler.hello

现在，让我们创建一个新的文件handler.js，其中包含我们的Express.js应用程序：

const express = require('express');
const pg = require('pg');

const app = express();
const pool = new pg.Pool({
  connectionString: process.env.DATABASE_URL
});

app.get('/', (req, res) => {
  res.send('Hello world!');
});

app.get('/users', async (req, res) => {
  const results = await pool.query('SELECT * FROM users');
  res.json(results.rows);
});

app.post('/users', async (req, res) => {
  const newUser = req.body;
  const result = await pool.query('INSERT INTO users (name, email) VALUES ($1, $2) RETURNING *', [newUser.name, newUser.email]);
  res.json(result.rows[0]);
});

module.exports.hello = app;

在上面的代码中，我们首先导入Express.js和PostgreSQL客户端。然后，我们创建了一个新的Express.js应用程序，并使用PostgreSQL连接池连接到PostgreSQL数据库。

我们还定义了三个路由：

/：一个简单的“hello world”路由。
/users：获取所有用户的路由。
/users：创建一个新用户的路由。

部署后端

现在，我们可以使用以下命令部署我们的后端：

serverless deploy

这将部署我们的后端到AWS Lambda。

搭建前端

现在，让我们创建一个新的Next.js项目。为此，请运行以下命令：

npx create-next-app my-app-frontend

这将创建一个新的Next.js项目。现在，让我们安装Axios和PostgreSQL客户端：

npm install axios pg

接下来，让我们创建一个新的文件pages/index.js，其中包含我们的Next.js应用程序：

import { useEffect, useState } from 'react';
import axios from 'axios';

export default function Home() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('/api/users').then(res => setUsers(res.data));
  }, []);

  return (
    <div>
      <h1>Users</h1>
      <ul>
        {users.map(user => <li key={user.id}>{user.name}</li>)}
      </ul>
    </div>
  );
}