部署vue+django项目（初版）

1.准备

vscode 插件Remote SSH，连接远程，打开远程中home文件夹。

镜像和容器的一些常用命令

docker images
docker ps   查看所有正在运行的容器
docker ps -a
docker rmi -f tk-django-app  删除镜像
docker rm  xxx  删除容器
docker start xxxx    启动容器
docker exec -it   xxxx /bin/sh
docker exec -it   xxxx sh
看容器日志  docker logs xxx
应用内：检查8000端口是否成功 （容器中访问， 宿主机中访问）
 curl http://localhost:8000   
宿主机防火墙检查  检查8000是否开开放
sudo iptables -L -n | grep ':8000'
# 查看映射文件
docker inspect tk-django | grep -A 10 "Mounts"

我在home下建了一个 部署目录叫 taoke作为部署目录。

/home/taoke/
├── back/                      
│   ├── Dockerfile                 # Django 的 Dockerfile
│   │── base.py						# 为了支持mysql5.8以下的要更换下源码
│   │── allure-commandline-2.20.1.tgz    # 生成allure报告需要这个java插件
│   │── openjdk-8u40-b25-linux-x64-10_feb_2015.tar.gz
│   └── tkplat/                    # Django 项目根目录（代码）
│       ├── manage.py            
│       ├── tkplat/                
│       │   ├── settings.py        
│       │   └── wsgi.py            # WSGI 入口文件
│       ├── apps/                  # 自定义应用目录
│       │   └── ...                # 你的 Django 应用
│       └── requirements.txt        # Python 依赖文件
├── front/                         #  前端
│   └── dist/                      # 前端构建后的静态资源
│       ├── index.html             
└── nginx-docker/               
    ├── conf/                      # Nginx 配置
    │   ├── nginx.conf             # 主配置文件
    │   └── default.conf       
    ├── html/                      # 默认 HTML 页面（可选）
    │   └── 50x.html
    ├── logs/                      # Nginx 日志目录
    │   ├── access.log
    │   └── error.log
    └── static/                    # 静态资源目录（用来指向django的静态文件）

2. 准备好公共网络 、拿到django的静态文件

公共网络

创建nginx容器，和djang应用容器时都公用这个网络。
目的是：nginx 要使用8000 端口。 因为有需求是，访问后端的static的静态文件和接口 的端口要一样。（以上方式就能满足）

• 使用:8000/ 去对应django容器内的8000端口。 (建django容器的时候不用 -p 8000：8000 宿主机的8000端口留给nginx)
• 使用:8000/static 对应django内的静态文件

docker network create tk_django_ng

创建django镜像

到back目录下，里面放tkplat后端的djang代码和其他创建镜像需要的，如allure插件

Dockerfile 的内容如下

FROM python:3.9.7

# 解压jdk和allure
ADD allure-commandline-2.20.1.tgz /opt
ADD openjdk-8u40-b25-linux-x64-10_feb_2015.tar.gz /opt

# 设置工作目录
 WORKDIR /app

# 复制(项目内的)依赖文件并安装
COPY tkplat/requirements.txt .
RUN pip install mysqlclient==2.2.4 -i https://pypi.tuna.tsinghua.edu.cn/simple
RUN pip install --no-cache-dir -r requirements.txt -i https://pypi.tuna.tsinghua.edu.cn/simple

# 解决django不能使用5.8以下mysql的问题
COPY base.py  /usr/local/lib/python3.9/site-packages/django/db/backends/base

# 复制项目代码(这种事 /app目录下还有 一个 tkplat)
# COPY tkplat /app/tkplat
COPY tkplat/ /app/ 


# env 用于设置环境变量的
RUN mv /opt/java-se-8u40-ri  /opt/java
ENV  JAVA_HOME  /opt/java
ENV PATH $PATH:$JAVA_HOME/bin:/opt/allure-2.20.1/bin


# 暴露端口
EXPOSE 8000

# # 启动命令  
# 设置 PYTHONPATH 如果Dockerfile在django项目里面(或者上面的copy项目方式变成以上的写法)，就不需要ENV
#ENV PYTHONPATH=/app/tkplat
CMD ["gunicorn", "--bind", "0.0.0.0:8000", "tkplat.wsgi:application"]  

然后到back目录中，运行下面， 就创建好了镜像了
创建镜像
docker build -t tk-django-app .

临时django容器、把静态文件cp出来

先创建一个临时的django容器，用共用网络或者8000:8000或者其他

docker run -d -p 8000:8000 --name tmp-django tk-django-app
docker run -d --network tk_django_ng --name tmp-django tk-django-app

检查django应用容器

• 使用 docker logs 容器名, 如下图表示运行了
  
• 进入容器内，curl一下检查，django应用是否正常

  docker exec -it tmp-django sh 
  apk add --no-cache curl   # 安装一下
   curl http://localhost:8000
   curl  http://127.0.0.1:8000/api/sys/students/   # 验证接口
   exit
  

• 查看allure命令，也是要进入到容器内

  allure --version
  

把容器内的文件复制出来 和 放到宿主机目录下（后面django容器和ng容器都要映射这个目录）。
到taoke 目录下，

mkdir nginx-docker

再到 nginx-docker 目录下 把静态文件复制出来

docker cp tmp-django:/app/static ./

这样后， nginx-docker/static 里面就有静态文件。
再删除临时的django容器

docker stop tmp-django 
docker rm tmp-django 

3. 准备Nginx本地目录其他结构（假设已经有了nginx镜像）

/home/taoke/nginx-docker 下

# 创建本地工作目录（当前目录下建一个nginx-dokcer ,然后下面又有4个目录）
# mkdir -p ./nginx-docker/{html,conf,logs}

/home/taoke/nginx-docker 下
mkdir ./{html,conf,logs}

# 运行临时容器（用于复制默认配置）
docker run --name nginx-temp -d nginx   # 默认为80，如果没有80指定一个
docker cp nginx-temp:/etc/nginx/nginx.conf ./nginx.conf  # 容器内一般是这个路径
docker cp nginx-temp:/etc/nginx/conf.d/default.conf ./default.conf 
# 停止并删除临时容器
docker stop nginx-temp 
docker rm nginx-temp 

# 把复制出来的配置文件移动到对应位置
mv nginx.conf ./nginx-docker/conf/
mv default.conf ./nginx-docker2/conf/

# 准备一个测试用的静态文件
echo "hello 静态文件" > ./nginx-docker2/static/test.txt

4. 准备vue前端静态文件

准备好前端打包文件

taoke 下建一个 文件叫 front（叫front好点，表示前端，） , 里面放 npm run build 打包好的dist文件（注，需提前把后端请求地址设置好哟）

准备好要用的端口，如8011

docker要添加一次 8011， 
并重启sudo systemctl stop docker
sudo iptables -t nat -F
sudo iptables -t mangle -F
sudo iptables -F
sudo iptables -X

# 重启 Docker
sudo systemctl start docker

# 对于 firewalld
sudo firewall-cmd --permanent --zone=public --add-port=8011/tcp
sudo firewall-cmd --reload
sudo firewall-cmd --zone=public --list-ports
sudo systemctl restart docker

步骤1：检查宿主机端口8011是否被占用，使用sudo lsof -i :8011或
sudo netstat -tulnp | grep 8011

正式启动Nginx容器（映射配置、静态文件、公共网络、）

如下、使用了容器公共网络和 前端vue映射到了nginx容器内部和宿主机一个目录映射到了容器内部的static 以及default.conf配置
这样，只需要改宿主机，就能改nginx容器内部的文件了
到taoke目录下

docker run -d   -p 8011:8011 -p 8000:8000 \
--network tk_django_ng  \
-v ./front/dist:/usr/share/nginx/html  \
-v ./nginx-docker/static:/static \
-v ./nginx-docker/conf/default.conf:/etc/nginx/conf.d/default.conf   \
-v ./nginx-docker/logs:/var/log/nginx \
--name tk-nginx  \
nginx

ng配置

配置宿主机的nginx-docker/conf/default.conf文件。
修改了一下，就要 重启 一下

docker restart tk-nginx

前端8011的端口配置，配置好，重启，就可以访问页面了（主要端口要开放）

server {
    listen       8011;
    listen  [::]:8011;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;
   
	# vue 前端路由
    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri $uri/ /index.html;  # 该步表示，所有非真实文件路径的请求都会回退到index.html
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}

后端静态文件

server {
    listen 8000;
    server_name  localhost;


        # 反向代理 Django API
#    location /api/ {
#        #proxy_pass http://backend:8000;  # 根据你的后端地址调整
#        proxy_pass http://tk-django:8000;  # 共用网络的django容器:8000
#        proxy_set_header Host $host;
#        proxy_set_header X-Real-IP $remote_addr;
#        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#    }

    	# django静态文件	
    location /static/ {
    alias /static/;
   }

}

修改ngix配置后，记得restart 容器
前端静态文件，就可以用 8011访问了

宿主机（/home/taoke/nginx-docker3/static）的静态文件，可以被访问了、

根据配置 text.txt在容器内部的static内部，就能通过8000/static访问到

curl http://localhost:8000/static/test.txt

也可以用通过浏览器访问静态文件

5. 创建django正式容器

在taoke目录下运行， 不用映射 端口号， 它和ng共用一个端口号
docker run -d --network tk_django_ng -v ./nginx-docker/static:/app/static --name tk-django tk-django-app

6. 再配置哈nginx，即可访问前后端

default.conf 修改后重启一下，

 docker restart tk-nginx 

完整default的配置

server {
    listen       8011;
    listen  [::]:8011;
    server_name  localhost;

    #access_log  /var/log/nginx/host.access.log  main;
   
	# vue 前端路由
    location / {
        root   /usr/share/nginx/html;
        index  index.html;
        try_files $uri $uri/ /index.html;  # 该步表示，所有非真实文件路径的请求都会回退到index.html
    }

    error_page   500 502 503 504  /50x.html;
    location = /50x.html {
        root   /usr/share/nginx/html;
    }

}


server {
    listen 8000;
    server_name  localhost;


        # 反向代理 Django API
   location /api/ {
       #proxy_pass http://backend:8000;  # 根据你的后端地址调整
       proxy_pass http://tk-django:8000;  # 共用网络的django容器:8000
       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
   }

    	# django静态文件	
    location /static/ {
    alias /static/;
   }

}