Docker部署前后端分离项目_秦殇字符限制-CSDN博客

本文链接：https://blog.csdn.net/QinShang___RGZN/article/details/115321517

云主机 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