云主机 centos7 中Docker容器式部署前后端分离项目Django+Vue.js
前期准备:
-
Docker安装Docker - CentOS
Docker 软件包和依赖包已经包含在默认的 CentOS-Extras 软件源里,安装命令如下
yum -y install docker
-
本地安装软件FileZilla Client,并链接云主机,方便上传文件
安装教程:https://jingyan.baidu.com/article/e6c8503c6aa1a2e54f1a18a4.html
链接方法:如下图
部署后端Django:
-
在宿主机安装gunicorn,容器内我们用异步的方式来启动Django
pip install gunicorn gevent
-
接下来在Django项目中配置settings.py对应的应用:
# 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', 'gunicorn', 'dwebsocket', 'myapp' ]
-
然后在Django项目的根目录编写gunicorn的配置文件:gunicorn.conf.py
import multiprocessing bind = "0.0.0.0:8000" #绑定的ip与端口 workers = 1 #进程数
注意,ip必须是0.0.0.0,不要写成127.0.0.1,否则外部环境会访问不到容器内的服务
-
接下来在项目的根目录编写好依赖列表: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
这里需要注意的是,某些依赖的库最好用==标注出小版本,因为一会在容器内通过pip安装的时候,系统有可能会自动帮你安装最新版导致一些依赖报错
-
然后,在根目录编写Dockerfile文件
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"]
-
本地文件上传到云主机,如上述方法,利用FileZilla Client把项目上传到对应目录
好了,到这里我们本地对Django的操作基本就完事了
接下来在云主机命令行操作:
-
运行命令对项目进行打包:
docker build -t 'mydjango' .
第一次打包编译的时候,可能时间会长一点,耐心等一会就可以了,如果中途遇到网络错误导致的失败,反复执行打包命令即可
效果如下:
[root@iz2ze9ov0mfw2tdc28w8o8z mydjango]# docker build -t 'mydjango' . Sending build context to Docker daemon 12.71MB Step 1/7 : FROM python:3.7 ---> ca194d6afe58 Step 2/7 : WORKDIR /Project/mydjango ---> Using cache ---> 4878c4a91caa Step 3/7 : COPY requirements.txt ./ ---> 1c2c9840b5db Step 4/7 : RUN pip install -r requirements.txt -i ---> Running in 26b5be4ddfcc Looking in indexes: https://pypi.tuna.tsinghua.edu.cn/simple # 中间为下载过程,我这里就省略了 https://pypi.tuna.tsinghua.edu.cn/simple ---> 8775633a15e8 Step 5/7 : COPY . . ---> 50cad25dd1e6 Step 6/7 : ENV LANG C.UTF-8 ---> Running in 54d1f78c4e5e Removing intermediate container 54d1f78c4e5e ---> 5dc91e0dc5d5 Step 7/7 : CMD ["gunicorn", "mydjango.wsgi:application","-c","./gunicorn.conf.py"] ---> Running in 496b7db576b2 Removing intermediate container 496b7db576b2 ---> 3f65a3c94c16 Successfully built 3f65a3c94c16 Successfully tagged mydjango:latest
-
此时运行命令:
docker images
可以看到编译好的镜像大概有1g左右:
[root@iz2ze9ov0mfw2tdc28w8o8z ~]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE mydjango latest 3f65a3c94c16 About an hour ago 1.15GB
-
随后启动镜像服务:
docker run -it --rm -p 5000:8000 mydjango
这里我们用端口映射技术将宿主机的5000端口映射到容器内的8000端口,访问Django服务,http://云主机ip:5000
效果如下:
perfect!后端搞定,接下来轮到我们的前端服务vue.js了
-
首先打开vue项目的打包配置文件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 } }
-
将打包目录改成相对路径,同时注意路由的配置,如果曾经修改为history模式记得改回hash:
export default new Router({ routes:routes, //mode:'history' /*hash*/ })
-
接下来,在vue的项目根目录下编写Dockerfile:
这里我们选择体积更小的alpine镜像。
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" ]
-
准备完毕,接下来将vue项目上传到云主机(如上述上传django项目方法一样)
同Django一样,vue项目的本地操作也完事了、
接下来在云主机命令行操作:
-
进入项目的根目录,执行打包命令
docker build -t myvue .
系统会自动根据脚本进行安装依赖,第一次也需要等待一段时间。
-
打包完成后,执行:
docker images
-
可以看到前端镜像的体积要小一点:
[root@iz2ze9ov0mfw2tdc28w8o8z mydjango]# docker images REPOSITORY TAG IMAGE ID CREATED SIZE mydjango latest 3f65a3c94c16 About an hour ago 1.15GB myvue latest 5389cd4360e1 About an hour ago 416MB
-
运行前端服务:
docker run -it --rm -p 8081:8080 myvue
同样使用端口映射,这次宿主机使用8081,当然了,如果需要可以根据喜好进行修改。
-
访问Vue.js服务,http://云主机ip:8081