Using docker container to deploy front-end and back-end separation project Django + vue.js in win10 environment

Time:2021-5-8

The original text is reproduced from “Liu Yue’s technology blog”https://v3u.cn/a_id_179

With the continuous development of modern product research and development, we will find that almost every product line will contain services with different functions, and there will be complex dependency and dependent relationship between services, which will bring a worldwide problem. When the project is deployed, it needs operation and maintenance to manually configure the protocol and address of communication between services, A little carelessness will lead to service exceptions. At the same time, if the server changes the physical machine due to bad roads or other reasons, the cost of re deploying the new environment will be very high. Therefore, we hope that the container technology like docker can enable us to quickly and quickly re deploy all the services we need to build the product, and can do horizontal expansion according to the demand, and can ensure stable disaster recovery. In case of problems, we can use the daemons to automatically restart or start disaster recovery backup.

This time, we will use docker container technology to package the front-end and back-end separation project Django + vue.js in win10 environment, and customize the corresponding project images to meet the needs of rapid deployment and high expansion.

The first step is to install docker. You can refer to this video introduction:Install and configure docker in win10 and replace domestic source

Then install gunicorn on the host, and we start Django asynchronously in the container

pip3 isntall gunicorn gevent

Django project configuration settings.py corresponding application:

# Application definition  
  
INSTALLED_APPS = [  
    'django.contrib.admin',  
    'django.contrib.auth',  
    'django.contrib.contenttypes',  
    'django.contrib.sessions',  
    'django.contrib.messages',  
    'django.contrib.staticfiles',  
    'corsheaders',  
    'rest_framework',  
    'myapp',  
    'dwebsocket',  
    'gunicorn'  
]

Then write the configuration file of gunicorn in the root directory of Django project: gunicorn.conf.py

import multiprocessing  
  
Bind = "0.0.0.0:8000" # bound IP and port  
Workers = 1 # number of processes

Note here that the IP must be 0.0.0.0, not 127.0.0.1, otherwise the external environment will not be able to access the services in the container. Next, write a dependency list in the root directory of the project: requirements.txt

Django==2.0.4  
django-cors-headers==2.5.3  
djangorestframework==3.9.3  
celery==4.4.2  
dwebsocket==0.5.12  
redis==3.3.11  
pymongo==3.8.0  
PyMySQL  
Pillow  
pyjwt  
pycryptodome  
selenium  
qiniu  
gunicorn  
gevent

It should be noted that some dependent libraries should be marked with small versions with = = because the system may automatically install the latest version for you when you install them in the container through PIP later, resulting in some dependency errors.

The following is the old routine: write dockerfile file in the root directory:

FROM python:3.7  
WORKDIR /Project/mydjango  
  
COPY requirements.txt ./  
RUN pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple  
  
COPY . .  
ENV LANG C.UTF-8  
  
CMD ["gunicorn", "mydjango.wsgi:application","-c","./gunicorn.conf.py"]

We choose 3.7 for this basic mirror image. After all, it is necessary to keep pace with the times since 2020.

OK, everything is ready. Run the command to package the project

[email protected] MINGW32 ~/www/mydjango (master)  
$ docker build -t 'mydjango' .  
Sending build context to Docker daemon  17.57MB  
Step 1/7 : FROM python:3.7  
 ---> 5b86e11778a2  
Step 2/7 : WORKDIR /Project/mydjango  
 ---> Using cache  
 ---> 72ebab5770a2  
Step 3/7 : COPY requirements.txt ./  
 ---> Using cache  
 ---> b888452d1cad  
Step 4/7 : RUN pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple  
 ---> Using cache  
 ---> a576113cff5a  
Step 5/7 : COPY . .  
 ---> 5c5247d5a743  
Step 6/7 : ENV LANG C.UTF-8  
 ---> Running in af84623622a6  
Removing intermediate container af84623622a6  
 ---> f3d876487dab  
Step 7/7 : CMD ["gunicorn", "mydjango.wsgi:application","-c","./gunicorn.conf.py"]  
 ---> Running in d9392807ae77  
Removing intermediate container d9392807ae77  
 ---> c3ffb74ae263  
Successfully built c3ffb74ae263  
Successfully tagged mydjango:latest  
SECURITY WARNING: You are building a Docker image from Windows against a non-Windows Docker host. All files and directories added to build context will have '-rwxr-xr-x' permissions. It is recommended to double check and reset permissions for sensitive files and directories.

One thing to note here is to enter the directory of the project for execution

docker build -t 'mydjango' .

My project directory here is mydjango.

During the first packaging compilation, it may take a long time. Just be patient for a while. If you encounter a failure caused by a network error, you can repeatedly execute the packaging command. At this time, run the command:

docker images

You can see that the compiled image is about 1g

[email protected] MINGW32 ~  
$ docker images  
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE  
mydjango            latest              c3ffb74ae263        24 hours ago        1.04GB

Then start the image service:

docker run -it --rm -p 5000:8000 mydjango

Here, we use the port mapping technology to map the 5000 port of the host to the 8000 port in the container to access the Django service,Http: / / container IP:5000

Using docker container to deploy front-end and back-end separation project Django + vue.js in win10 environment

The back-end is done, and then it’s our front-end service vue.js. First, open the Vue project’s packaging configuration file config / index.js:

build: {  
    // Template for index.html  
    index: path.resolve(__dirname, '../dist/index.html'),  
  
    // Paths  
    assetsRoot: path.resolve(__dirname, '../dist'),  
    assetsSubDirectory: 'static',  
    assetsPublicPath: './',  
  
    /**  
     * Source Maps  
     */  
  
    productionSourceMap: true,  
    // https://webpack.js.org/configuration/devtool/#production  
    devtool: '#source-map',  
  
    // Gzip off by default as many popular static hosts such as  
    // Surge or Netlify already gzip all static assets for you.  
    // Before setting to `true`, make sure to:  
    // npm install --save-dev compression-webpack-plugin  
    productionGzip: false,  
    productionGzipExtensions: ['js', 'css'],  
  
    // Run the build command with an extra argument to  
    // View the bundle analyzer report after build finishes:  
    // `npm run build --report`  
    // Set to `true` or `false` to always turn it on or off  
    bundleAnalyzerReport: process.env.npm_config_report  
  }  
}

Change the packing directory to a relative path. At the same time, pay attention to the routing configuration. If you have ever changed it to history mode, remember to change it back to hash:

export default new Router({  
  routes:routes,  
  //mode:'history'   /*hash*/  
})

After the preparation, write dockerfile in the root directory of Vue

FROM node:lts-alpine  
  
# install simple http server for serving static content  
RUN npm install -g http-server  
  
# make the 'app' folder the current working directory  
WORKDIR /app  
  
# copy both 'package.json' and 'package-lock.json' (if available)  
COPY package*.json ./  
  
# install project dependencies  
RUN npm install  
  
# copy project files and folders to the current working directory (i.e. 'app' folder)  
COPY . .  
  
# build app for production with minification  
RUN npm run build  
  
EXPOSE 8080  
CMD [ "http-server", "dist" ]

Here we choose a smaller Alpine image.

Then enter the root directory of the project and execute the packing command:

docker build -t myvue .

My front-end directory here is myvue

[email protected] MINGW32 ~/www/myvue (master)  
$ docker build -t myvue .  
Sending build context to Docker daemon  202.1MB  
Step 1/9 : FROM node:lts-alpine  
lts-alpine: Pulling from library/node  
cbdbe7a5bc2a: Pull complete  
4c504479294d: Pull complete  
1e557b93d557: Pull complete  
227291017118: Pull complete  
Digest: sha256:5a940b79d5655cc688cfb319bd4d0f18565bc732ae19fab6106daaa72aeb7a63  
Removing intermediate container 5317abe3649b  
 ---> 2ddb8a0e3225  
Successfully built 2ddb8a0e3225  
Successfully tagged myvue:latest  
SECURITY WARNING: You are building a Docker image from Windows against a non-Windows Docker host. All files and directories added to build context will have '-rwxr-xr-x' permissions. It is recommended to double check and reset permissions for sensitive files and directories.

The system will automatically install the dependency according to the script, and it needs to wait for a period of time for the first time.

After packaging, execute:

docker images

You can see that the volume of the front-end image is smaller:

[email protected] MINGW32 ~  
$ docker images  
REPOSITORY          TAG                 IMAGE ID            CREATED             SIZE  
myvue               latest              917d1c69f10f        23 hours ago        539MB

Run front end services:

docker run -it --rm -p 8081:8080 myvue

Port mapping is also used. This time, the host uses 8081. Of course, if necessary, you can modify it according to your preference.

Visit the vue.js service,Http: / / container IP:8081

Using docker container to deploy front-end and back-end separation project Django + vue.js in win10 environment

So far, through docker’s container technology, we have deployed the front and back services. The process is not complicated, but the significance is landmark. With these two images, Django is on the left and vue.js is on the right. If we need to expand horizontally any day, it only takes a few minutes, and we can “move in with bags” on the new server, which is flexible and convenient. Finally, the project documents are presented to share with you:https://gitee.com/QiHanXiBei/… https://gitee.com/QiHanXiBei/myvue

The original text is reproduced from “Liu Yue’s technology blog”https://v3u.cn/a_id_179

Recommended Today

C / C + + Programming Notes: C / C + + preprocessor, take you to learn C + + program better

As the name suggests, a preprocessor is a program that processes our source code before compilation. There are many steps involved between programming and executing in C / C + +. Let’s take a look at these steps before we actually start learning about the preprocessor.   You can see the intermediate steps in the […]