Docker部署前后端分离项目

云主机 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 definitionINSTALLED_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 multiprocessingbind = "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/mydjangoCOPY requirements.txt ./
RUN pip install -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simpleCOPY . .
ENV LANG C.UTF-8CMD ["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.htmlindex: path.resolve(__dirname, '../dist/index.html'),// PathsassetsRoot: path.resolve(__dirname, '../dist'),assetsSubDirectory: 'static',assetsPublicPath: './',/*** Source Maps*/productionSourceMap: true,// https://webpack.js.org/configuration/devtool/#productiondevtool: '#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-pluginproductionGzip: 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 offbundleAnalyzerReport: 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 buildEXPOSE 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

至此，通过Docker的容器技术，我们就将前后端两大服务都分别部署好了！

好啦，今天的分享就到这里啦，希望可以给大家带来帮助！！！

Docker部署前后端分离项目相关推荐

基于docker部署前后端分离项目---＞docker+Dockerfile+vue+nginx+uwsgi+django+socket+负载均衡
1. 介绍本文基于阿里云服务器,安装的ubuntu20.04系统适用于conten7.5系列适用于ubuntu16.04以上系列 vue已经打包完成,所以不能使用我的vue项目 2. 部署部署 ...
使用 Nginx 部署前后端分离项目，解决跨域问题
前后端分离这个问题其实松哥和大家聊过很多了,上周松哥把自己的两个开源项目部署在服务器上以帮助大家可以快速在线预览(喜大普奔,两个开源的 Spring Boot + Vue 前后端分离项目可以在线体验了 ...
linux --- 部署前后端分离项目
vue + uwsgi +nginx 部署前后端分离项目准备项目 1.将前端vue项目包和后端django项目包上传服务器,通过lrzsz,直接从windows拖进linux中 2.解压缩操作前端 ...
(一)专题介绍：移动端安卓手机改造成linux服务器linux服务器中安装软件、部署前后端分离项目实战
快捷目录前言一.涉及到的相关技术简介二.具体实现过程及踩坑杂谈 1.安卓手机改造成linux系统实现方案 2.改造后的手机Linux中软件的安装 3.手机Linux中安装MySQL5.7踩坑实录 ...
tomcat vue 不用前后端_部署前后端分离项目(后端 tomcat 前端 nginx)
关键词 spring-boot gradle 腾讯云 tomcat nginx vue 前后端分离代理前言因为种种原因,把后端部署在 tomcat,前端项目部署在 nginx. Tomcat t ...
weblogic部署前后端分离项目
环境说明序号服务名称版本信息 1 weblogic weblogic 12.2.1.3.0 2 jdk jdk-1.8.0_111 环境准备 (1)jdk安装(已安装请忽略) 将发布包下的ins ...
k8s部署前后端分离项目
文章目录 1. 项目准备 1.1 后端项目 1.1.1 数据库表 1.1.2 SpringBoot项目 1.2 前端项目 1.2.1 页面 1.2.2 nginx代理 1.2.3 页面效果 2. Do ...
linux(centos7) docker配置前后端分离项目环境
一.安装docker 1.更新yum包,并安装需要的软件包,yum-util 提供yum-config-manager功能,另两个是devicemapper驱动依赖 yum -y upgrade yu ...
Windows 平台部署前后端分离项目
背景因为公司业务主要与工业相关,工业使用的多数为Windows电脑,此时就需要将公司的系统部署在Windows平台上,这里使用Django来作为后端. 一.数据库部署 1.1 本地环境准备在后端部 ...

Docker部署前后端分离项目

云主机 centos7 中Docker容器式部署前后端分离项目Django+Vue.js

前期准备：

部署后端Django：

好了，到这里我们本地对Django的操作基本就完事了

接下来在云主机命令行操作：

perfect！后端搞定，接下来轮到我们的前端服务vue.js了

同Django一样，vue项目的本地操作也完事了、

接下来在云主机命令行操作：

至此，通过Docker的容器技术，我们就将前后端两大服务都分别部署好了！

好啦，今天的分享就到这里啦，希望可以给大家带来帮助！！！

Docker部署前后端分离项目相关推荐

最新文章

热门文章