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

相关推荐
前端与小赵几秒前
webpack和vite之间的区别
前端·webpack·vite
zy0101014 分钟前
React受控表单绑定
前端·javascript·react.js·mvvm·双向数据绑定
百锦再4 分钟前
React编程的核心概念:数据流与观察者模式
前端·javascript·vue.js·观察者模式·react.js·前端框架·ecmascript
2401_872487886 分钟前
网络安全之前端学习(css篇2)
前端·css·学习
行者Sun19898 分钟前
【Docker】Dockerfile 优化工具 hadolint
运维·docker·容器
SuperYing17 分钟前
前端候选人突围指南:让面试官主动追着要简历的五大特质(个人总结版)
前端·面试
前端双越老师20 分钟前
我的编程经验与认知
前端
linweidong26 分钟前
前端Three.js面试题及参考答案
前端·javascript·vue.js·typescript·前端框架·three.js·前端面经
GISer_Jing35 分钟前
前端常问的宏观“大”问题详解(二)
linux·前端·ubuntu
Moment36 分钟前
前端性能指标 —— CLS
前端·javascript·面试