{"id":18232772,"url":"https://github.com/myxiaoao/nextjs-docker","last_synced_at":"2026-01-28T17:31:01.358Z","repository":{"id":258948133,"uuid":"875940587","full_name":"myxiaoao/nextjs-docker","owner":"myxiaoao","description":"部署 NextJS 与 App Router：不再只是 Vercel 的专属","archived":false,"fork":false,"pushed_at":"2024-10-21T07:13:12.000Z","size":6,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-11T03:08:15.574Z","etag":null,"topics":["docker","docker-compose","nextjs","vercel"],"latest_commit_sha":null,"homepage":"","language":"Dockerfile","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/myxiaoao.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-21T06:14:39.000Z","updated_at":"2024-10-21T08:35:46.000Z","dependencies_parsed_at":"2024-10-22T08:55:32.466Z","dependency_job_id":null,"html_url":"https://github.com/myxiaoao/nextjs-docker","commit_stats":null,"previous_names":["myxiaoao/nexjs-docker"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myxiaoao%2Fnextjs-docker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myxiaoao%2Fnextjs-docker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myxiaoao%2Fnextjs-docker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/myxiaoao%2Fnextjs-docker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/myxiaoao","download_url":"https://codeload.github.com/myxiaoao/nextjs-docker/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248333604,"owners_count":21086200,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["docker","docker-compose","nextjs","vercel"],"created_at":"2024-11-04T14:03:37.673Z","updated_at":"2026-01-28T17:31:01.118Z","avatar_url":"https://github.com/myxiaoao.png","language":"Dockerfile","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 部署 NextJS 与 App Router：不再只是 Vercel 的专属\n\n存在一种误解，认为在 Vercel 基础设施之外部署使用新 App Router 的 NextJS 应用很困难。\n\n事实并非如此。\n\n本文将解释如何使用 Docker 和 Docker Compose 部署 NextJS 应用，其中 Nginx 负责提供静态资源并充当反向代理。\n\n## 构建基石：涉及到的技术栈\n\n该部署过程中使用的工具是：\n\n1. NextJS：具有 App Router 的 React 框架。\n2. Docker：容器化平台。\n3. Docker Compose：管理多容器设置的工具。\n4. Nginx：处理静态资源和反向代理请求的 Web 服务器。\n\n### 第一步：准备您的 Next.js 应用\n\n第一步是为 NextJS 应用准备部署。关键是在 `next.config.mjs` 文件中使用 `standalone` 输出选项。这会创建一个包含所有必要依赖项的独立构建。\n\n以下是 `next.config.mjs` 的大致样子：\n\n```react\n/** @type {import('next').NextConfig} */\nconst nextConfig = {\n    output: 'standalone',\n};\n\nexport default nextConfig;\n```\n\n\u003e 此配置更改告知 NextJS 将应用程序运行所需的所有内容打包在一起。\n\n### 第二步：编写 Dockerfile\n\n下一步是创建 Dockerfile。使用多阶段构建过程以保持最终镜像高效。\n\n```dockerfile\n# Stage 1: Dependencies\nFROM node:22.6.0-alpine3.20 AS deps\nWORKDIR /app\n\nCOPY package.json package-lock.json ./\nRUN npm ci --only=production --no-audit --prefer-offline --silent\n\n# Stage 2: Builder\nFROM node:22.6.0-alpine3.20 AS builder\nWORKDIR /app\n\nENV NEXT_TELEMETRY_DISABLED 1\n\nCOPY --from=deps /app/node_modules ./node_modules\nCOPY . .\n\nRUN npm run build\n\n# Stage 3: Runner (Node.js app)\nFROM node:22.6.0-alpine3.20 AS runner\nWORKDIR /app\n\nENV NODE_ENV production\nENV NEXT_TELEMETRY_DISABLED 1\n\nCOPY --from=builder /app/public ./public\nCOPY --from=builder /app/.next/static ./.next/static\nCOPY --from=builder /app/.next/standalone ./\n\nEXPOSE 3000\n\nCMD [\"node\", \"server.js\"]\n\n# Stage 4: Nginx\nFROM nginx:1.27.0-alpine3.19 AS nginx\n\n# Copy the built Next.js static files\nCOPY --from=builder /app/public /usr/share/nginx/html\nCOPY --from=builder /app/.next/static /usr/share/nginx/html/_next/static\n\nCOPY --from=builder /app/app/favicon.ico /usr/share/nginx/html/favicon.ico\n\nCOPY nginx.conf /etc/nginx/nginx.conf\n\nEXPOSE 80\n\nCMD [\"nginx\", \"-g\", \"daemon off;\"]\n\n```\n\n该多阶段构建包含：\n\n1. 依赖阶段：安装生产依赖项。\n2. 构建阶段：构建 NextJS 应用，创建独立构建。\n3. 运行阶段：设置运行 NextJS 应用的环境。\n4. Nginx 阶段：准备 Nginx 服务器静态文件并提供反向代理功能。\n\n### 第三步：配置 Nginx\n\nNginx 已配置为适配当前应用的内容。以下是 `nginx.conf` 文件内容：\n\n```nginx\nuser nginx;\nworker_processes auto;\n\nerror_log /var/log/nginx/error.log warn;\npid /var/run/nginx.pid;\n\nevents {\n    worker_connections 1024;\n    multi_accept on;\n    use epoll;\n}\n\nhttp {\n    include /etc/nginx/mime.types;\n    default_type application/octet-stream;\n\n    log_format main '$remote_addr - $remote_user [$time_local] \"$request\" '\n                    '$status $body_bytes_sent \"$http_referer\" '\n                    '\"$http_user_agent\" \"$http_x_forwarded_for\"';\n\n    access_log /var/log/nginx/access.log main;\n\n    sendfile on;\n    tcp_nopush on;\n    tcp_nodelay on;\n    keepalive_timeout 65;\n    types_hash_max_size 2048;\n\n    upstream nextjs_upstream {\n        server nextjs:3000;\n        keepalive 64;\n    }\n\n    server {\n        listen 80;\n        server_name localhost;\n        root /usr/share/nginx/html;\n\n        location / {\n            proxy_pass http://nextjs_upstream;\n            proxy_http_version 1.1;\n            proxy_set_header Upgrade $http_upgrade;\n            proxy_set_header Connection 'upgrade';\n            proxy_set_header Host $host;\n            proxy_cache_bypass $http_upgrade;\n            proxy_set_header X-Real-IP $remote_addr;\n            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;\n            proxy_set_header X-Forwarded-Proto $scheme;\n        }\n\n        location /_next/static {\n            alias /usr/share/nginx/html/_next/static;\n            expires 365d;\n            access_log off;\n            add_header Cache-Control \"public, max-age=31536000, immutable\";\n        }\n\n        location /static {\n            expires 365d;\n            access_log off;\n            add_header Cache-Control \"public, max-age=31536000, immutable\";\n        }\n\n        location = /favicon.ico {\n            log_not_found off;\n            access_log off;\n            expires 365d;\n            add_header Cache-Control \"public, max-age=31536000, immutable\";\n        }\n\n        location = /robots.txt {\n            log_not_found off;\n            access_log off;\n        }\n\n        gzip_static on;\n    }\n}\n```\n\n此配置主要涉及以下内容：\n\n1. 为 NextJS 应用设置上游服务器。\n2. 配置处理不同类型请求的处理方式。\n3. 设置缓存和性能优化。\n\n### 第四步：用 Docker Compose 编排\n\nDocker Compose 用于协调 NextJS 应用程序和 Nginx 镜像。以下是 `docker-compose.yml` 文件内容：\n\n```docker-compose\nservices:\n  nextjs:\n    build:\n      context: .\n      target: runner\n    container_name: nextjs-app\n    restart: always\n\n  nginx:\n    build:\n      context: .\n      target: nginx\n    container_name: nextjs-nginx\n    restart: always\n    ports:\n      - \"80:80\"\n    depends_on:\n      - nextjs\n\nnetworks:\n  default:\n    name: nextjs-network\n```\n\n此配置主要涉及以下内容：\n\n1. 定义了两个服务：NextJS 应用和 Nginx。\n2. 为它们建立一个通信网络。\n3. 暴露端口 80 以供传入的 Web 流量使用。\n\n## 部署流程\n\n准备要部署应用程序：\n\n1. 确保服务器上已安装 Docker 和 Docker Compose。\n2. 上传 NextJS 项目文件、`Dockerfile`、`nginx.conf`和`docker-compose.yml`到服务器。\n3. 切换到终端中的项目目录。\n4. 运行命令：`docker-compose up -d --build` 。\n\n此命令构建 Docker 镜像并以分离模式启动容器。\n\n## 结论\n\n使用 Docker 和 Nginx，在 Vercel 之外部署 NextJS 应用并使用 App Router 是可行的。这种设置创建了一个可以控制基础设施的部署环境。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyxiaoao%2Fnextjs-docker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmyxiaoao%2Fnextjs-docker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmyxiaoao%2Fnextjs-docker/lists"}