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

相关推荐
Johny_Zhao1 小时前
Docker + CentOS 部署 Zookeeper 集群 + Kubernetes Operator 自动化运维方案
linux·网络安全·docker·信息安全·zookeeper·kubernetes·云计算·系统运维
zwjapple2 小时前
docker-compose一键部署全栈项目。springboot后端,react前端
前端·spring boot·docker
代码老y4 小时前
Docker:容器化技术的基石与实践指南
运维·docker·容器
像风一样自由20204 小时前
HTML与JavaScript:构建动态交互式Web页面的基石
前端·javascript·html
aiprtem4 小时前
基于Flutter的web登录设计
前端·flutter
DuelCode5 小时前
Windows VMWare Centos Docker部署Springboot 应用实现文件上传返回文件http链接
java·spring boot·mysql·nginx·docker·centos·mybatis
浪裡遊5 小时前
React Hooks全面解析:从基础到高级的实用指南
开发语言·前端·javascript·react.js·node.js·ecmascript·php
why技术5 小时前
Stack Overflow,轰然倒下!
前端·人工智能·后端
GISer_Jing5 小时前
0704-0706上海,又聚上了
前端·新浪微博
止观止5 小时前
深入探索 pnpm:高效磁盘利用与灵活的包管理解决方案
前端·pnpm·前端工程化·包管理器