---
tags: 基礎
---
###### tags: `docker`、`vue`、`jenkins`、`nginx`

# ♨ Day 0 Docker + Jenkins + Vue + Nginx


準備
----------
* Docker: Docker version 20.10.12
* VMware虛擬機
* VMware中安裝 Ubuntu: version 20.04
* node: version 14.20
* vue(在虛擬機or windows主機中皆可): version @vue/cli 5.0.8

Linux安裝Docker
----------

apt-get update
apt-get install sudo
sudo apt-get install docker.io

拉取 Jenkins 拉取镜像
----------

sudo docker pull jenkins/jenkins:jdk11

啟動container
----------

docker run -u root  \
    -d \
    -p 9999:8080  \
    -p 50000:50000  \
    -v /var/jenkins_home:/var/jenkins_home \
    -v /var/run/docker.sock:/var/run/docker.sock \
    -v /usr/bin/docker:/usr/bin/docker \
    -v /etc/hosts:/etc/hosts \
    -v /app/maven/apache-maven-3.8.6:/app/maven/apache-maven-3.8.6 \
    -v /root/.m2:/root/.m2 \
    -e TZ='Asia/Shanghai' \
    --name dp-jenkins \
    jenkins/jenkins:jdk11

說明:
* -v /usr/bin/docker:/usr/bin/docke : 掛載映射，是將本地主機(linux)的 docker 命令掛載到容器(jenkins)中。
* /var/jenkins_home:/var/jenkins_home : 掛載映射，映射 jenkins 的目錄（含 workspace），保證磁盤空间充足。

快速编寫一個 vue 專案
--------
安裝nodejs、npm

sudo apt install curl
curl -fsSL https://deb.nodesource.com/setup_14.20 | sudo -E bash -
sudo apt-get install -y nodejs

安裝vue

sudo npm install @vue/cli@5.0.8

創建vue專案

vue create vue-test

push vue專案

git push origin master

在專案中的跟目錄新增檔案Dockerfile

# 依赖 nginx 容器
# FROM hyuhua616/vue-jenkins
FROM nginx:stable-alpine as production-stage

# 作者
MAINTAINER songxiaoguang

# 首先删除 nginx default.conf 文件
RUN rm /etc/nginx/conf.d/default.conf

# 用本地的 default.conf 替换 nginx 镜像的默认配置
ADD default.conf /etc/nginx/conf.d/

# 将项目打包后的 dist 目录，拷贝到 default.conf 指定的发布目录 
COPY dist/ /usr/share/nginx/html

在專案中得跟目錄新增檔案default.conf

server {
    listen       80;
    server_name  127.0.0.1; # 127.0.0.1
    # 修改 docker 服务宿主机 IP

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html =404;
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   html;
    }
}

說明:
* localhost:80為該網頁之網址

配置 jenkins
----------
網址輸入https://localhost:9999


查詢initialAdminPassword

cat /var/lib/secrets/initialAdminPassword



不建立新的帳號密碼(只以admin作為帳號，initialAdminPassword作為密碼)

### 添加nodejs插件
\

\

點選安裝

設定nodejs版本

### 創建項目

設定


說明:
* 設定要部署的Repository路徑

\

下方框格輸入以下指令:

#!/usr/bin/env bash
npm cache clean --force

rm -rf node_modules 

rm -rf package-lock.json

npm run build

# 删除历史镜像
cur_img=$(docker images | grep hyuhua616/vue-jenkins | awk '{print $3}')

if [ -z "$cur_img" ]
then
      echo "\$cur_img is empty"
else
      echo "\$cur_img is NOT empty"
     docker rmi --force $cur_img
fi

# 构建镜像
docker build . -t hyuhua616/vue-jenkins

# 登入
docker login -u hyuhua616 -p wendy860405

# 推送镜像
docker push hyuhua616/vue-jenkins

說明:
* cur_img=$(docker images | grep hyuhua616/vue-jenkins | awk '{print $3}')的hyuhua616/vue-jenkins 為DockerHub中的image名稱(須先在dockerhub建立一image，參考[文章](https://hackmd.io/n9WEHaw6T-adRxmW11fksw#%E5%9C%A8-DockerHub-%E4%B8%8A%E6%96%B0%E5%A2%9E%E4%B8%80%E5%80%8B-Repository))
* docker build . -t hyuhua616/vue-jenkins: ==hyuhua616/vue-jenkins==
* docker push hyuhua616/vue-jenkins: ==hyuhua616/vue-jenkins==
* docker login -u hyuhua616 -p wendy860405: docker帳號密碼

結果:

測試網頁
---------
虛擬機Linux中開啟image來啟動container

sudo docker run -p 8080:80 -d hyuhua616/vue-jenkins

網頁輸入localhost:8080

參考:
* [Docker + Jenkins + Vue 项目，持续集成](https://www.modb.pro/db/428360)
* [Deployment Pipeline using Docker, Jenkins, Java and Couchbase](https://blog.couchbase.com/deployment-pipeline-docker-jenkins-java-couchbase/)
* [使用docker,docker-compose,jenkins,git自动部署属于自己的https项目(ssm和vue项目的部署方法)](https://www.jianshu.com/p/a9417b074f1a)
* [linux环境下jenkins自动化打包部署](https://blog.csdn.net/u011683819/article/details/103895857)
* [jenkins+docker+vue項目的自動部署環境(案例)](https://codertw.com/%E7%A8%8B%E5%BC%8F%E8%AA%9E%E8%A8%80/726289/#outline__6_0_2)
* [jenkins+docker+nginx+vue前端项目实现自动部署](https://www.cnblogs.com/spll/p/15553419.html)

docker -u <帳號> -p <密碼>
* [How To Push a Docker Image To Docker Hub Using Jenkins](https://medium.com/codex/how-to-push-a-docker-image-to-docker-hub-using-jenkins-487fb1fcbe25)
* [docker login](https://docs.docker.com/engine/reference/commandline/login/)