文章目录

---

前言

本文主要为记录本人使用Django+Vue3+MySQL开发后尝试部署项目进行的随笔，希望可以帮助同样面临Windows下部署前后端项目的人员使用。

一、Docker安装

Docker安装较为简单，从官网：Docker: Accelerated Container Application Development内下载后，无脑下一步即可，可以参考另一篇文章：Windows下安装Docker-CSDN博客。

二、准备工作

2.1 dist文件

在vue项目根目录输入npm run build，成功后根目录下会生成一个dist文件（参考：Vue+Django+Nginx部署在Windows服务器_django windows部署-CSDN博客）。

2.2 nginx

由于在开发环境中，前端和后端可能运行在不同的端口或域名下，会遇到跨域问题。在生产环境中，通常需要通过 Nginx 来解决跨域问题。因此，我们提前准备一份配置文件default.conf，并放在项目根目录下。

server {
    listen 8086;
    server_name localhost;

    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
    }

    location /api {
        proxy_pass http://backend: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;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

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

注意：这里的location /api 是因为我后端代码中每个url拼接了api，如果后端没有拼接或者用其他字段拼接，就不需要加/ap

2.3 Dockerfile

在项目根目录创建Dockerfile文件，注意没有后缀名。

FROM nginx:1.25.5

COPY dist/ /usr/share/nginx/html/

COPY nginx.conf /etc/nginx/conf.d/default.conf

EXPOSE 8086

CMD ["nginx", "-g", "daemon off;"]

三、镜像

3.1 创建镜像

docker build -t docker_image_name .

其中，docker_image_name是镜像名称，可以按自己喜好命名，一定要注意最后的. 这里容易看漏。

等待所有包安装结束后即证明镜像创建完成，可以通过下述代码或者Docker Desktop进行查看。

docker images 或者 docker images ls

3.2 运行镜像

输入下述代码或者在Docker Desktop中点击镜像列表右边的运行按钮运行。

docker run <选项> <镜像名称>:<标签>