史上最详细的docker+vue+nginx+django

一、django部署

(一)、准备工作

1）requirement.txt

在项目的根目录下，使用pip freeze > requirements.txt自动整合这个项目所需要的各种包到requirement.txt里面
ps:最好在pycharm的控制台中使用，在cmd中使用会有多余的包
这个命令可能会导错包，可以安装pip install pipreqs，
在项目根目录下执行pipreqs ./
如果报错执行pipreqs ./ --encoding=utf-8
参照：https://www.cnblogs.com/believepd/p/10423094.html

2）pip.conf

[global]
index-url = http://mirrors.aliyun.com/pypi/simple/
[install]
trusted-host=mirrors.aliyun.com

换个国内下载源

3）setting.py配置

ALLOWED_HOSTS = ['47.106.235.3','localhost', '0.0.0.0:8000', '127.0.0.1']

第一个是你服务器的地址

4）Dockerfile文件

FROM python:3.7.9 
RUN mkdir -p /app
WORKDIR /app 
COPY pip.conf /root/.pip/pip.conf
COPY requirements.txt /app 
COPY . /app


EXPOSE 8000
RUN pip install -r /app/requirements.txt

CMD  ["python","./manage.py","runserver","0.0.0.0:8000"] 

Dockerfile文件没有后缀，pip.conf,Dockerfile文件放到根目录下，# FROM下载python，WORKDIR调到app目录下相当于cd，COPY复制当前文件到app下，EXPOSE 8000开放端口8000，
Dockerfile里面的每个命令都会执行,COPY复制文件到后面的路径下，CMD里面的是项目启动命令，在开启容器时，项目直接启动，没有写的话，也可以在容器里面写上运行指令。

5）项目上传

把项目弄到服务器上，使用git下载，或者上传文件，上传文件只能以zip格式压缩，在服务器上使用unzip xxxx.zip解压

ps：文件上传，在服务器上下载yum install -y lrzsz，使用xshell拖拽比较方便，也可以使用rz上传文件

（二）、docker部署

进入Dockerfile所在的那一级目录下面
执行

[root@iZwz9ckp6his3nsnkt9on4Z book-recommend]# docker image build -t hello .

-t参数用来指定 image 文件的名字，后面还可以用冒号指定标签。如果不指定，默认的标签就是latest。最后的那个点表示 Dockerfile 文件所在的路径，因为是当前路径，所以是一个点。

[root@iZwz9ckp6his3nsnkt9on4Z book-recommend]# docker image ls

如果成功的话，查看当前镜像，里面就会有你的image
下面来创建容器

$ docker container run -p 8000:8000 -it --name container-hello hello

-p参数：第一个8000是本机端口，第二个8000是容器端口
-it参数：容器的 Shell 映射到当前的 Shell，然后你在本机窗口输入的命令，就会传入容器。
container-hello:是容器名字
hello：image 文件的名字（如果有标签，还需要提供标签，默认是 latest 标签）。

运行成功的话，在网址上输入47.106.235.3：8000就能看到djangoapi了

二、nginx配置

server {
        listen       8081;# vue端口
        server_name  47.106.235.3;#服务器IP

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
     location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
        }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
        # api 记得换成自己定义的名字
        location ^~/api/ {
              proxy_pass  http://47.106.235.3:8000/;#后端api接口
            }

需要修改listen，server__name,location^~/api/

三、vue部署

（一）、准备工作

1）vue项目打包

先下载npm

npm run install

在项目的根目录下面输入npm run build打包成dist文件

2）vue.config.js

module.exports = {
    // 配置跨域请求
    devServer: {
        port: 8081,# vue的端口
        host: '47.106.235.3',#服务器ip host：localhost也可以
        open: true,
        https: false,
        proxy: {
            '/api': {
                target: 'http://47.106.235.3:8000/',# 后端django的端口http://localhost:8000/ 也可以
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': '/'
                }
            }
        }

    }

}

port vue端口，host服务器IP,target 后端端口
修改host，port，target

3）Dockerfile

# 设置基础镜像
FROM nginx
# 定义作者
MAINTAINER wsd
# 将dist文件中的内容复制到 /usr/share/nginx/html/ 这个目录下面
COPY dist/  /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/nginx.conf
EXPOSE 8081 # 开放端口8081
RUN echo 'Hello World'

修改 port

4）文件上传

同django文件上传，只需上传dist和Dockerfile文件即可

（二）、docker部署

解压之后，进入到Dockerfile那一级目录，跟django部署一样

[root@iZwz9ckp6his3nsnkt9on4Z ~]# docker image build -t vue-hello .

成功之后查看镜像

docker image ls

容器里面启动项目

$ docker container run -p 8000:8000 -it --name container-hello-vue hello-vue

访问47.106.235.3：8081就可以看到自己的项目了，真棒。