Build front-end continuous integration development environment based on Docker

Transfer:https://juejin.cn/post/6844903512959107080

This paper will take a standard Vue project as an example, completely abandon the traditional front-end project development and deployment mode, and build a streamlined front-end continuous integration development environment based on Docker container technology.

Pre-knowledge:

CI (Continuous Integration) : Teacher Ruan Yifeng’s introduction of CI

Docker: Quick start with Docker

Goal:

1. Code does not need to be built locally

2. Simply push the code to Github and build -> deploy automatically

3. The version is easy to manage and roll back

Now let’s get to the point

Step 1: Initialize the Vue project (using the Vue official scaffoldingvue-cli)

1. Initialize vUE project: vue init webpack vue-docker-demo

2. Compile Dockerfile in the root directory of the project

(If you are building other projects like Angular4, just install Angular-CLI and change the build parameter to ng build. Similar)

FROM node:6.10.3-slim RUN apt-get update \ && apt-get install -y nginx WORKDIR /app COPY. /app/ EXPOSE 80 RUN NPM install \ && npm run build \ && cp -r dist/* /var/www/html \ && rm -rf /app CMD ["nginx"."-g"."daemon off;"]
Copy the code

3. Initialize Git, connect and push code to Github repository

Step 2: UseDaoCloudBuild the Devops process

(You can also use other public cloud services, but the difference is not much. This article will use DaoCloud, which is easy to use and free to individual developers, as an example.)

1. Register an DaoCloud account

2. User-centric -> Code hosting, granting access to your Github repository

2. Create a new project in the Devops project and select the corresponding project on Github

3. Manually build an image version so that you can use this image version to create an application

4. Connect to its own host (if there is no own host, the cloud testing environment can also be used)

Tips: You can buy Vultr and other hosts and complete host access according to the instructions. It is about three or four simple steps. Note that after completing the host connection, you need to manually start the Docker (Service Docker Start) on the host.

Cool, now that we’ve hooked our host into DaoCloud, let’s do the most interesting part.

5. Create an application

Go to [image repository] and select the image you just built manually, and deploy the latest version to the free host or cloud test environment

Wait a moment, then click Deploy Now

Wait until the image is pulled and the container in the container list is up, then check the vUE application deployed by the address

That’s great, we can have access to our deployment of vue application just now, also said that we will have our mirror deployment to our own host, enter the host for the container running situation at this time, you can see there is a running in the container, and what we’ve just deployed, everything is perfect.

At this point, we are 99% done, but the last 1%, which is really about customizing the continuous integration process to automate everything, let’s go back to the [process definition] of the Devops project

6. Define automatic build, automatic publish tasks

Go back to the Devops project and define the automation process

First let’s define the automatic build task. We set the rule to only execute the build task when there is a new tag, look up the Dockerfile in the root directory, and build the image from that

Next, let’s define the automatic publish task, which is automatically triggered when the build task is completed and published to the application on its own host

So now that we’ve done all the flow control work, let’s see if the whole process works, right?

Step 3: Test the process

Go back to our local, modify the text, submit it, push it to the remote, and type in our first version, Tag 1.0.0, and push the tag to the remote

As you can see, at the same time, our tagging triggers our defined CI process

Wait a moment and you’ll see that our app has been updated to version 1.0.0 that we just pushed up

We can also switch the version of the application, roll back and so on

So far, we have only written a Dockerfile configuration file, without scripting, successfully built a set of front-end continuous integration development environment, then we just need to concentrate on writing our business code, hit a Tag can easily complete automatic deployment online.

Of course, this is only a very simple naked application deployed on a single node. It does not involve nginx configuration, load balancing, back-end services, log collection, data storage, gray publishing, cluster management and other production environment requirements. If you are interested, please keep following my Docker series articles. All of these will be answered in my next article.