Next.js 与 React 全栈开发：整合 TypeScript、Redux 和 Ant Design

兜兜有糖糖 發表於 2024-10-17 16:38:00

Next.js 与 React 全栈开发：整合 TypeScript、Redux 和 Ant Design

在上一集，我们编写完毕导航页面，并且非常的美观，但是我们发现编写网站是存静态的，在现代的网站当中一般都是动静结合，也就是说部分数据是从数据库读取的，部分静态数据是写在网页上面的，因此这章讲述如何搭建一个数据库。
<h2 id="搭建数据库postgresql" data-source-line="5">搭建数据库（PostgreSQL）</h2>
在这里我们使用容器的方法进行数据库搭建，这样的好处在于我们能快速的完整搭建，而不需要了解搭建的细节。
先判断服务器是否安装docker 容器，如果没安装需要安装，使用命令<code>docker ps</code> 判断是否安装成功，如果成功则如下图所示。 <img src="https://pic.dataeast.cn/picture/20241011213359.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241011213359.png">
如果未安装成功则使用命令 <code>apt install docker.io</code> 安装（Ubuntu服务器），其他服务器则使用其他命令，如 <code>yum install docker.io</code>
安装容器成功之后，我们要使用Docker Compose进行容器管理，在当前目录下创建一个文件夹PostgreSQL_Compose用于存储Compose 配置文件，然后创建一个docker-compose.yml配置文件，并编辑以下内容保存。
<pre data-source-line="16"><code class="hljs language-bash">version: '3.8' services:   db:     image: postgres:13     container_name: nextjs_dbs     restart: always     environment:       POSTGRES_DB: nextjsdbs       POSTGRES_USER: postgres       POSTGRES_PASSWORD: 12345678     ports:       - "5432:5432"     volumes:       - ./data:/var/lib/postgresql/data </code></pre>
<img src="https://pic.dataeast.cn/picture/20241011214622.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241011214622.png">
<h3 id="docker-compose-配置文件解析" data-source-line="35">Docker Compose 配置文件解析</h3>
这个 Docker Compose 配置文件设置了一个 PostgreSQL 数据库服务。以下是各部分的详细说明：
<ul data-source-line="39">
<li><code>version: '3.8'</code>: 指定使用的 Docker Compose 文件格式版本。</li>
<li><code>services</code>: 定义服务。
<ul>
<li><code>db</code>: 服务名称。
<ul>
<li>
<code>image: postgres:13</code>: 使用 PostgreSQL 13 版本的官方 Docker 镜像。
</li>
<li>
<code>container_name: nextjs_dbs</code>: 指定运行容器的名称为 <code>nextjs_dbs</code>。
</li>
<li>
<code>restart: always</code>: 设置容器总是重启，确保服务持续运行。
</li>
<li>
<code>environment</code>: 设置环境变量。
<ul>
<li><code>POSTGRES_DB: nextjsdbs</code>: 初始数据库名。</li>
<li><code>POSTGRES_USER: postgres</code>: 数据库用户名。</li>
<li><code>POSTGRES_PASSWORD: 12345678</code>: 数据库密码。</li>
</ul>
</li>
<li>
<code>ports</code>: 端口映射。
<ul>
<li><code>"5432:5432"</code>: 将容器内的 5432 端口映射到主机的 5432 端口。</li>
</ul>
</li>
<li>
<code>volumes</code>: 数据卷配置。
<ul>
<li><code>./data:/var/lib/postgresql/data</code>: 将主机上的 <code>./data</code> 目录挂载到容器内的 PostgreSQL 数据目录，用于持久化存储数据。 这个配置文件设置了一个基本的 PostgreSQL 数据库环境，适合用于开发和测试 Next.js 应用程序。</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>
<h3 id="容器使用方法" data-source-line="60">容器使用方法</h3>
使用<code>docker-compose up -d</code> 运行容器，如果没有命令则需要使用<code>apt install docker-compose</code> 进行安装，下图为正在加载容器。 <img src="https://pic.dataeast.cn/picture/20241011214920.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241011214920.png">
使用 <code>docker-compose logs -f</code> 命令查看容器的日志信息 <img src="https://pic.dataeast.cn/picture/20241011215105.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241011215105.png">
使用 <code>docker ps</code> 命令查看容器的运行状态 <img src="https://pic.dataeast.cn/picture/20241011215544.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241011215544.png">
如果你想看更多内容或者能够看到技术更新的内容，请百度搜索：<code>曲速引擎 warp drive csdn</code> 在首页找到我的地址访问即可，一线更新内容将会在我的个人博客上面更新，谢谢大家。
更详细内容查看
<blockquote data-source-line="74">
独立博客 https://www.dataeast.cn/ CSDN博客 https://blog.csdn.net/siberiaWarpDrive B站视频空间 https://space.bilibili.com/25871614?spm_id_from=333.1007.0.0 关注 “曲速引擎 Warp Drive” 微信公众号 <img src="https://pic.dataeast.cn/picture/20241016170749.png?ynotemdtimestamp=1728887240937" data-processed="https%3A%2F%2Fpic.dataeast.cn%3A443%2Fpicture%2F20241016170749.png">

</blockquote> 
来源：https://www.cnblogs.com/XiaoH160309/p/18472600

頁: [1]

琼殿技术论坛's Archiver

Next.js 与 React 全栈开发：整合 TypeScript、Redux 和 Ant Design