docker部署项目

1、根目录新建 Dockerfile

# 使用官方 Node.js 镜像作为基础镜像
FROM node:18-slim

# 设置工作目录
WORKDIR /app

# 将 package.json 和 package-lock.json 拷贝到容器中
COPY package*.json ./

# 安装依赖
RUN npm install --frozen-lockfile

# 将项目文件拷贝到容器中
COPY . .

# 构建 Next.js 项目
RUN npm run build

# 设置环境变量
ENV NODE_ENV production

# 启动 Next.js 服务
EXPOSE 3000
CMD ["npm", "start"]

2、根目录新建 .dockerignore

node_modules
.next
Dockerfile
.dockerignore
README.md
node_modules
.DS_Store
dist
dist-ssr
*.local
.eslintcache
report.html

yarn.lock
npm-debug.log*
.pnpm-error.log*
.pnpm-debug.log
tests/**/coverage/

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln
tsconfig.tsbuildinfo




3. 在宝塔面板中上传项目

  1. 上传项目文件
    使用宝塔面板的「文件管理」功能,将本地的 Next.js 项目文件上传到服务器上。建议将项目放在 /www/wwwroot/your-nextjs-app/ 目录下。

  2. 设置文件权限
    确保项目文件夹及其中的文件具有正确的权限。你可以在「文件管理」中右键点击文件夹,然后设置文件权限。

4. 构建 Docker 镜像

  1. 进入 SSH 终端
    在宝塔面板的左侧菜单中,点击「SSH」终端,进入服务器的命令行界面。

  2. 构建 Docker 镜像
    在项目文件夹内执行以下命令来构建 Docker 镜像:

    bash
    cd /www/wwwroot/your-nextjs-app/ docker build -t nextjs-app .

    这会使用 Dockerfile 构建一个名为 nextjs-app 的镜像。

5. 运行 Docker 容器

  1. 启动容器
    使用以下命令启动容器并将容器的 3000 端口映射到服务器的 3000 端口:

    bash
    docker run -d -p 3000:3000 nextjs-app

    该命令会在后台运行容器,并且映射容器内的 3000 端口到服务器的 3000 端口。

  2. 查看容器状态
    使用以下命令查看容器是否启动成功:

    bash
    docker ps

    如果一切正常,你应该能看到 nextjs-app 容器正在运行。

6. 配置反向代理(Nginx)

如果你希望通过域名访问你的 Next.js 应用(例如 http://your-domain.com),你需要配置 Nginx 作为反向代理。

  1. 进入宝塔面板的 Nginx 管理页面
    在宝塔面板的左侧菜单中,点击「Nginx」进行配置。

  2. 添加反向代理配置
    在 Nginx 配置页面,点击「添加站点」,然后配置如下:

    • 域名:填入你的域名(例如 your-domain.com)。

    • 根目录:可以设置为 /www/wwwroot/your-nextjs-app/,但更重要的是配置反向代理部分。

    • 反向代理:在「反向代理设置」中,填写如下内容:

      nginx
      location / { proxy_pass http://127.0.0.1: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; }

    这样,Nginx 会将对 your-domain.com 的请求代理到 http://127.0.0.1:3000 上,即 Docker 容器中的 Next.js 应用。

  3. 重启 Nginx
    配置完成后,点击「重载配置」来重启 Nginx 服务。

7. 完成部署

现在,你应该能够通过访问 http://your-domain.com 来访问你部署在 Docker 容器中的 Next.js 应用。

8.常用命令

# 列出所有容器,包括已经停止的容器。
docker ps -a

# 查看容器的日志
docker logs <container-id>

# 查看 Docker 启动命令或 Docker Compose 配置
docker run -d -p 3000:3000 nextjs-app

# 检查 Docker 服务的状态:
sudo systemctl status docker

# 重新启动 Docker
sudo systemctl restart docker

# 停止并删除容器
docker stop container_id
docker rm container_id

# 删除镜像
docker rmi image_name_or_id

# 查看镜像和容器的关系
docker ps -a --filter ancestor=image_name_or_id