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

前言

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

使用 Docker 部署

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

配置 HTTPS

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

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

安装 Nginx

  • 更新包索引

sudo apt update

  • 安装 Nginx

sudo apt install nginx -y

  • 检查 Nginx 是否运行

sudo systemctl status nginx

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

上传证书文件

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

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

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

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

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

配置 Nginx

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

快捷方式

  • 在终端命令行输入:nano /etc/nginx/conf.d/xtainav.conf
  • 输入如下内容。
  • 依次按下 Ctrl + O、回车键 EnterCtrl + 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 容器中的 Nginxnginx:alpine),而不是主机上的本地 Nginx

如下图,是构建完成的效果:

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

在浏览器中访问:xtainav.cn

相关推荐
若梦plus1 小时前
Nuxt.js基础与进阶
前端·vue.js
樱花开了几轉1 小时前
React中为甚么强调props的不可变性
前端·javascript·react.js
风清云淡_A1 小时前
【REACT18.x】CRA+TS+ANTD5.X实现useImperativeHandle让父组件修改子组件的数据
前端·react.js
小飞大王6661 小时前
React与Rudex的合奏
前端·react.js·前端框架
若梦plus2 小时前
React之react-dom中的dom-server与dom-client
前端·react.js
若梦plus2 小时前
react-router-dom中的几种路由详解
前端·react.js
若梦plus2 小时前
Vue服务端渲染
前端·vue.js
Mr...Gan2 小时前
VUE3(四)、组件通信
前端·javascript·vue.js
OEC小胖胖2 小时前
渲染篇(二):解密Diff算法:如何用“最少的操作”更新UI
前端·算法·ui·状态模式·web
万少2 小时前
AI编程神器!Trae+Claude4.0 简单配置 让HarmonyOS开发效率飙升 - 坚果派
前端·aigc·harmonyos