---
title: "使用Jenkins 部署 Next.js 至 Ubuntu 的 Kubernetes"
description: "詳述如何在 Ubuntu Linux 上整合 Jenkins 與 Kubernetes，建立從 GitHub 拉取程式碼、建置 Docker 映像、推送 Registry 到自動部署 Next.js 的完整 CI/CD Pipeline。"
canonical_url: "https://blog.markkulab.net/post/jenkins-deploy-nextjs-to-ubuntu-kubernetes"
author: "Mark Ku"
author_url: "https://blog.markkulab.net/author/mark-ku"
site: "Mark Ku's Blog"
date_published: "2024-11-17 01:01:35 +0800"
category: "DevOps"
tags: ["kubernetes", "docker", "ubuntu", "jenkins", "next.js", "pipeline", "ci/cd"]
language: "zh-TW"
license: "CC BY 4.0"
license_url: "https://creativecommons.org/licenses/by/4.0/"
attribution: "轉載或引用請註明作者並附上原文連結"
---

# 使用Jenkins 部署 Next.js 至 Ubuntu 的 Kubernetes

## 前言

[先前有研究 Windows Desktop 上的 Kubernetes 整合 jenkins](https://blog.markkulab.net/jenkins-deploy-kubernetes-with-docker-for-windows/)，這次來試著用Jenkins 整合 Linux 的 Kubernetes。

## 預先準備 
* Ubuntu 上己安裝 Docker、 Kubernetes、 Registy 
* Jenkins 
* Next JS 專案，裡面並寫好 yaml 檔

## 首先，要先安裝 Kubernetes Dashboard及產生 ServiceAccount 及 取得Token (這個token 是要拿去給jenkins 用的)
### 安裝 Kubernetes Dashboard
```bash
kubectl apply -f https://raw.githubusercontent.com/kubernetes/dashboard/v2.7.0/aio/deploy/recommended.yaml
```
### 建立 admin user 
```bash
sudo vim dashboard-adminuser.yaml
```
### 建立 admin user
```yaml
apiVersion: v1
kind: ServiceAccount
metadata:
  name: admin-user
  namespace: kubernetes-dashboard

---

apiVersion: rbac.authorization.k8s.io/v1
kind: ClusterRoleBinding
metadata:
  name: admin-user
roleRef:
  apiGroup: rbac.authorization.k8s.io
  kind: ClusterRole
  name: cluster-admin
subjects:
  - kind: ServiceAccount
    name: admin-user
    namespace: kubernetes-dashboard
```

### create service account 
```bash
kubectl apply -f dashboard-adminuser.yaml
```

### get admin token 
```bash
kubectl -n kubernetes-dashboard create token admin-user  --duration=876000h

```
### 啟動Proxy 
```
kubectl proxy
```

### 此時訪問以下連結即可登入Dashboard
```
http://localhost:8001/api/v1/namespaces/kubernetes-dashboard/services/https:kubernetes-dashboard:/proxy/#/login 
```
![dashboard](https://blog.markkulab.net/content/markku/posts/jenkins-deploy-nextjs-to-ubuntu-kubernetes/images/dashboard.png)

### 安裝 Jenkins 
參考先前撰寫的[文章](https://blog.markkulab.net/docker-jenkins-build-docker-image-and-github-integration/) 

### 在Jenkins 容器中中安裝 kubectl
```bash
docker exec -it -uroot jenkins bash // 進入jenkins 容器中
curl -LO https://storage.googleapis.com/kubernetes-release/release/v1.29.1/bin/linux/amd64/kubectl // 下載 kubectl
chmod +x ./kubectl // 給予權限
mv ./kubectl /usr/local/bin/kubectl // 複製到系統環境資料夾
kubectl version --client // 查詢版本
```
P.S. Unbuntu 和 Jenkins 容器的 kubectl 版本最好一致

### 複製 kubectl 設定至 Jenkins 容器中 (需要逐行執行)
```bash
docker exec -it -uroot jenkins /bin/bash 
mkdir -p /.kube
exit 
docker cp ~/.kube/config jenkins:/root/.kube 
```

### Jenkins 透過 Kubernetes CLI 連線 kubernetes 
1. 要想把jenkins關聯到Kubernetes中需要安裝幾個最件，打開  系統管理 > 套件管理
* Kubernetes plugin
* Kubernetes CLI Plugin
![install kubernetes plugin](https://blog.markkulab.net/content/markku/posts/jenkins-deploy-nextjs-to-ubuntu-kubernetes/images/install-kubernetes-plugin.png)
2. [set up cloud](http://localhost:8080/configureClouds/)
![set up cloud](https://blog.markkulab.net/content/markku/posts/jenkins-deploy-nextjs-to-ubuntu-kubernetes/images/set-cloud.png)
3. set Disable https certificate check => true  

![disable http certificate check](https://blog.markkulab.net/content/markku/posts/jenkins-deploy-nextjs-to-ubuntu-kubernetes/images/disable-http-certificate-check.png)
4. Kubernetes URL => 
Ubuntu 透過可以 kubectl cluster-info 查出 Url
![disable http certificate check](https://blog.markkulab.net/content/markku/posts/jenkins-deploy-nextjs-to-ubuntu-kubernetes/images/kubectl cluster-info.png.png)
```
https://192.168.50.50:6443  // 192.168.50.50是我家的Ubuntu 內網的主機IP
```
5. Jenkins URL
Jenkins URL:http://host.docker.internal:8080/
Jenkins tunnel:https://192.168.50.50:50000
6. Credentials =>
![add public key to jenkins](https://blog.markkulab.net/content/markku/posts/jenkins-deploy-nextjs-to-ubuntu-kubernetes/images/add-public-key-to-jenkins.png)
7. Copy dashboard token to here
![Copy dashboard token to here](https://blog.markkulab.net/content/markku/posts/jenkins-deploy-nextjs-to-ubuntu-kubernetes/images/copy-dashboard-token-to-here.png)

### 撰寫 Jenkins pipeline 
```groovy
properties([pipelineTriggers([githubPush()])])
pipeline {
    agent any 

    environment {
        tag = ':latest'
        imageShortName = 'k8s-next-ec'
        imageName = "${imageShortName}${tag}"
        containerName = "${imageShortName}-1"        
        dockerfile = "./Dockerfile"        
        registryUrl = "192.168.50.50:5000"
        registry = "${registryUrl}/${imageShortName}"
        
    }   
   
    stages {
        stage("GitHub Pull") {
             steps {
                git branch: 'main', 
                credentialsId: 'e85233ad-a3c5-448b-a6ea-9f53e4f9b3f1', 
                url:  'git@github.com:markku636/ec.git/'
            }
            
        }
        
          stage("Building Docker Image") {
			steps {
				script {
					dockerImage = docker.build "$registry${tag}"
				}
			}
		}
		
		stage("Deploying to Registry Server") {
			steps {
			    script {
				    docker.withRegistry("","") {
					  dockerImage.push("latest")
					}
			    }
			}
		}
        
        stage("Cleaning Up") {
            steps {
                sleep(time: 3, unit: "SECONDS")

                sh "docker rmi --force $registry:latest"
            }
        }                   
        
        stage("Deply") {
             steps {
                    withKubeConfig([credentialsId: 'k8s-secret', serverUrl: 'https://192.168.50.50:6443']) {                     
                     sh 'kubectl apply -f ./next-js-deployment.yaml'
					 sh 'kubectl rollout restart deployment/k8s-next-ec'
                    }
                
             }
        }                         
    }
}
```

## 在 Github next-ec 專案裡建立 Kubernetes 的 YAML 佈署設定檔(next-js-deployment.yaml) 
```yaml
apiVersion: apps/v1
kind: Deployment
metadata:
  name: k8s-next-ec
  labels:
    app: k8s-next-ec
spec:
  selector:
    matchLabels:
      app: k8s-next-ec
      tier: web
  template:
    metadata:
      labels:
        app: k8s-next-ec
        tier: web
    spec:
      containers:
      - name: k8s-next-ec-app
        image: 192.168.50.50:5000/k8s-next-ec:latest
        ports:
        - containerPort: 3000            
---

apiVersion: v1
kind: Service
metadata:
  name: k8s-next-ec
  labels:
    app: k8s-next-ec
spec:
  selector:
    app: k8s-next-ec
  type: NodePort
  ports:
    - name: http
      protocol: TCP
      port: 3000
      targetPort: 3000
      nodePort: 30066

```

此時執行 Jenkins 執行建置，應該己經可以看到成功。
![Jenkins 執行結果](https://blog.markkulab.net/content/markku/posts/jenkins-deploy-nextjs-to-ubuntu-kubernetes/images/final.png)

## 補充 - 如果遇到權限不足，出現以下錯誤

ERROR: permission denied while trying to connect to the Docker daemon socket at unix:///var/run/docker.sock: Head "http://%2Fvar%2Frun%2Fdocker.sock/_ping": dial unix /var/run/docker.sock: connect: permission denied
短解
```bash
sudo chmod 777 /var/run/docker.sock
```

長解

```
sudo nano /etc/systemd/system/docker-sock-permission.service
```

```
[Unit]
Description=Set permission on /var/run/docker.sock
After=docker.service
Requires=docker.service

[Service]
Type=oneshot
ExecStart=/bin/chmod 777 /var/run/docker.sock
RemainAfterExit=true

[Install]
WantedBy=multi-user.target

```
重新載入 systemd 並啟用服務
```
sudo systemctl daemon-reexec
sudo systemctl daemon-reload
sudo systemctl enable docker-sock-permission.service
sudo systemctl start docker-sock-permission.service
sudo systemctl status docker-sock-permission.service
```

## 參考
* [使用Kubernetes Dashboard GUI管理cluster](https://ciao-chung.com/page/article/kubernetes-dashboard-manage-cluster)
* [Upgrading Your Cloud Run CI/CD with Jenkins](https://manel-lemin.medium.com/upgrading-your-cloud-run-ci-cd-with-jenkins-92a3717e9f1c)
* [How to Deploy application on GKE using Jenkins](https://blog.knoldus.com/how-to-deploy-application-on-gke-using-jenkins/)

---

## 關於本文與作者

本文出自 [Mark Ku's Blog](https://blog.markkulab.net/post/jenkins-deploy-nextjs-to-ubuntu-kubernetes)

授權條款： [CC BY 4.0](https://creativecommons.org/licenses/by/4.0/) — 轉載或引用請註明作者並附上原文連結

### 關於作者

**[Mark Ku](https://blog.markkulab.net/author/mark-ku)** — Software Solution Provider

- 10+ 年資深軟體工程師，現為 AI 應用 Builder
- 專注大型平台架構設計，從北美電商到AI SaaS訂閱收費系統
- 結合 AI Agent 與自動化，打造高效可演進的產品技術基礎

### 作者開發的免費工具

以下工具皆可免費使用：

- [免費 PDF 簽名工具](https://blog.markkulab.net/tools/pdf-sign): 線上 PDF 簽名工具，瀏覽器內完成手繪、打字、上傳簽名，可拖曳放置、縮放、下載。所有處理都在你的裝置完成，檔案不會上傳。
- [VS Code Refactory](https://blog.markkulab.net/tools/refactory): Refactory 是一款 VS Code 重構擴充套件：34 個重構動作、37 條 code smell 檢查、Code Health 儀表板、18 種語言、534 支測試。懂你的專案慣例：介面放哪、DI 註冊寫在哪、'use client' 該不該加；還會用 git 修改頻率 × 複雜度排出「該先修哪個檔案」，並一鍵把壞味道交給你自己電腦上的 Claude Code 修。免費使用，原始碼不離開你的機器。
- [DB-Kit 資料庫管理工具](https://blog.markkulab.net/tools/db-kit): DB-Kit 是一個用 Tauri + Rust + React 打造的輕量跨平台資料庫管理工具，用單一一致的介面同時管理 MySQL、MariaDB、PostgreSQL、SQL Server、Oracle、SQLite、MongoDB、Redis、Kafka、Elasticsearch 與 RabbitMQ 十一種資料來源：連線密碼以 OS keychain 加密、SSH Tunnel、完整 CRUD、視覺化查詢建構器、多結果集同時顯示、跨連線資料傳輸與比對同步、Excel / CSV 匯入匯出、執行計畫視覺化、ER 圖、排程備份、SQL 壓力測試（p50～p99 延遲百分位）、15 條規則的 SQL 審查、Kafka 訊息瀏覽與監控告警；繁中 / 英文雙語介面，內建 AI 助手（自然語言生成 SQL、AI 審查與調校建議）與命令列工具 dbk。免費開源（MIT），提供 Windows / macOS / Linux 安裝檔。
- [VS Code Super Mermaid](https://blog.markkulab.net/tools/super-mermaid): Super Mermaid 是一款 VS Code 擴充套件：開箱即用的漂亮 Mermaid 圖表，自動上色、即時預覽、滑鼠平移縮放、PNG / SVG 高解析匯出，內建 21 種範本與多種主題。免費開源（MIT）。
- [React Super Mermaid](https://blog.markkulab.net/tools/react-super-mermaid): react-super-mermaid 是一個開源 React 元件庫：一行 <MermaidViewer> 即可渲染漂亮的 Mermaid 圖表，內建 colorful / sketch 主題、平移縮放、圖內搜尋、SVG / PNG 高解析匯出。輕量、SSR 安全、完整 TypeScript 型別。免費開源（MIT）。
- [Jira / Confluence Super Mermaid](https://blog.markkulab.net/tools/jira-super-mermaid): Atlassian Forge app：在 Jira issue 與 Confluence 內文直接寫 Mermaid 語法，畫流程圖、時序圖、狀態機與甘特圖。11 種圖表、SVG / PNG 匯出、明暗主題、完整中日韓文字支援。取得 Runs on Atlassian 資格：圖表存在你自己的站台，app 不呼叫任何第三方服務。免費，即將上架 Atlassian Marketplace。
- [Mermaid 線上預覽](https://blog.markkulab.net/tools/mermaid-preview): 在瀏覽器裡寫 Mermaid、即時看圖，整張圖表壓進網址就能分享。免註冊、不上傳伺服器，相容 mermaid.live 的分享連結。
- [React Intl Phone Number](https://blog.markkulab.net/tools/react-intl-phone-number): react-intl-phone-number 是一個開源 React 元件：framework-agnostic、不依賴 antd，提供 E.164 進出、可搜尋國旗 / 國碼下拉、可配置驗證等級（strict / mobile-strict / loose）、可主題化 CSS 與 i18n，電話邏輯由 google-libphonenumber 驅動。輕量、完整 TypeScript 型別。免費開源（MIT）。
- [Uptime Kuma Cluster](https://blog.markkulab.net/tools/uptime-kuma-cluster): 把單機版 Uptime Kuma 改造成高可用叢集：OpenResty + Lua 智慧負載平衡、MariaDB 共享狀態、健康檢查與自動 Failover，附叢集管理 REST API，一行 Docker Compose 啟動。免費開源（MIT）。
- [特教專案](https://blog.markkulab.net/education): 為特殊教育學生製作的學習教材

### 每日 Podcast

- [科技新鮮事](https://blog.markkulab.net/category/tech-news): 每日精選 AI 與科技趨勢，透過語音摘要快速掌握最新技術動態，涵蓋 AI 應用、軟體架構、DevOps 與工程實戰。 — RSS: https://blog.markkulab.net/feed.xml
- [AI股市蝦聊](https://blog.markkulab.net/category/ai-stock-chat): 每個交易日用 AI 分析台股盤勢，以雙人對話聊當天的盤中觀察與隔日預測。 — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml

### 電子報

[訂閱電子報](https://blog.markkulab.net/subscribe) — 第一時間收到新文章通知，無垃圾信、隨時可取消訂閱。