It is an all embracing ocean. In win10 environment, it uses docker container to deploy the front-end and back-end separation project Django+ Vue.js

Liu Yue's technology blog 2020-11-17 22:52:54
embracing ocean. ocean win10 win

Reproduced from 「 Liu Yue's technology blog 」

With the continuous promotion of modern product research and development , We will find that , Almost every product line will contain services with different functions , Moreover, there will be complex dependence and dependency relationship between services , This brings about a worldwide problem , When the project is deployed, the operation and maintenance department needs to manually configure the protocol and address of communication between services , A little carelessness will lead to abnormal service , At the same time, if the server changes the physical machine due to bad channel or other reasons , The cost of relocating a new environment can also be very high . therefore , We will place our hopes on Docker This container technology allows us to quickly and quickly deploy all the services we need to build our products , And you can scale horizontally according to your needs , And it can ensure stable disaster tolerance , In case of problems, you can use the daemons to automatically restart or start disaster recovery backup .

This time we will be in Win10 Use... In the environment Docker Container technology for front and rear separation projects Django+Vue.js package , Customize the corresponding project image separately , Respond to the requirements of rapid deployment and high expansion .

First of all, of course, installation Docker, You can refer to this video introduction :win10 Installation configuration Docker And change domestic sources .

Then install it on the host gunicorn, In the container, we start it asynchronously Django

pip3 isntall gunicorn gevent

Django Project configuration Corresponding application :

# Application definition

And then in Django The root directory of the project gunicorn Configuration file for

import multiprocessing
bind = "" # The binding of ip And port
workers = 1 # Number of processes 

Pay attention here ,ip Must be, Don't write as, Otherwise, the external environment will not be able to access the services in the container , Next, write the dependency list in the root of the project :requirements.txt


What needs to be noted here is , Some dependent libraries are best used == Mark out the small version , Because it will pass through the container later pip During installation , The system may automatically help you install the latest version, resulting in some dependency errors .

Here's the old routine , Write in the root directory DockerFile file :

FROM python:3.7
WORKDIR /Project/mydjango
COPY requirements.txt ./
RUN pip install -r requirements.txt -i
COPY . .
CMD ["gunicorn", "mydjango.wsgi:application","-c","./"]

The basic image of this time we choose 3.7, After all 2020 Years. , It is necessary to keep pace with the times .

ok, everything , Run the command to package the project :

liuyue@DESKTOP-NVU6CCV 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
---> 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","./"]
---> 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 point to note here is to enter the project directory to execute

docker build -t 'mydjango' .

My project directory here is mydjango.

The first time you package and compile , Maybe a little longer , Just be patient for a while , If you encounter a failure caused by a network error , Execute the packing command repeatedly , Now run the command :

docker images

You can see that the compiled image probably has 1g about :

$ docker images
mydjango latest c3ffb74ae263 24 hours ago 1.04GB

Then start the mirror service :

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

Here we use port mapping technology to convert the host's 5000 Ports are mapped to... In the container 8000 port , visit Django service ,http:// Containers ip:5000

The back end is done , Next, it's our front-end service vue.js 了 , Start by opening vue Package configuration file for the project 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,
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 it was ever changed to history Remember to change the mode back to hash:

export default new Router({
//mode:'history' /*hash*/

The preparations are complete , stay vue Under the project root directory Dockerfile:

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
# 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
CMD [ "http-server", "dist" ]

Here we choose smaller alpine Mirror image .

Then go to the root of the project , Execute package command :

docker build -t myvue .

My front-end directory here is myvue

liuyue@DESKTOP-NVU6CCV 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 , It takes a while for the first time .

After packing , perform :

docker images

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

$ docker images
myvue latest 917d1c69f10f 23 hours ago 539MB

Run front end services :

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

Also use port mapping , This time the host uses 8081, Yes, of course , If necessary, you can modify it according to your preference .

visit Vue.js service ,http:// Containers ip:8081

thus , adopt Docker Container technology , We have deployed the front and rear end services separately , The process is not complicated , But the significance is a milestone , With these two mirror images , Pull left Django, Right engine Vue.js, If you need lateral expansion one day , Just a few minutes , We can do it on the new server “ The bag in ”, Flexible and convenient . Finally, we present the project documents , Let me share with you :

Reproduced from 「 Liu Yue's technology blog 」

本文为[Liu Yue's technology blog]所创,转载请带上原文链接,感谢

  1. 利用Python爬虫获取招聘网站职位信息
  2. Using Python crawler to obtain job information of recruitment website
  3. Several highly rated Python libraries arrow, jsonpath, psutil and tenacity are recommended
  4. Python装饰器
  5. Python实现LDAP认证
  6. Python decorator
  7. Implementing LDAP authentication with Python
  8. Vscode configures Python development environment!
  9. In Python, how dare you say you can't log module? ️
  10. 我收藏的有关Python的电子书和资料
  11. python 中 lambda的一些tips
  12. python中字典的一些tips
  13. python 用生成器生成斐波那契数列
  14. python脚本转pyc踩了个坑。。。
  15. My collection of e-books and materials about Python
  16. Some tips of lambda in Python
  17. Some tips of dictionary in Python
  18. Using Python generator to generate Fibonacci sequence
  19. The conversion of Python script to PyC stepped on a pit...
  20. Python游戏开发,pygame模块,Python实现扫雷小游戏
  21. Python game development, pyGame module, python implementation of minesweeping games
  22. Python实用工具,email模块,Python实现邮件远程控制自己电脑
  23. Python utility, email module, python realizes mail remote control of its own computer
  24. 毫无头绪的自学Python,你可能连门槛都摸不到!【最佳学习路线】
  25. Python读取二进制文件代码方法解析
  26. Python字典的实现原理
  27. Without a clue, you may not even touch the threshold【 Best learning route]
  28. Parsing method of Python reading binary file code
  29. Implementation principle of Python dictionary
  30. You must know the function of pandas to parse JSON data - JSON_ normalize()
  31. Python实用案例,私人定制,Python自动化生成爱豆专属2021日历
  32. Python practical case, private customization, python automatic generation of Adu exclusive 2021 calendar
  33. 《Python实例》震惊了,用Python这么简单实现了聊天系统的脏话,广告检测
  34. "Python instance" was shocked and realized the dirty words and advertisement detection of the chat system in Python
  35. Convolutional neural network processing sequence for Python deep learning
  36. Python data structure and algorithm (1) -- enum type enum
  37. 超全大厂算法岗百问百答(推荐系统/机器学习/深度学习/C++/Spark/python)
  38. 【Python进阶】你真的明白NumPy中的ndarray吗?
  39. All questions and answers for algorithm posts of super large factories (recommended system / machine learning / deep learning / C + + / spark / Python)
  40. [advanced Python] do you really understand ndarray in numpy?
  41. 【Python进阶】Python进阶专栏栏主自述:不忘初心,砥砺前行
  42. [advanced Python] Python advanced column main readme: never forget the original intention and forge ahead
  43. python垃圾回收和缓存管理
  44. java调用Python程序
  45. java调用Python程序
  46. Python常用函数有哪些?Python基础入门课程
  47. Python garbage collection and cache management
  48. Java calling Python program
  49. Java calling Python program
  50. What functions are commonly used in Python? Introduction to Python Basics
  51. Python basic knowledge
  52. Anaconda5.2 安装 Python 库(MySQLdb)的方法
  53. Python实现对脑电数据情绪分析
  54. Anaconda 5.2 method of installing Python Library (mysqldb)
  55. Python implements emotion analysis of EEG data
  56. Master some advanced usage of Python in 30 seconds, which makes others envy it
  57. python爬取百度图片并对图片做一系列处理
  58. Python crawls Baidu pictures and does a series of processing on them
  59. python链接mysql数据库
  60. Python link MySQL database