A front-end unfamiliar with Docker, made a Vue automated deployment image

preface

After two weeks of studying how to build automated deployments for Vue using Docker, Jenkins, and Nginx, I found that as a front-end engineer unfamiliar with operations and deployment, it was a slightly expensive job to learn, so after many trips, Decided to take what seemed like a silly approach to making an image that could easily be deployed automatically.

This image is constantly updated, please check docker-Hub for details.

In front of the warning

In order to simplify the use of images, I have saved all dependencies in one image, so this image is relatively large (1.2GB (1,208,070,144 bytes)), based on Ubuntu:20.04 Docker image (but this image can run on any docker-enabled system, There are no environmental limitations).

For version 0.2 I scaled it down to 1.05 GB.

But the downside is also the upside. This image works right out of the box.

I’ve already pushed this image into the Docker Hub, so you don’t have to make it yourself, the epilogue tells you how to get it.

In this article I’ll walk you through the process of building this image, and in the next article I’ll show you how to use it (based on Gitee).

This image contains

Based on Docker-Ubuntu :20.04
Vim – For editing
Nodejs + NPM (+ NVM (v0.2)) (not up to date due to apt installation, but sufficient to support most projects) (You can also install Node and NPM your way)
nginx
wget
Sudo – Used to provide Jenkins with root privileges
Jenkins + open-JDK-8 (provides the Jenkins runtime environment)
Systemctl – Used to start Jenkins
git

In addition, I will also change the apt, NPM and Jenkins plugins in the mirror to domestic sources.

The default Vue uses a router of type history, so nginx configuration is modified.

The body of the

Install the Docker

For the installation and use of Docker, you can refer to Docker – from getting Started to Practice this book, although you do not need to have too much Docker knowledge to use this image, I still recommend you to read until the visit to the warehouse section.

In addition, I recommend you to set Docker to domestic source, the specific setting method is described in this book, do not forget to execute Docker info to check whether the image configuration is successful.

Be careful not to copy the code block on this site by clicking on the upper right corner; it copies the annoying $prompt as well.

To start, pull Ubuntu:20.04 image

Docker pull ubuntu: 20.04Copy the code

Boot image

Remember to check whether port 8080 and port 80 of the local machine are occupied to prevent a failure.

Docker run -d it -p 8080:8080 -p 80:80 --name vue-deploy Ubuntu :20.04 /bin/bashCopy the code

View the container status after the image is started

docker ps

# output
# 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
Copy the code

Into the container

docker exec -it vue-deploy bash

# output
# root@735df44740ba:/# 
Copy the code

Update APT, install Vim, update APT source as netease 163 source

To update the apt source

If you run apt install vim directly, it will no doubt report an error, we need to update apt first.

Since the update is an official ubuntu source, the speed will be slow, please wait patiently.

apt update

You can't recognize the sudo command because there is no sudo, but you are the root user and there is no need for sudo.
# output
# 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]        
#...
# touch17.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.
Copy the code

Install vim

apt install vim
Copy the code

The speed will still be slow (about 3-5 minutes), please be patient.

Modify the apt source

cd /etc/apt
# backup
mv sources.list sources.list.bak

vim sources.list
Copy the code

Press I to copy and paste the following, then press Esc and type :wq to save. Be careful not to use other sources, which are more or less problematic in Docker, including Ali-source.

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
Copy the code

Update apt source again.

apt update
# output
# Get:1 http://mirrors.163.com/ubuntu focal InRelease [265 kB]
#...
# touch32.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.
Copy the code

Install the required Environment

Install sudo

apt install sudo
Copy the code

You can use

sudo passwd
sudo passwd root
Copy the code

Set your password

Install systemctl

apt install systemctl
Copy the code

Install wget and curl

apt install wget curl
Copy the code

Install NodeJS and NPM

Here we use NVM to install NodeJS and NPM. First we need to install NVM.

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

Check whether the installation is successful

nvm -v
# 0.37.2
Copy the code

Example Set the NVM Taobao image

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

Then install nodeJS with NVM.

nvm install --lts
Copy the code

Xmolan/Ubuntu :0.2 has updated the installation scheme with the addition of the NVM version controller. Here is the installation scheme for Xmolan/Ubuntu :0.1.

apt install nodejs
apt install npm
# NPM is especially large because of its many dependencies. This image is mostly NPM dependent.
Copy the code

When nodeJS is installed, it will prompt you to choose your location. We are in Asia and the time zone is Shanghai, so just enter 6 and 70 respectively.

node -v
# v10.19.0
npm -v
# 6.14.4
Copy the code

I’ll talk about NPM modifying images later

Checking the Installation

node -v
# v14.15.4
npm -v
# 6.14.10
Copy the code

Install the Java environment – for running Jenkins

apt install openjdk-8-jdk
Copy the code

Checking the Installation

java -version
# its version "1.8.0 comes with _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)
Copy the code

Install git

apt install git
Copy the code

git --version
Copy the code

Install nginx

apt install nginx
Copy the code

nginx -v
Copy the code

Modify NPM and Nginx configurations

npm

Here we modify the source using NRM

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

nginx

Modify the configuration of Nginx to provide a vue-Router history mode environment.

cd /etc/nginx/sites-available
vim default
Copy the code

Go to line 51 (type 51 in VIm and press Enter) and modify the try_files section below.

The original

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

The modified

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;
        }
Copy the code

Press Esc to save and exit :wq.

Xmolan/Ubuntu :0.2 also sets nginx gzip compression and adds the default Cache Cache configuration. The default file after modification is as follows:

## # 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; }}Copy the code

Note that comments cannot be removed.

Restart the nginx

nginx -s reload
Copy the code

Open a browser and enter your server’S IP address, with or without port 80, to see if nginx is running successfully.

For remote servers, remember to turn on ports 80 and 8080.

Install and configure Jenkins

This part is more difficult than other parts, so it is explained separately.

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

# output
# Get: 1 http://mirrors.163.com/ubuntu focal/main amd64 psmisc amd64 23.3 1 [53.3 kB]
#...
# touch67.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.
Copy the code

Jenkins for the first time

systemctl start jenkins
Copy the code

Modified Jenkins plugin update source

cd /var/lib/jenkins
vim hudson.model.UpdateCenter.xml
Copy the code

The original


      
<sites>
  <site>
    <id>default</id>
    <url>https://updates.jenkins.io/update-center.json</url>
  </site>
</sites>
Copy the code

Modifying the URL section


      
<sites>
  <site>
    <id>default</id>
    <url>https://mirrors.tuna.tsinghua.edu.cn/jenkins/updates/update-center.json</url>
  </site>
</sites>
Copy the code

Provide Jenkins with sudo access

The first thing you can do is give Jenkins a sudo password

sudo passwd jenkins
Copy the code

Give Jenkins access to Sudo

visudo
Copy the code

On the last line add (here I set Jenkins’ SUdo to not require a password)

jenkins ALL=(ALL) NOPASSWD: ALL
Copy the code

You can test it by entering Jenkins with Su Jenkins.

You can create a new file in any system directory touch and then rm deletes it to see if it succeeds. Then type exit to return to root.

Restart the Jenkins

systemctl restart jenkins
Copy the code

check

Enter the server IP address and port 8080 in your browser to see if the Jenkins unlock page appears.

summary

At this point, we’ve installed all the necessary environments in the container, you can unlock Jenkins and install the recommended plugins, but I recommend you save the container as an image and export it as a baseline.

Export the mirror

First, if you’re still in the Docker container, type exit to exit.

Export the container as a tar file.

docker export vue-deploy > vue_deploy.tar
Copy the code

Due to the large size of the file, it may take more than ten seconds.

You can import this image on any machine with a Docker environment configured.

Cat vue_deploy. Tar | docker import - vue/ubuntu: 0.1Copy the code

Then run a container.

Docker run -d -p 8080:8080 -p 80:80 --name vue-deploy-1 it vue/ Ubuntu :0.1 /bin/bash docker run -d -p 8080:80 --name vue-deploy-1 it vue/ Ubuntu :0.1 /bin/bashCopy the code

It will preserve all the work we just did intact.

Don’t forget the command to enter the container

docker exec -it vue-deploy-1 bash
Copy the code

conclusion

If you have Jenkins and Nginx knowledge, this image is completely out of the box for you.

If you have sufficient Docker knowledge and experience, you may feel that this method is not economical at all, nor Docker, and it wastes too many resources. I don’t mind, it’s 1.2 gigabytes.

However, this approach has what I consider the unshakable merit of “it works”. In the past month, I have been searching on the Internet for how to automate the deployment of vue project, but there has been no satisfactory solution, so I decided to make an image by myself. Although I did not have sufficient knowledge of Docker, I failed to use Dockerfile and Docker-compose to configure image and container for several times. So it’s a pretty stupid way to do it.

But this is a portable automated configuration Vue solution, and it works!

In the next chapter, I’ll show you how to use this image to automate your configuration with Gitee. It’s easy, but I’ll start from scratch and teach you how to make sure that you don’t have to automate your deployment.

Also, I’ve pushed this image to docker.io, through

docker search xmolan

# NAME DESCRIPTION STARS OFFICIAL AUTOMATED
# xmolan/ubuntu 0Docker 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
Copy the code

Version 0.2 has now been uploaded, which is smaller in size and more configurable, reducing the mechanical operations required by the general Vue developers.

Enter Docker pull xmolan/ Ubuntu :0.2 to obtain it. 【 2021-02-15 】

You can find the image and pull it down.

If the network condition is not good, I will also put this image on baidu cloud disk

Link: https://pan.baidu.com/s/1ymCtbSPAdFaD5NGiMHZDWQ extraction code: yshwCopy the code