Next.js 实战 | 如何部署 AI 导航网站

前言

上一节《Next.js 实战 | 实现一个 AI 导航网站》简单概述 AI 导航网站是如何实现的，本节简要概述该网站是如何部署 并实现 HTTPS 的。

使用 Docker 部署

参考《在 Next.js 中使用 Docker 部署项目》这篇文章即可，快速实现在 Ubuntu 系统上安装 Git 、Docker 、Node 环境和项目部署。

配置 HTTPS

由于本项目的域名和服务器 都是在腾讯云购买的，因此就直接在腾讯云免费申请了几个月的 SSL 证书，证书申请通过后，参照相关文档进行 HTTPS 的部署。

由于要实现 HTTPS ，所以本项目使用 Nginx 与 Docker 相结合的方式实现 HTTPS 的部署，当然您也可以根据自己的需求选择其他方式部署。

安装 Nginx

更新包索引

sudo apt update

安装 Nginx

sudo apt install nginx -y

检查 Nginx 是否运行

sudo systemctl status nginx

在终端命令行如果显示 active (running) 则表明 Nginx 已经成功启动。

上传证书文件

进行完上述步骤之后，Nginx 的相关文件都会存放在 /etc/nginx 目录中。

因此我们需要将下载在本地的 xtainav.cn_bundle 和 xtainav.cn.key 证书文件上传到 /etc/nginx 目录中。

如果您是在腾讯云购买的服务器，腾讯云的 OrcaTerm 自带 SFTP，可轻松实现文件的管理。

因此，我们只需要找到 /etc/nginx 目录，然后点击上传文件即可。

这样，xtainav.cn_bundle 和 xtainav.cn.key 证书文件就会成功上传至服务器中。

配置 Nginx

在服务器 /etc/nginx/conf.d 文件夹中新建 xtainav.conf 文件，输入如下内容。

快捷方式：

在终端命令行输入：nano /etc/nginx/conf.d/xtainav.conf。

输入如下内容。

依次按下 Ctrl + O、回车键 Enter、Ctrl + X。

conf 复制代码

server {
    listen 80;
    server_name xtainav.cn www.xtainav.cn;
    return 301 https://$host$request_uri;
}

server {
    listen 443 ssl;
    server_name xtainav.cn www.xtainav.cn;
    ssl_certificate /etc/nginx/certs/xtainav.cn_bundle.crt;
    ssl_certificate_key /etc/nginx/certs/xtainav.cn.key;
    location / {
        proxy_pass http://xtai-nav-docker:3000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

配置 Docker

在项目根目录新建 docker-compose.yml 文件。

该文件的作用是通过一个声明式的配置文件，简化多容器应用的部署、管理和运行。

因为本项目不仅使用 Docker 部署项目，而且使用到 Nginx 实现代理。

因此需要 docker-compose.yml 文件将它们组织在一起。

yml 复制代码

version: '3.8' # 可以去掉，否则部署的时候会有警告

services:
  xtai-nav-docker:
    build:
      context: .
      dockerfile: Dockerfile
    container_name: xtai-nav-docker
    restart: unless-stopped
    expose:
      - '3000' # 仅暴露给 Nginx，不映射到主机

  nginx:
    image: nginx:alpine
    container_name: nginx
    ports:
      - '80:80'
      - '443:443'
    volumes:
      - /etc/nginx/conf.d/xtainav.conf:/etc/nginx/conf.d/default.conf
      - /etc/nginx/xtainav.cn_bundle.crt:/etc/nginx/certs/xtainav.cn_bundle.crt
      - /etc/nginx/xtainav.cn.key:/etc/nginx/certs/xtainav.cn.key
    depends_on:
      - xtai-nav-docker
    restart: unless-stopped

运行部署

完成上述步骤之后，在终端命令行输入 docker compose up -d --build，进行构建。

项目在构建过程中，可能会遇到占用 80 端口的错误，这可能是因为服务器中的 Nginx 启动着。

在命令行输入 sudo netstat -tulnp | grep :80 查看哪些进程占用着 80 端口。

如果是 Nginx 占用，输入 sudo systemctl stop nginx 本地 Nginx。

这是因为我们使用的是 Docker 容器中的 Nginx （nginx:alpine），而不是主机上的本地 Nginx。

如下图，是构建完成的效果：

测试 HTTPS 效果，如出现下图中的效果，则表示 HTTPS 部署成功。

在浏览器中访问：xtainav.cn