使用Docker部署nextjs应用

最近使用nextjs网站开发，希望使用docker进行生产环境的部署，减少环境的依赖可重复部署操作。我采用的是Dockerfile编写应用镜像方式+ docker-compose实现容器部署的功能。

编写Dockerfile文件

1、在项目根目录创建Dockerfile文件

构建应用镜像的基础是创建对应的dockerfile文件，常规的我们会选择将dockerfile文件创建在项目的根目录，当然也可以自定义指定位置，只要在之后的构建过程指定路径就可以了

2、dockerfile编写依赖

我这里为了减少容器的大小，所以dockerfile使用了多阶段构建的方式实现，首先是依赖阶段实现依赖库的下载，具体如下：

FROM node:18-alpine AS deps
RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.ustc.edu.cn/g' /etc/apk/repositories
RUN apk update
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn config set registry https://registry.npm.taobao.org
RUN yarn install --frozen-lockfile

需要注意：

nodejs对应版本，查看package.json中的版本要求

  "engines": {
    "node": ">=18.17.0"
  }

我这里将软件源修改为国内镜像，默认的国外镜像可能导致软件无法更新下载
更新前端库镜像为淘宝镜像

3、构建阶段

由于已经完成依赖的下载，构建阶段只需要进行编译打包即可：

FROM node:18-alpine AS builder
WORKDIR /app
COPY --from=deps /app/node_modules ./node_modules
COPY . .

RUN yarn config set registry https://registry.npm.taobao.org
RUN yarn build && yarn install --production

4、运行阶段

完成构建后，就需要我们配置容器的基础配置，如环境变量、工作目录、监听端口、应用启动命令等：

FROM node:18-alpine AS runner

WORKDIR /app
ENV NEXT_TELEMETRY_DISABLED 1
ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001
RUN yarn config set registry https://registry.npm.taobao.org

COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

USER nextjs

EXPOSE 3000

ENV PORT 3000



CMD ["node_modules/.bin/next", "start"]

运行配置

1、编写docker-compse.yml文件

完成dockerfile文件编写后，我们就需要通过编写docker-compose.yml配置文件来启动容器了。我这里是使用nginx来部署，配置如下：

version: "3.1"

services:
  db:
    image: mysql:8
    command:
      --default-authentication-plugin=mysql_native_password
      --sql_mode=STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION
      --group_concat_max_len=102400
    restart: unless-stopped
    volumes:
      - ./data/mysql/:/var/lib/mysql/
    environment:
      TZ: Asia/Shanghai # 指定时区
      MYSQL_ROOT_PASSWORD: "nextjs" # 配置root用户密码
      MYSQL_DATABASE: "nextjs" # 业务库名
      MYSQL_USER: "nextjs" # 业务库用户名
      MYSQL_PASSWORD: "nextjs" # 业务库密码
    ports:
      - 3306:3306

  nextjs:
    build: .
    ports:
      - "3000:3000"
    environment:
      TZ: Asia/Shanghai # 指定时区
    container_name: nextjs
    volumes:
      - ./:/app/
    depends_on:
      - db
    restart: unless-stopped

  nginx:
    image: nginx:mainline-alpine
    container_name: nginxserver
    restart: unless-stopped
    ports:
      - "80:80"
    volumes:
      - ./.next:/var/www/html
      - ./nginx-conf:/etc/nginx/conf.d


networks:
  nodeapp-network:
    driver: bridge

2、添加nginx配置

如上可以看出，我一共创建了三个容器，一个数据容器db，一个nextjs容器是我们的应用还有一个nginx容器是web服务，nginx里还需要将我们的配置文件映射到容器内，nginx-conf内容如下：

server {
    listen 80;
    listen [::]:80;

    root /var/www/html;
    index index.html index.htm index.nginx-debian.html;

    server_name patientplatypus.com www.patientplatypus.com localhost;

    # location /back {
    #   proxy_set_header X-Real-IP $remote_addr;
    #   proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    #   proxy_set_header Host $http_host;
    #   proxy_set_header X-NginX-Proxy true;

    #   proxy_http_version 1.1;
    #   proxy_set_header Upgrade $http_upgrade;
    #   proxy_set_header Connection "upgrade";

    #   proxy_pass http://nodejs:8000;
    # }

    location / {
      proxy_pass http://nextjs:3000;
    }

    location ~ /.well-known/acme-challenge {
      allow all;
      root /var/www/html;
    }
}