Next.js?Docker鏡像私有部署從零實現
更新時間：2023年12月21日 16:18:14 作者：寒露
這篇文章主要為大家介紹了Next.js?Docker鏡像私有部署從零實現,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
預備
經過一周的零碎開發(fā)，大致完成了雛形。簡單完成了文件移動、文件刪除、圖片預覽、視頻播放。考慮部署一版看看效果。
- 自建 docker registry 私有倉庫儲存構建好的鏡像
- 創(chuàng)建 Dockerfile，開發(fā)機器構建好鏡像后上傳至私有 docker 鏡像倉庫
- NAS 使用 Docker Compose 啟動容器。通過私有 docker registry 倉庫獲取鏡像運行
package.json 新增下面 scripts
"scripts": {
"explorer-dev": "npm run -w explorer dev",
"explorer-build": "npm run -w explorer build",
"explorer-start": "npm run -w explorer start",
"explorer-check-types": "npm run -w explorer check-types",
"explorer-build-docker": "docker build -f explorer.full.Dockerfile -t 192.168.31.17:5000/tool-manager/explorer .",
"explorer-push-docker": "docker push 192.168.31.17:5000/tool-manager/explorer"
}/explorer 新增依賴
pnpm i sharp
用于加速 Image 縮略圖的生成
私有鏡像倉庫
使用官方提供的 registry 鏡像
docker run -d -p 5000:5000 --restart always --name registry registry:2
需要注意，這里沒有配置鏡像卷目錄，重建容器時之前上傳的鏡像與配置會丟失。
主要是下面兩個
- /var/lib/registry：存放鏡像目錄地址
- /etc/docker/registry/：存放配置文件地址
配置 registry
由于 docker push/pull 需要使用 https。非 https 將會提示失敗?？赏ㄟ^配置 insecure-registries 繞過 https 檢測。
docker desktop
進入設置頁，Docker Engine 菜單，添加
{
...
"insecure-registries": [
"192.168.31.17:5000"
]
}docker
vim /etc/docker/daemon.json
{
"insecure-registries" : ["192.168.31.17:5000"]
}或者在啟動 docker 服務的時候加上參數
--insecure-registry 192.168.31.17:5000
構建 Docker
Dockerfile
使用的官方構建的例子 參考鏈接 進行特定修改，新增了
- 阿里的 alpine 源，加速 apk 的安裝
- 配置 npm 加速源
流程
- 使用 20.9.0-alpine 的 node 鏡像作為基礎（base）鏡像，并安裝 libc6-compat 庫。讓后續(xù)使用 base 鏡像的都擁有 libc6-compat 庫
- 在（deps）鏡像內，將 package.json 復制到對應目錄，并執(zhí)行依賴初始化安裝
- 將初始化好的依賴復制值運行打包（builder）鏡像內，執(zhí)行 Next.js 編譯
- 將 Next.js 編譯好的文件復制至運行（runner）鏡像內。完成整體的創(chuàng)建鏡像流程
FROM node:20.9.0-alpine AS base # 添加源 RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories # Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed. RUN apk add --no-cache libc6-compat # Install dependencies only when needed FROM base AS deps WORKDIR /app # Install dependencies based on the preferred package manager COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* pnpm-workspace.yaml* ./ COPY explorer/package.json ./explorer/package.json COPY explorer-manager/package.json ./explorer-manager/package.json RUN npm config set registry https://registry.npmmirror.com/ RUN \ if [ -f yarn.lock ]; then yarn --frozen-lockfile; \ elif [ -f package-lock.json ]; then npm ci; \ elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \ else echo "Lockfile not found." && exit 1; \ fi # Rebuild the source code only when needed FROM base AS builder WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY --from=deps /app/explorer/node_modules ./explorer/node_modules COPY --from=deps /app/explorer-manager/node_modules ./explorer-manager/node_modules COPY . . # Next.js collects completely anonymous telemetry data about general usage. # Learn more here: https://nextjs.org/telemetry # Uncomment the following line in case you want to disable telemetry during the build. # ENV NEXT_TELEMETRY_DISABLED 1 RUN npm run explorer-build # If using npm comment out above and use below instead # RUN npm run build # Production image, copy all the files and run next FROM base AS runner WORKDIR /app ENV NODE_ENV production # Uncomment the following line in case you want to disable telemetry during runtime. # ENV NEXT_TELEMETRY_DISABLED 1 # Set the correct permission for prerender cache RUN mkdir .next # Automatically leverage output traces to reduce image size # https://nextjs.org/docs/advanced-features/output-file-tracing COPY --from=builder --chown=1000:100 /app/explorer/.next/standalone ./ COPY --from=builder --chown=1000:100 /app/explorer/.next/static ./explorer/.next/static ENV PORT 3000 # set hostname to localhost ENV HOSTNAME "0.0.0.0" CMD ["node", "./explorer/server.js"]
分步構建將最大層度的使用 docker 構建緩存。加速構建鏡像的過程。還能縮小最終生成鏡像大小。
Dockerfile.dockerignore
排除過濾文件。docker 執(zhí)行 build 時，會自動檢索與當前 dockerfile 同名的 *.dockerignore 文件作為排除過濾文件。
用于加速 docker build “transferring dockerfile” 過程。如果不設置，會將 build 指定的上下文加入轉移過程中。如果 node\_modules、.next 文件過多，會增加 60s+的時間。
.idea .git **.Dockerfile **.dockerignore **/node_modules **/npm-debug.log **/.next **/README.md **/.env.*
項目內使用了 monorepo。所以使用 **. 、**/批量過濾
docker-compose.yml
啟動容器模板。172.17.0.1 為本機 docker 服務的 ip 地址。
這里同時配置了 tool-manager/explorer 鏡像與 nginx 鏡像。并為 nginx 指定 nginx.conf 配置文件
version: '3'
services:
explorer-app:
container_name: explorer-app
image: 172.17.0.1:5000/tool-manager/explorer:latest
restart: always
environment:
- EXPLORER_PATH=/mnt
- TZ=Asia/Shanghai
volumes:
- /mnt:/mnt
# - explorer-app-files:/app/explorer/
networks:
- share-explorer
user: 1000:100
# Add more containers below (nginx, postgres, etc.)
nginx:
container_name: explorer-app-nginx
image: nginx:latest
environment:
- TZ=Asia/Shanghai
volumes:
- type: bind
source: ./nginx.conf
target: /etc/nginx/nginx.conf
- /mnt:/mnt
# - explorer-app-files:/app/explorer/
depends_on:
- explorer-app
ports:
- '12200:80'
networks:
- share-explorer
networks:
share-explorer:
# external: true
#volumes:
# explorer-app-files:
# external: falsenginx.conf
events {
worker_connections 1000;
}
http {
include /etc/nginx/mime.types;
upstream nextjs_upstream {
server explorer-app:3000;
}
server {
listen 80;
gzip on;
gzip_proxied any;
gzip_comp_level 4;
gzip_types text/css application/javascript image/svg+xml;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection 'upgrade';
proxy_set_header Host $host;
location /_next/static/ {
expires 365d;
# alias /app/explorer/.next/static/;
proxy_pass http://nextjs_upstream;
}
location /static/ {
expires 365d;
alias /mnt/;
}
location / {
proxy_pass http://nextjs_upstream;
}
}
}- 流量由主機的 12200 端口進入 nginx 的 80 端口。
- 通過反向代理至
networks指定的 share-explorer:3000 文件資源管理器服務的端口 - 設置 /\_next/static/ 路徑的今天緩存 365 天。
- 查看原圖、視頻資源的 /static/ 路由通過 nginx 反代理，不再進入 Next.js 內
也可以使用 - explorer-app-files:/app/explorer/ 共享卷的形式共享 Next.js 的運行靜態(tài)文件，交給 nginx 進行完全代理alias /app/explorer/.next/static/。
但是會有一個問題，當重新部署服務時，由于 explorer-app-files 卷已經存在，新的內容會不生效，需要手動刪除舊的卷，再重新啟動容器時新的改動才會生效。
啟動構建
開發(fā)機器執(zhí)行
$ npm run explorer-build-docker > share-explorer@1.0.0 explorer-build-docker > docker build -f explorer.full.Dockerfile -t 192.168.31.17:5000/tool-manager/explorer . [+] Building 111.4s (23/23) FINISHED docker:desktop-linux => [internal] load build definition from explorer.full.Dockerfile 0.0s => => transferring dockerfile: 2.51kB 0.0s => [internal] load .dockerignore 0.0s => => transferring context: 2B 0.0s => [internal] load metadata for docker.io/library/node:20.9.0-alpine 2.7s => [auth] library/node:pull token for registry-1.docker.io 0.0s => CACHED [base 1/3] FROM docker.io/library/node:20.9.0-alpine@sha256:cb2301e2c5fe3165ba2616591efe53b4b6223849ac0871c138f56d5f7ae8be4b 0.0s => [internal] load build context 0.0s => => transferring context: 243.23kB 0.0s => [base 2/3] RUN sed -i 's/dl-cdn.alpinelinux.org/mirrors.aliyun.com/g' /etc/apk/repositories 0.2s => [base 3/3] RUN apk add --no-cache libc6-compat 1.2s => [builder 1/6] WORKDIR /app 0.0s => [runner 2/4] RUN mkdir .next 0.3s => [deps 2/6] COPY package.json yarn.lock* package-lock.json* pnpm-lock.yaml* pnpm-workspace.yaml* ./ 0.0s => [deps 3/6] COPY explorer/package.json ./explorer/package.json 0.0s => [deps 4/6] COPY explorer-manager/package.json ./explorer-manager/package.json 0.0s => [deps 5/6] RUN npm config set registry https://registry.npmmirror.com/ 1.3s => [deps 6/6] RUN if [ -f yarn.lock ]; then yarn --frozen-lockfile; elif [ -f package-lock.json ]; then npm ci; elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; else echo "Lockfile not found." && exit 1; fi 14.1s => [builder 2/6] COPY --from=deps /app/node_modules ./node_modules 3.5s => [builder 3/6] COPY --from=deps /app/explorer/node_modules ./explorer/node_modules 0.0s => [builder 4/6] COPY --from=deps /app/explorer-manager/node_modules ./explorer-manager/node_modules 0.0s => [builder 5/6] COPY . . 0.0s => [builder 6/6] RUN npm run explorer-build 84.8s => [runner 3/4] COPY --from=builder --chown=1000:100 /app/explorer/.next/standalone ./ 0.2s => [runner 4/4] COPY --from=builder --chown=1000:100 /app/explorer/.next/static ./explorer/.next/static 0.0s => exporting to image 0.3s => => exporting layers 0.3s => => writing image sha256:cf1f902944d3fcf3e938c8136b781566500b90d9ff79b122c53ecdad035671ef 0.0s => => naming to 192.168.31.17:5000/tool-manager/explorer
Building 111.4s (23/23) FINISHED 差不多兩分鐘時間完成了鏡像的構建。
查看鏡像信息
$ docker images REPOSITORY TAG IMAGE ID CREATED SIZE 192.168.31.17:5000/tool-manager/explorer latest cf1f902944d3 2 minutes ago 161MB
大小為：161MB
推送鏡像
開發(fā)機器執(zhí)行
$ npm run explorer-push-docker > share-explorer@1.0.0 explorer-push-docker > docker push 192.168.31.17:5000/tool-manager/explorer Using default tag: latest The push refers to repository [192.168.31.17:5000/tool-manager/explorer] 60f05a6e16d5: Pushed eee1f67860e5: Pushed ff64dffbca6a: Pushed fcc511c2a1f1: Pushed e44450d578c0: Pushed b20d27ca648d: Pushed 45956122da26: Layer already exists e0df4b6a3449: Layer already exists 86d11448d6ef: Layer already exists cc2447e1835a: Layer already exists latest: digest: sha256:3b510f7e600e08d8fe7fb2074053a9272385a6d0833ff9e984563d3b1661425b size: 2409
拉取運行容器
需要部署的機器上執(zhí)行
docker-compose -f explorer.docker-compose.yml up -d
常用 docker 命令
查看當前 docker 的磁盤占用
$ docker system df TYPE TOTAL ACTIVE SIZE RECLAIMABLE Images 3 0 364.2MB 364.2MB (100%) Containers 0 0 0B 0B Local Volumes 1 0 0B 0B Build Cache 74 0 4.481GB 4.481GB
刪除構建鏡像緩存
$ docker builder prune
構建并后臺啟動
$ docker-compose up --build -d
刪除使用狀態(tài)的 volumes
$ docker system prune -a
清除懸空鏡像
$ docker image prune
以上就是Next.js Docker鏡像私有部署從零實現的詳細內容，更多關于Next.js Docker鏡像私有部署的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家介紹了docker push遇到unknown blob問題解決,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
本文介紹在centos7 docker環(huán)境下使用pipework腳本對容器分配固定IP。小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-01-01
使用Docker部署Nacos并配置MySQL數據源的詳細步驟
Nacos是阿里巴巴開源的服務發(fā)現、配置管理和服務管理平臺,它提供了注冊中心和配置中心的功能,能夠輕松地管理微服務的注冊與發(fā)現,以及動態(tài)配置的管理,這篇文章主要給大家介紹了關于使用Docker部署Nacos并配置MySQL數據源的超詳細步驟,需要的朋友可以參考下2024-05-05
在Vue.js中，watch屬性是一種非常重要的屬性，它可以監(jiān)聽Vue實例中指定的數據變化，并在數據發(fā)生變化時執(zhí)行相應的操作,本文將對 Vue.js中的watch屬性進行詳細的介紹，并附上相關的代碼示例,需要的朋友可以參考下2023-06-06
這篇文章主要為大家介紹了前端項目容器化Docker打包部署方式詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-11-11
隨著容器化技術的廣泛應用,Docker成為了一種非常流行的容器化解決方案,本文主要介紹了Docker使用java項目工程的部署,具有一定的參考價值,感興趣的可以了解一下2024-03-03
這篇文章主要介紹了Docker 查看鏡像信息的方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-12-12
這篇文章主要介紹了Docker案例分析:搭建Redis服務方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-12-12
使用docker搭建一套開發(fā)環(huán)境全家桶的詳細教程
這篇文章主要介紹了使用docker搭建一套開發(fā)環(huán)境全家桶,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-09-09
本文主要介紹了Docker查看容器IP地址的方法實現，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-06-06