WSL2+docker+Vite+Flask笔记

wsl2安装

win10及以上系统适用。

以下操作在命令提示符中：

安装：以管理员方式运行命令提示符，输入命令。可能需要翻墙。

wsl --install

设置默认版本为2

wsl --set-default-version 2

升级并检查

wsl --update

以下操作在WSL中：

虚拟机挂载主机文件，主机文件夹共享后，在wsl中输入命令：

apt-get update
apt-get install cifs-utils
sudo mount -t drvfs //[ip]/[directory] /[mountpoint]

此后，该文件夹为你的主机和wsl共用。如果想将盘符进行映射，修改/etc/wsl.conf。

[automount]
root = /
options = "metadata,umask=22,fmask=11"

设置本地镜像为阿里云镜像，修改/etc/apt/sources.list。注：vim中d命令可以快速清空文件。

deb http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal main restricted universe multiverse
 
deb http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-security main restricted universe multiverse
 
deb http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-updates main restricted universe multiverse
 
deb http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-proposed main restricted universe multiverse
 
deb http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse
deb-src http://mirrors.aliyun.com/ubuntu/ focal-backports main restricted universe multiverse

更新镜像源。

sudo apt update
sudo apt upgrade

配置docker

在官网安装：https://www.docker.com/products/docker-desktop/

打开WSL共用

进入WSL中，输入docker ps可以进行测试是否成功。

配置vite项目

Dockerfile中

#使用Node作为基础镜像
FROM node:[your version]

#设置工作目录
WORKDIR [your workdir]

#将本地VITE项目文件复制到工作目录
COPY . .

# 安装依赖
RUN npm install

# 执行 Vite 构建命令，生成dist目录
RUN npm run build

# 使用 NGINX 镜像作为运行时镜像
FROM nginx:latest

# 将VITE项目的dist目录复制到NGINX的默认静态文件目录
COPY --from=0 [your workdir]/dist  /usr/share/nginx/html/
COPY nginx.conf /etc/nginx/conf.d/

# 暴露容器的80端口
EXPOSE 80

# NGINX 会在容器启动时自动运行，无需手动设置 CMD

.dockerignore

node_modules
dist

nginx.conf

server {
  listen 80;
  server_name localhost;

  location / {
    root   /usr/share/nginx/html;
    index  index.html;
    try_files $uri $uri/ /index.html;
  }

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

构建镜像

docker build -t vite-app .

运行容器

docker run -d -p [主机端口]:80 vite-app

访问

进入 http://localhost:[主机端口] 即可

配置Flask项目

编写Dockerfile

# 使用Python作为基础镜像
FROM python:3.9
# 设置工作目录
WORKDIR /app
# 复制应用代码到容器中
COPY . /app
# 安装依赖项
RUN pip install --no-cache-dir -r requirements.txt
# 暴露应用端口
EXPOSE 5000
# 设置启动命令
CMD ["python", "main.py"]

构建docker镜像

docker build -t flask-app .

运行docker容器

docker run -p 5000:5000 flask-app