一个不熟悉Docker的前端，做了一个Vue自动化部署镜像

前言

在研究了两个星期如何使用Docker、Jenkins和Nginx为Vue构建自动化部署后，我发现作为一个不熟悉运维和部署的前端工程师来说，这是一项学习成本稍微有点高的工作，于是在我多次踩坑之后，决定采用一种看起来比较笨的办法来制作一个能轻易进行自动化部署的镜像。

本镜像持续更新，详情请关注 docker-hub 。

前排警告

为了最简单化镜像的使用，我将所有依赖都保存在了一个镜像中，因此这个镜像体积比较大（1.2 GB (1,208,070,144 bytes)），基于Ubuntu:20.04的Docker镜像（但这个镜像可以在任何支持Docker的系统中运行，并无环境局限）。

0.2 版本我将它缩小到了 1.05 GB。

但缺点也是优点，这个镜像能够做到开箱即用。

这个镜像我已经 push 到了 docker hub，所以你用不着亲自制作它，结语中有写如何获得它。

本文我将讲述该镜像的构建过程，下一篇文章将讲解如何使用该镜像（基于 Gitee）。

本镜像包含

基于 Docker - Ubuntu:20.04
Vim - 用于编辑
nodejs + npm (+ nvm (v0.2)) （由于使用apt安装，所以版本并不是最新的，但足够支持绝大部分项目使用）（你也可以用你的方式安装node和npm）
nginx
wget
sudo - 用于为 jenkins 提供 root 权限
jenkins + open-jdk-8 （提供jenkins运行环境）
systemctl - 用于启动 jenkins
git

除此之外，我还会将镜像中的apt、npm、jenkins插件修改为国内源。

默认Vue使用history类型的router，因此会修改nginx的配置。

正文

安装 Docker

对于 Docker 的安装和使用，可以参考Docker —— 从入门到实践这本书，虽然使用本镜像，你不需要拥有太多的Docker知识，但我还是推荐你一直阅读到访问仓库这一节。

另外，我推荐你将Docker设置成国内源，具体设置方式这本书里有讲，别忘了执行docker info查看镜像配置是否成功。

注意不要在这个网站点击代码块右上角进行复制，它会把烦人的提示符 $ 也复制进来。

起步，拉取Ubuntu:20.04镜像

docker pull ubuntu:20.04

启动镜像

记得检查本机的 8080 端口和 80 端口是否已经被占用，防止失败。

docker run -d -it -p 8080:8080 -p 80:80 --name vue-deploy ubuntu:20.04 /bin/bash

查看镜像启动后的容器状态

docker ps

# 输出
# CONTAINER ID   IMAGE          COMMAND       CREATED         STATUS         PORTS                                        NAMES
# 735df44740ba   ubuntu:20.04   "/bin/bash"   4 seconds ago   Up 4 seconds   0.0.0.0:80->80/tcp, 0.0.0.0:8080->8080/tcp   vue-deploy

进入容器

docker exec -it vue-deploy bash

# 输出
# root@735df44740ba:/#

更新apt，安装Vim，更新apt源为网易163源

更新apt源

如果你直接运行 apt install vim，它将毫无疑问的报错，我们首先要进行apt的更新。

由于更新的是ubuntu官方源，所以速度会比较慢，请耐心等待。

apt update

# 注意，由于没有sudo，所以暂时无法识别 sudo 命令，不过你本身就是root用户，没有sudo的必要。
# 输出
# root@735df44740ba:/# apt update
# Get:1 http://archive.ubuntu.com/ubuntu focal InRelease [265 kB]             
# Get:2 http://security.ubuntu.com/ubuntu focal-security InRelease [109 kB]        
# ...                                                                       
# Fetched 17.0 MB in 20s (856 kB/s)                                                                                                                                    
# Reading package lists... Done
# Building dependency tree       
# Reading state information... Done
# 5 packages can be upgraded. Run 'apt list --upgradable' to see them.

安装vim

apt install vim

速度仍然会比较慢（大概3-5分钟），请耐心等待。

修改apt源

cd /etc/apt
# 备份
mv sources.list sources.list.bak

vim sources.list

按 i 把以下内容复制粘贴进去，然后按esc输入:wq保存。注意不要使用其它源，其它源在docker中多多少少有点问题，包括阿里源。

deb http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse
deb http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ focal main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ focal-security main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ focal-updates main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ focal-proposed main restricted universe multiverse
deb-src http://mirrors.163.com/ubuntu/ focal-backports main restricted universe multiverse

再次更新apt源。

apt update
# 输出
# Get:1 http://mirrors.163.com/ubuntu focal InRelease [265 kB]
# ...                  
# Fetched 32.1 MB in 7s (4771 kB/s)                                                                                             #                                        
# Reading package lists... Done
# Building dependency tree       
# Reading state information... Done
# 6 packages can be upgraded. Run 'apt list --upgradable' to see them.

安装必要环境

安装sudo

apt install sudo

你可以利用

sudo passwd
sudo passwd root

设置一下密码

安装systemctl

apt install systemctl

安装 wget 和 curl

apt install wget curl

安装nodejs和npm

这里我们利用 nvm 来安装 nodejs 和 npm。首先我们要安装 nvm 。

cd ~/
git clone https://gitee.com/odinjaign/nvm.git .nvm
cd ~/.nvm
git checkout v0.37.2
. ./nvm.sh
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

检查是否安装成功

nvm -v
# 0.37.2

设置 nvm 淘宝镜像

export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node

然后用 nvm 安装 nodejs。

nvm install --lts

xmolan/ubuntu:0.2 版本更新了安装方案，添加了 nvm 版本控制器，下面是 xmolan/ubuntu:0.1 版本的安装方案。

apt install nodejs
apt install npm
# npm 由于依赖很多，所以尤其大，这个镜像绝大部分都是npm的依赖。

安装nodejs的时候，它会提示你选择地理位置，我们是在亚洲，时区是上海，所以分别填写6和70就行了。

node -v
# v10.19.0
npm -v
# 6.14.4

后面我再讲npm修改镜像

检查安装成功

node -v
# v14.15.4
npm -v
# 6.14.10

安装java环境 - 用于运行jenkins

apt install openjdk-8-jdk

检查安装成功

java -version
# openjdk version "1.8.0_282"
# OpenJDK Runtime Environment (build 1.8.0_282-8u282-b08-0ubuntu1~20.04-b08)
# OpenJDK 64-Bit Server VM (build 25.282-b08, mixed mode)

安装git

apt install git

git --version

安装nginx

apt install nginx

nginx -v

修改npm和nginx配置

npm

这里我们利用nrm修改源

npm install -g nrm --registry=https://registry.npm.taobao.org
nrm ls
nrm use taobao

nginx

修改 nginx 的配置来让它提供 Vue-router history mode 的环境。

cd /etc/nginx/sites-available
vim default

找到第51行（在vim中直接输入51然后回车），修改下面的内容中的try_files部分。

原来

location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ =404;
        }

修改后

location / {
                # First attempt to serve request as file, then
                # as directory, then fall back to displaying a 404.
                try_files $uri $uri/ /index.html last;
        }

按esc保存退出:wq。

xmolan/ubuntu:0.2 还设置了 nginx 的 gzip压缩 并添加了默认缓存Cache配置。修改后的default文件如下：

## 
# You should look at the following URL's in order to grasp a solid understanding 
# of Nginx configuration files in order to fully unleash the power of Nginx. 
# https://www.nginx.com/resources/wiki/start/ 
# https://www.nginx.com/resources/wiki/start/topics/tutorials/config_pitfalls/ 
# https://wiki.debian.org/Nginx/DirectoryStructure 
# 
# In most cases, administrators will remove this file from sites-enabled/ and 
# leave it as reference inside of sites-available where it will continue to be 
# updated by the nginx packaging team. 
# 
# This file will automatically load configuration files provided by other 
# applications, such as Drupal or Wordpress. These applications will be made 
# available underneath a path with that package name, such as /drupal8. 
# 
# Please see /usr/share/doc/nginx-doc/examples/ for more detailed examples. 
## 
 
# Default server configuration 
gzip_min_length  1k;
gzip_buffers     4 16k;
gzip_http_version 1.1;
gzip_comp_level 6;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php application/javascript application/json;
gzip_disable  "MSIE [1-6]\.";
gzip_vary on;

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        # SSL configuration
        #
        # listen 443 ssl default_server;
        # listen [::]:443 ssl default_server;
        #
        # Note: You should disable gzip for SSL traffic.
        # See: https://bugs.debian.org/773332
        #
        # Read up on ssl_ciphers to ensure a secure configuration.
        # See: https://bugs.debian.org/765782
        #
        # Self signed certs generated by the ssl-cert package
        # Don't use them in a production server!
        #
        # include snippets/snakeoil.conf;

        
        root /var/www/html;
        index index.html index.htm index.nginx-debian.html;
        try_files $uri $uri/ /index.html last;
        
        server_name _;
        
        location / {
        }
        
        location ~* \.(html)$ {
                access_log off;
                add_header  Cache-Control  max-age=no-cache;
        }
        
        location ~* \.(css|js|png|jpg|jpeg|gif|gz|svg|mp4|ogg|ogv|webm|htc|xml|woff)$ {
                access_log off;
                add_header Cache-Control max-age=31536000;
        }
}

注意，注释不能删除。

重启nginx

nginx -s reload

打开浏览器输入你的服务器 ip 地址，加上或不加上80端口，查看是否成功运行了nginx。

如果是远程服务器，记得打开 80 和 8080 端口。

安装和配置jenkins

这一部分相较其他部分是难点，所以单独说明。

apt install gnupg gnupg2
wget -q -O - https://pkg.jenkins.io/debian/jenkins.io.key | sudo apt-key add -
# OK
sudo sh -c 'echo deb http://pkg.jenkins.io/debian-stable binary/ > /etc/apt/sources.list.d/jenkins.list'

sudo apt-get update
sudo apt-get install jenkins

# 输出
# Get:1 http://mirrors.163.com/ubuntu focal/main amd64 psmisc amd64 23.3-1 [53.3 kB]
# ...   
# Fetched 67.2 MB in 10s (6948 kB/s)                                                                                                                                   
# debconf: delaying package configuration, since apt-utils is not installed
# ...
# Unpacking jenkins (2.263.3) ...
# Setting up net-tools (1.60+git20180626.aebd88e-1ubuntu1) ...
# ...
# Setting up jenkins (2.263.3) ...
# invoke-rc.d: could not determine current runlevel
# invoke-rc.d: policy-rc.d denied execution of start.

第一次启动jenkins

systemctl start jenkins

修改jenkins插件更新源

cd /var/lib/jenkins
vim hudson.model.UpdateCenter.xml

原来

<?xml version='1.1' encoding='UTF-8'?>
<sites>
  <site>
    <id>default</id>
    <url>https://updates.jenkins.io/update-center.json</url>
  </site>
</sites>

修改URL部分

<?xml version='1.1' encoding='UTF-8'?>
<sites>
  <site>
    <id>default</id>
    <url>https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json</url>
  </site>
</sites>

为jenkins提供sudo权限

首先可以给jenkins设置sudo密码

sudo passwd jenkins

给予jenkins进sudo的权利

visudo

在最后一行加上（这里我设置了jenkins的sudo不需要输入密码）

jenkins ALL=(ALL) NOPASSWD: ALL

你可以通过 su jenkins 进入jenkins测试一下。

你可以在任意系统目录 touch 创建一个新文件然后 rm 删除它，看是否成功。然后输入exit返回到root用户。

重启jenkins

systemctl restart jenkins

检查

在浏览器输入服务器ip地址加上8080端口，查看是否出现解锁jenkins的页面。

小结

到此为止，我们已经在这个容器安装了所有必要的环境，你可以先解锁jenkins然后安装推荐的插件，但我推荐你先把这个容器保存成镜像导出出来，作为一个基准。

导出镜像

首先，如果你还在 docker 容器里，输入 exit 退出出来。

将容器导出成 tar 文件。

docker export vue-deploy > vue_deploy.tar

由于文件比较大，可能需要十几秒。

你可以在任何配置了 docker 环境的机器上导入这个镜像。

cat vue_deploy.tar | docker import - vue/ubuntu:0.1

然后运行一个容器。

docker run -d -p 8080:8080 -p 80:80 --name vue-deploy-1 -it vue/ubuntu:0.1 /bin/bash

它将原封不动地保存我们刚刚做的全部工作。

别忘了进入容器的命令

docker exec -it vue-deploy-1 bash

结语

如果你拥有jenkins和nginx的知识，这个镜像对你来说已经完全开箱即用了。

如果你具备充分的Docker知识和经验，可能会觉得这种办法一点都不经济，也不Docker，浪费了太多资源。我不反对，毕竟它有1.2G那么大。

但是，这种方式拥有我认为不可动摇的优点，“它能用”。这一个月来，我一直在网络上搜索如何自动化部署 vue 项目，一直没有让我足够满意的办法，所以我决定自己做一个镜像，虽然由于我并没有充分的Docker知识，好几次使用Dockerfile和Docker-compose配置镜像和容器都碰了壁，所以用的是一种很笨的办法。

不过这终究是一种可移植的自动化配置Vue方案，它能用啊！

下一章，我将讲述如何结合Gitee使用这个镜像实现自动化配置，也很简单，我将从零开始讲，手把手教你，保证让一点不会自动化部署的你享受到自动化部署的爽快。

另外，我已经将这个镜像 push 到了 docker.io ，通过

docker search xmolan

# NAME            DESCRIPTION   STARS     OFFICIAL   AUTOMATED
# xmolan/ubuntu                 0                    

docker pull xmolan/ubuntu:0.1
# 0.1: Pulling from xmolan/ubuntu
# caa1f254f516: Pull complete 
# Digest: sha256:02293915dca751224398c90eb3dacab9441ac0f14dc39de617176ccd727caafb
# Status: Downloaded newer image for xmolan/ubuntu:0.1
# docker.io/xmolan/ubuntu:0.1

docker images
# REPOSITORY              TAG          IMAGE ID       CREATED         SIZE
# xmolan/ubuntu           0.1          181648df79b5   18 hours ago    1.17GB

现已上传 0.2 版本，体积更小，配置更丰富，减少了对一般Vue开发者需要配置的机械性操作。

输入 docker pull xmolan/ubuntu:0.2 即可获取。【2021-02-15】

可以找到这个镜像，并且 pull 下来。

如果网络状况不好的话，我也将这个镜像放在了百度云盘

链接：https://pan.baidu.com/s/1ymCtbSPAdFaD5NGiMHZDWQ 
提取码：yshw